SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目图片上传并查看功能实现汇总

青旅半醒 2023-10-07 18:20 47阅读 0赞

**SSM项目下的图片上传：**  
1.前端Js代码：用户点击“上传头像”按钮后，会执行uploadPhoto()的方法。

2.uploadPhoto()方法的代码：会点击上面写的type=file的input标签，然后触发onchange，执行upload()方法。

function uploadPhoto(){
       $("#photo-file").click();
    }

3.upload()方法代码如下！大致意思就是：获取当前用户选择的第一张图片，然后调用ajax请求，将图片数据往后端传递。

4.后端Controller层代码实现如下。大致意思就是：将图片存到本地，然后把图片的路径返回给前端。

@Controller("FileController")
    @RequestMapping("/common/file")
    public class FileController {
        
    
        private Logger logger = LoggerFactory.getLogger(FileController.class);
    
        @Autowired
        private ResourceLoader resourceLoader;
    
        /**
         * 上传图片统一处理
         * @param photo
         * @param request
         * @return
         */
        @RequestMapping(value="/upload_photo",method= RequestMethod.POST)
        @ResponseBody
        public ResponseVo<String> uploadPhoto(MultipartFile photo, HttpServletRequest request){
        
            if(photo == null){
        
                return ResponseVo.errorByMsg(CodeMsg.PHOTO_EMPTY);
            }
            //检查上传文件大小 不能超过1MB
            if(photo.getSize() > 1 * 1024* 1024) {
        
                return ResponseVo.errorByMsg(CodeMsg.PHOTO_SURPASS_MAX_SIZE);
            }
            //获取文件后缀
            String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".")+1,photo.getOriginalFilename().length());
            if(!CommonUtil.isPhoto(suffix)){
        
                return ResponseVo.errorByMsg(CodeMsg.PHOTO_FORMAT_NOT_CORRECT);
            }
            String path = request.getContextPath();
            String savePath = RuntimeConstant.BASE_UPLOAD_PHOTO_PATH + CommonUtil.getFormatterDate(new Date(), "yyyyMMdd") + "\\";
            File savePathFile = new File(savePath);
            if(!savePathFile.exists()){
        
                //若不存在改目录，则创建目录
                savePathFile.mkdir();
            }
            String filename = new Date().getTime()+"."+suffix;
            logger.info("保存图片的路径:{}",savePath + filename);
            try {
        
                //将文件保存至指定目录
                photo.transferTo(new File(savePath + filename));
            }catch (Exception e) {
        
                e.printStackTrace();
                return ResponseVo.errorByMsg(CodeMsg.SAVE_FILE_EXCEPTION);
            }
            String filepath = "../resources/upload/" + CommonUtil.getFormatterDate(new Date(), "yyyyMMdd") + "/" + filename;
            return ResponseVo.successByMsg(filepath, "图片上传成功！");
        }

5.前端ajax回调函数中将返回的路径赋值到对应form表单下面的input标签中，方便后面表单提交时候，将图片路径信息一起传到后端，存到数据库中。  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16]  
**注意**：这里name属性必须和你后端的实体字段对应，要不然传不过去。同时后端实体要实现Getter/Setter方法

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
6.图片查看功能实现：同样还是在前面的Controller文件中实现一个查看图片的方法：

/**
         * 系统统一的图片查看方法
         * @param filename
         * @return
         */
        @RequestMapping(value="/view_photo")
        @ResponseBody
        public ResponseEntity<?> viewPhoto(@RequestParam(name="filename",required=true)String filename){
        
            String uploadPhotoPath = RuntimeConstant.BASE_UPLOAD_PHOTO_PATH;
            String fileDate = CommonUtil.getFileDate(filename); //取得文件路径中的日期部分
            logger.info("文件路径中日期部分：{}",fileDate);
            filename = "\\" + filename.substring(filename.lastIndexOf("/") + 1); //取得文件名
            Resource resource = resourceLoader.getResource("file:" + uploadPhotoPath + fileDate + filename);
            logger.info("查看图片路径:{}",uploadPhotoPath + fileDate + filename);
            try {
        
                return ResponseEntity.ok(resource);
            } catch (Exception e) {
        
                return ResponseEntity.notFound().build();
            }
        }

