Springboot+vue前后端分离(所有项目通用)-实现图片上传

前情说明:本代码暂时只供本人实用，可以实现效果，如大家有觉得需要改进或者可以用到的地方，可以随时给我建议和意见 谢谢

前端vue

 按钮

          点击添加说明

 method

    
    handleimport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },

 data

data(){
    return{
        upload: {
            // 是否显示弹出层（用户导入）
            open: false,
            // 弹出层标题（用户导入）
            title: "",
            // 是否禁用上传
            isUploading: false,
            // 是否更新已经存在的用户数据
            updateSupport: 0,
            // 设置上传的请求头部
            headers: { Authorization: "Bearer " + getToken() },
            // 上传的地址
            url: process.env.VUE_APP_base_API + "/daq/filesub/importUrl"
          },
          imageUrl: '',
    }
}    

 弹出框

      
        
        
        将文件拖到此处，或点击上传
        
          
             是否更新已经存在的用户数据
          
          仅允许导入.png、.jpg、.jpeg格式的图片。
        
      
      
        确 定
        取 消
      
    

 method

    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    
    handleFileSuccess(response, file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl)
      this.upload.open = false;
      this.upload.isUploading = false;
      this.form.importsysRemark = this.imageUrl;
      this.$refs.upload.clearFiles();
      this.getList();
    },
    
    submitFileForm() {
      this.$refs.upload.submit();
    }

data(){
    return{
      // 表单参数
      form: {
        id: null,
        importsysId: null,
        importsysName: null,
        importsysZid: null,
        importsysStage: null,
        importsysDutyBranch: null,
        importsysRelatedBranch: null,
        importsysInput: null,
        importsysOutput: null,
        importsysCreateTime: null,
        importsysUpdateTime: null,
        importsysRemark: null
      }
    }
}

 添加提交按钮

 
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateimportsys(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addimportsys(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.fileadd = false;
              this.getList();
            });
          }
        }
      });
    },

 style

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

后端springboot

 application

file:
  domain: http://localhost:${server.port}//
  enable: true
  path: D:picture
# Spring配置
spring:
  # 资源信息
  messages:
    # 国际化资源文件路径
    basename: i18n/messages
  profiles: 
    active: druid
  # 文件上传
  servlet:
     multipart:
       # 单个文件大小
       max-file-size:  10MB
       # 设置总上传的文件大小
       max-request-size:  100MB

 controller

 
    @ApiOperation("图片上传")
    @ResponseBody
    @PreAuthorize("@ss.hasPermi('daq:filesub:importUrl')")
    @PostMapping("/importUrl")
    public String importData(@RequestParam("file") MultipartFile file) throws Exception {
        String filename = UUID.randomUUID().toString()+file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
        File filepath = new File("D:\picture\pic\" + filename);
        String url = String.valueOf(filepath);
        file.transferTo(filepath);
        System.err.println("图片存储地址是"+url);
        return url;
    }