睿乐购电商课程设计——图片上传

最新推荐文章于 2020-07-04 21:12:13 发布

原创最新推荐文章于 2020-07-04 21:12:13 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

电商课程设计项目专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了睿乐购电商平台的商品图片上传流程，包括前端表单设计、图片上传工具类实现及后端处理逻辑。前端使用layui框架设计商品信息录入表单，支持商品图片上传；后端采用Java SpringBoot实现图片上传功能，通过MultipartFile处理文件，并利用自定义工具类UploadUtils保存图片至指定目录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

睿乐购电商课程设计——图片上传

- - 图书前端
  - 后台

图书前端


<body>
	<div class="x-body">
		<form class="layui-form" enctype="multipart/form-data" id="addForm">
			<div class="layui-form-item">
				<label for="name" class="layui-form-label">
					<span class="x-red">*</span>商品名
				</label>
				<div class="layui-input-inline">
					<input type="text" id="name" name="name" value="新货夏威夷果 罐装奶油口味坚果炒货干果特产 零食小吃 奶油大罐装500g" required="" lay-verify="required" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="category_id" class="layui-form-label">
					<span class="x-red">*</span>商品编号
				</label>
				<div class="layui-input-inline">
					<input type="text" id="category_id" value="127" name="category_id" required="" lay-verify="required" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="subtitle" class="layui-form-label">
					<span class="x-red">*</span>副标题
				</label>
				<div class="layui-input-inline">
					<input type="text" id="subtitle"  value="奶油口味坚果炒货干果特产 零食小吃" name="subtitle" required="" lay-verify="required" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="subtitle" class="layui-form-label">
					<span class="x-red">*</span>主图片路径
				</label>
				<div class="layui-input-inline">
					<input type="file" name="mainImg" id="mainImg" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="subtitle" class="layui-form-label">
					<span class="x-red">*</span>子图片路径
				</label>
				<div class="layui-input-inline">
					<input type="file" name="subImg" id="subImg" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="price" class="layui-form-label">
					<span class="x-red">*</span>价格
				</label>
				<div class="layui-input-inline">
					<input type="text" id="price" value="56" name="price" required="" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="stock" class="layui-form-label">
					<span class="x-red">*</span>库存
				</label>
				<div class="layui-input-inline">
					<input type="text" id="stock" value="65" name="stock" required="" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="our_rating" class="layui-form-label">
					<span class="x-red">*</span>评级
				</label>
				<div class="layui-input-inline">
					<input type="text" id="our_rating" value="10" name="our_rating" required="" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="stock" class="layui-form-label">
					<span class="x-red">*</span>位置
				</label>
				<div class="layui-input-inline">
					<input type="text" id="postion" value="N" name="postion" required="" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
	</div>
	<div class="layui-form-item">
		<label for="status" class="layui-form-label">
			<span class="x-red">*</span>状态
		</label>
		<div class="layui-input-inline">
			<select name="status">
				<option value="S">在售</option>
				<option value="W">下架</option>
				<option value="D">删除</option>
			</select>
		</div>
	</div>
	<div class="layui-form-item layui-form-text">
		<label for="detail" class="layui-form-label">
			商品详情
		</label>
		<div class="layui-input-inline">
			<textarea id="detail" name="detail" placeholder="请输入文本......" autofocus></textarea>
		</div>
	</div>
	<div class="layui-form-item">
		<label for="L_repass" class="layui-form-label">
		</label>
		<button class="layui-btn" onclick="goodsadd()">
			增加
		</button>
	</div>
	</form>
	</div>
	<script>
		$(function () {
			var editor = new Simditor({
				textarea: $('#detail')
			});
		})

	</script>
</body>

function goodsadd() {
    var formdata = new FormData($("#addForm")[0]);
    $.ajax({
        type:"POST",
        dataType:"json",
        url:"addProduct",
        data:formdata,
        async:false,
        cache:false,
        contentType:false,
        processData:false,
        url: "/manage/goods/add",
        headers: { token: sessionStorage.getItem("token")},
        success: function (result) {
            if (result.status == 200) {
                layer.msg(result.msg);
            } else if (result.status == 404) {
                location.href = "404.html";
            } else {
                layer.msg(result.msg);
            }
            // 获得frame索引
            var index = parent.layer.getFrameIndex(window.name);
            console.log(index);
            //关闭当前frame
            parent.layer.close(index);

            xadmin.close();
            // 可以对父窗口进行刷新
            xadmin.father_reload();

        },
    })
}

后台

UploadUtils.java: 图片上传工具类

