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

悠悠 2023-02-23 03:39 51阅读 0赞

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

*   *   *  图书前端
         *  后台

### 图书前端 ###

<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>

*  js

### 后台 ###

*  `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("添加成功");
        }