本文共 4198 字，大约阅读时间需要 13 分钟。

前端页面：

         
            
     
添加图文
        
               
              
             
               
              
             
               
                
      
        //表单数据            
       
        选择文件
                 
              
           
          
    
        
     
      确 定
             
     
      取 消
           
    
    
   

js:

submitImg (forName) {        let self = this        this.$confirm('此操作将无法撤回, 是否继续?', '提示', {          confirmButtonText: '确定',          cancelButtonText: '取消',          type: 'warning'        }).then(() => {          self.$refs[forName].validate((valid) => {            if (valid) {              self.$refs.upload.submit()              self.dialogVisible = false              self.loading2 = false            } else {              return false            }          })        }).catch(() => {          this.$message({            type: 'info',            message: '已取消更新'          })        })      },      handleAvatarSuccess (response, file) {        let self = this        let resp = response        console.log(response)        if (resp.result === 200) {          setTimeout(() => {            self.dialogVisible = false//关闭弹窗                 self.$refs.upload.clearFiles()            self.$message.success(resp.msg)//显示后台信息            self.getImgData()//上传后刷新表单          }, 1000)        } else {          self.$message.error(resp.msg)//显示后台信息          self.$refs.upload.clearFiles()//清空表单        }      },      materialPictureAndText () {        return Config.context + '/pictureManage/materialPicture' //前面是为了方便线上加的      },      beforeUpload2 (file) {        const isLt2M = file.size < 1024 * 1024 * 2        // console.log('大小' + isLt2M)        if (!isLt2M) {          this.$message.error('上传文件大小不能超过 2MB!')        }        let size = file.size / 1024        console.log('大小' + size)        let _URL = window.URL || window.webkitURL        let img = new Image()        img.onload = function () {          let width = img.width          let height = img.height          console.log('width--->' + width)          console.log('height--->' + height)        }        img.src = _URL.createObjectURL(file)        return isLt2M      },

后台控制层：

@PostMapping(value = "materialPicture", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)    public Map
   
     materialPictureAndText(HttpServletRequest request,                                                      @RequestParam(value = "imgTitle", required = false) String imgTitle,                                                      @RequestParam(value = "file", required = false) MultipartFile file) {        if (file.isEmpty()) {            HashMap
    
      resultMap = new HashMap<>();            resultMap.put("msg", "请上传图片");            return resultMap;        } else {            String fileName = file.getOriginalFilename();  // 文件名            String suffixName = fileName.substring(fileName.lastIndexOf("."));            String filePath = path;//这个path就是你要存在服务器上的            fileName = UUID.randomUUID() + suffixName; // 新文件名            File dest = new File(filePath + fileName);            if (!dest.getParentFile().exists()) {                dest.getParentFile().mkdirs();            }            try {                file.transferTo(dest);            } catch (IOException e) {                e.printStackTrace();            }            Picture materialPicture = new Picture();            materialPicture.setImgTitle(imgTitle);            String filename = apiUrl + fileName;            materialPicture.setPicture_url(filename);            return pictureService.imgUpload(materialPicture);//这里就是上传图片返回的信息，成功失败异常等，前端根据字段接收就是了        }    }
    
   

关于图片的显示，我是用了tomcat服务器，应该用其他也一样的，在代码里配置映射路径

先在配置文件中：

在写一个配置文件配置映射路径，然后在tomcat下面跑即可：

@Configurationpublic class MyWebAppConfigurer implements WebMvcConfigurer {    @Value("${file.staticAccessPath}")    private String staticAccessPath;    @Value("${file.uploadFolder}")    private String uploadFolder;    @Override    public void addResourceHandlers(ResourceHandlerRegistry registry) {        registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" + uploadFolder);        WebMvcConfigurer.super.addResourceHandlers(registry);    }}

转载地址：http://xawrn.baihongyu.com/