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

最新推荐文章于 2024-08-29 07:30:44 发布

小码蚁啊

最新推荐文章于 2024-08-29 07:30:44 发布

阅读量2.6w

点赞数 20

分类专栏： Java

本文链接：https://blog.csdn.net/qq_36802726/article/details/89853505

版权

Java 专栏收录该内容

62 篇文章 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();
    }