element-ui之upload上传与后台接收参数

刺骨的言语ヽ痛彻心扉 2022-02-05 12:04 1800阅读 0赞

页面：

<el-form-item label="附件上传" prop="fysjtDesc">
              <el-upload
                  class="upload-demo"
                  ref="upload"
                  action=""//上传接口
                  :data="getfileData()"//额外提交的参数
                  :file-list="fileList"//文件列表
                  :auto-upload="false">
                 <el-button slot="trigger" size="small" type="primary">选取附件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              </el-upload>
    </el-form-item>

js:

data() {
          return {
            fileData: {
                        fileId: '',
                        fileType: '',
                        fileDesc: '',
                        filePath: '',
                    },
        },
        methods: {
           getfileData() {
              return vm.fileData
           },
          submitUpload() {
            this.$refs.upload.submit();
          },
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePreview(file) {
            console.log(file);
          }
        }

后端：

@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
        public Result uploadFile(@RequestParam Map<String,String> map,@RequestParam("file") MultipartFile[] file){
            if(map.size() >0){
                try{
                    String  fileId = map.get("fileId").toString();
                    String  fileType = map.get("fileType").toString();
                    String  fileDesc = map.get("fileDesc").toString();
                    String  filePath = map.get("filePath").toString();
                    baseAppfileService.uploadFiles(file,filePath,fileId,fileType,fileDesc);
                }catch (Exception e){
                    return new Result().error();
                }
                return new Result();
            }
            return new Result().error();
        }