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

前端vue

 按钮

          <el-button
            v-model="form.importsysRemark"
            type="warning"
            plain
            icon="el-icon-upload2"
            size="mini"
            @click="handleImport"
            v-hasPermi="['daq:filesub:importUrl']"
          >点击添加说明</el-button>

 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: '',
    }
}    

 弹出框

<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".png, .jpg, .jpeg"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
          </div>
          <span>仅允许导入.png、.jpg、.jpeg格式的图片。</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

 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

<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;
}
</style>

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

 /**
     * @Author: YangZhiSen
     * @Date: 2021/12/14 9:58
     * @text: 文件上传到服务器
     */
    @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;
    }