package com.ysu.shop.util;

import java.io.File;

public class UploadUtils {

    // 项目根路径下的目录  -- SpringBoot static 目录相当于是根路径下（SpringBoot 默认） 
    public final static String IMG_PATH_PREFIX = "assets/images/goods/";

    public static File getImgDirFile(){

        // 构建上传文件的存放 "文件夹" 路径
        String fileDirPath = new String("src/main/resources/static/rlg/" + IMG_PATH_PREFIX);

        File fileDir = new File(fileDirPath);
        if(!fileDir.exists()){
            // 递归生成文件夹
            fileDir.mkdirs();
        }
        return fileDir;
    }
}

conntroller

 @ApiOperation(value="添加一个商品信息",notes="添加一个商品信息")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "token", value = "获取用户信息", required = true, paramType = "header"),
            @ApiImplicitParam(name="category_id",value="类别id",required = true,paramType = "body"),
            @ApiImplicitParam(name="name",value="商品名称",required = true,paramType = "body"),
            @ApiImplicitParam(name="subtitle",value="副标题",required = true,paramType = "body"),
            @ApiImplicitParam(name="main_image",value="主图地址",required = true,paramType = "body"),
            @ApiImplicitParam(name="sub_image",value="子图地址",required = false,paramType = "body"),
            @ApiImplicitParam(name="detail",value="商品详情",required = true,paramType = "body"),
            @ApiImplicitParam(name="price",value="商品价格",required = true,paramType = "body"),
            @ApiImplicitParam(name="stock",value="库存量",required = false,paramType = "body"),
            @ApiImplicitParam(name="our_ratings",value="推荐指数",required = false,paramType = "body"),
            @ApiImplicitParam(name="postion",value="商品推荐位置",required = false,paramType = "body"),
            @ApiImplicitParam(name="status",value="商品状态",required = false,paramType = "body")
    })
    @ApiResponses({
            @ApiResponse(code = 402, message = "用户未登录，无法操作"),
            @ApiResponse(code = 412, message = "不是管理员，没有该权限操作"),
            @ApiResponse(code = 1, message = "商品已存在/输入参数不正确"),
            @ApiResponse(code = 1, message = "请上传商品的主图片"),
            @ApiResponse(code = 200, message = "添加成功")
    })
    @PostMapping("/goods/add")
    public Result addGoods(@ApiIgnore Goods goods,@RequestParam("mainImg") MultipartFile mainImg,
    @RequestParam("subImg") MultipartFile subImg, @ApiIgnore @TokenToUser User oldUser)  throws Exception{
        valid(oldUser);
        if(!mainImg.isEmpty()){
            String fileName = mainImg.getOriginalFilename();  // 文件名
            String saveName = System.currentTimeMillis()+fileName.substring(fileName.lastIndexOf("."));  // 后缀名
             // 存放上传图片的文件夹
            File fileDir = UploadUtils.getImgDirFile();
            log.debug("添加商品主图片的文件夹--"+fileDir.getAbsolutePath());
            // 构建真实的文件路径
            File newFile = new File(fileDir.getAbsolutePath()+ File.separator+saveName);
            log.debug("添加商品主图片的url--"+newFile.getAbsolutePath());
            // 上传图片到 -》 “绝对路径”w
            mainImg.transferTo(newFile);
            goods.setMain_image(UploadUtils.IMG_PATH_PREFIX+saveName);
        }else{
            return ResultGenerator.getErrorResult(10,"请上传商品的主图片");
        }
        setGoodsDefultValue(goods);
        if(!subImg.isEmpty()){
            String fileName = subImg.getOriginalFilename();  // 文件名
            String saveName = System.currentTimeMillis()+fileName.substring(fileName.lastIndexOf("."));  // 后缀名
             // 存放上传图片的文件夹
            File fileDir = UploadUtils.getImgDirFile();
            log.debug("添加商品子图片的文件夹--"+fileDir.getAbsolutePath());
            // 构建真实的文件路径
            File newFile = new File(fileDir.getAbsolutePath()+File.separator+saveName);
            log.debug("添加商品子图片的url--"+newFile.getAbsolutePath());
            // 上传图片到 -》 “绝对路径”
            subImg.transferTo(newFile);
            goods.setMain_image(UploadUtils.IMG_PATH_PREFIX+saveName);
        }
        int r = goodsService.insert(goods);
        if (r == 0) {
            return ResultGenerator.getErrorResult("商品已存在/输入参数不正确");
        }
        return ResultGenerator.getSuccessResult("添加成功");
    }