采用如下代码调用：filename=后面写上你数据库中图片字段的值。就OK了！

--------------------

**SpringBoot项目下的图片上传：**  
SSM是将图片存储到WebApp文件夹下面，SpringBoot是将图片存储到resources文件夹下面。因此只需修改后端存储路径的代码，其他和SSM保持一致：

/**
    	 * 图片统一上传类
    	 * @param photo
    	 * @return
    	 */
    	@RequestMapping(value="/upload_photo",method=RequestMethod.POST)
    	@ResponseBody
    	public ResponseVo<String> uploadPhoto(@RequestParam(name="photo",required=true)MultipartFile photo){
        
    		//判断文件类型是否是图片
    		String originalFilename = photo.getOriginalFilename();
    		//获取文件后缀
    		String suffix = originalFilename.substring(originalFilename.lastIndexOf("."),originalFilename.length());
    		if(!uploadPhotoSufix.contains(suffix.toLowerCase())){
        
    			return ResponseVo.errorByMsg(CodeMsg.UPLOAD_PHOTO_SUFFIX_ERROR);
    		}
    		//photo.getSize()单位是B
    		if(photo.getSize()/1024 > uploadPhotoMaxSize){
        
    			CodeMsg codeMsg = CodeMsg.UPLOAD_PHOTO_ERROR;
    			codeMsg.setMsg("图片大小不能超过" + (uploadPhotoMaxSize/1024) + "M");
    			return ResponseVo.errorByMsg(codeMsg);
    		}
    		//准备保存文件
    		File filePath = new File(uploadPhotoPath);
    		if(!filePath.exists()){
        
    			//若不存在文件夹，则创建一个文件夹
    			filePath.mkdir();
    		}
    		filePath = new File(uploadPhotoPath + "/" + StringUtil.getFormatterDate(new Date(), "yyyyMMdd"));
    		//判断当天日期的文件夹是否存在，若不存在，则创建
    		if(!filePath.exists()){
        
    			//若不存在文件夹，则创建一个文件夹
    			filePath.mkdir();
    		}
    		String filename = StringUtil.getFormatterDate(new Date(), "yyyyMMdd") + "/" + System.currentTimeMillis() + suffix;
    		try {
        
    			photo.transferTo(new File(uploadPhotoPath+"/"+filename));   //把文件上传
    		} catch (IllegalStateException e) {
        
    			e.printStackTrace();
    		} catch (IOException e) {
        
    			e.printStackTrace();
    		}
    		log.info("图片上传成功，保存位置：" + uploadPhotoPath +filename);
    		return ResponseVo.success(filename);
    		
    	}

--------------------

**SpringBoot + Vue项目下的图片上传：**  
因为前后端分离，我们只需在前端代码Axios请求中做相应的修改，其他代码和SpringBoot保持一致：

upload(){
       let _this = this;
        if($("#photo-file").val() === '')return;
        let config = {
            headers:{'Content-Type':'multipart/form-data'}
        };
        let formData = new FormData();
        formData.append('photo',document.getElementById('photo-file').files[0]);
        // 普通上传
         _this.$ajax.post(process.env.VUE_APP_SERVER + "/photo/upload_photo", formData, config).then((response)=>{
             let resp = response.data;
             if(resp.code === 0){
                 $("#photo-view").attr('src', process.env.VUE_APP_SERVER + '/photo/view?filename=' + resp.data);
                 _this.form.headPic = resp.data;
                 _this.$message.success(resp.msg);
             }else{
                 _this.$message.error(resp.msg);
             }
             $("#photo-file").val("");
         });
    }

查看图片方式采用Vue中的filter来实现：

filters:{
    	filterPhoto(img){
             return process.env.VUE_APP_SERVER + "/photo/view?filename=" + img;
         }
     }

完结！

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/4670313988944b04b7101cf5ec0b60fc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/08a3b1bc963b4d12987778565796dba8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16