vue+elementui+springmvc实现图片上传功能

版权声明： https://blog.csdn.net/chenacxz/article/details/82989986

<el-row>
          <el-col>
            <el-form-item label="头像:">
              <el-upload class="avatar-uploader"
                         action="http://localhost:8080/linkjb/upload/imageupload"//后台接口名
                         :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="url" :src="url" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

export default {
    data(){
        return{
            url:''
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
        debugger
        if(res.entity){
          // let url=res.entity.replace(/\\/g,"/");
          //console.log(url);
          this.url = "http://localhost:8080/linkjb/images/"+res.entity;
          console.log(this.url);
        }else{
          this.$message.error('上传错误,请联系管理员');
        }

      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        }
      },
    }
}

@RequestMapping(value = "/imageupload")
    public BaseResult<String> UploadImage (HttpServletRequest request, @RequestParam(value = "file", required = false) MultipartFile file) throws IOException {
        System.out.println(file);
        BaseResult<String> re =new BaseResult<>();
        //获取项目根路径
        String relativelyPath=System.getProperty("user.dir")+File.separator+"src"+File.separator+"main"+File.separator+"webapp";
        //获取项目存放路径
        String staticPath = File.separator+"static"+File.separator+"images"+File.separator+"user"+File.separator;
        String path  = relativelyPath + staticPath;
        if(!file.isEmpty()){
                String fileRealName = file.getOriginalFilename(); //获得原始文件名;
                int pointIndex = fileRealName.indexOf(".");  //点号的位置
                String fileSuffix = fileRealName.substring(pointIndex);  //截取文件后缀
                String pic_time = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
                Random random = new Random();
                String savedFileName = pic_time.concat(fileSuffix)+random.nextInt(10000);
                String savedDir = request.getSession().getServletContext().getRealPath("images"); //获取服务器指定文件存取路径
                File savedFile = new File(savedDir,savedFileName );
                boolean isCreateSuccess = savedFile.createNewFile();
                if(isCreateSuccess){
                    file.transferTo(savedFile);  //转存文件
                    re.setMessage("文件存储成功");
                    re.setStatus(ConstantSrting.STATUS_SUCCESS);
                    re.setEntity(savedFileName);
                    return re;
                }else{
                    re.setStatus(ConstantSrting.STATUS_FAIL);
                    re.setMessage("图片存储失败");
                    return re;
                }
            }else{
                re.setStatus(ConstantSrting.STATUS_FAIL);
                re.setMessage("文件不能为空");
                return  re;
            }
    }