vue+element ui 点击按钮手动上传带额外参数

最新推荐文章于 2024-02-27 19:49:05 发布

暴富的im

最新推荐文章于 2024-02-27 19:49:05 发布

阅读量758

点赞数

分类专栏：前端文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/qq_59626859/article/details/132236282

版权

前端专栏收录该内容

65 篇文章 0 订阅

订阅专栏

<el-upload
 class="upload-demo"
  name="multipartFile"   接口需要的文件名叫什么就叫什么
  :headers="myHeaders"
  :data="uploadData"     额外的参数
   action  如果是自动这里就写接口地址
  :on-remove="handleFileRemove"
  :http-request="httpRequest"  手动改成这个
  :on-exceed="handleFileOneExceed"
  multiple
  :limit="1"
  :file-list="fileList"
  ref="addUpload"    清空后的时候
   >
     <el-button size="small" type="primary">点击上传</el-button>
   </el-upload>

 uploadData: {
                fileType: '01', //支付凭据
                procNo: ''
            },

 //上传成功
        httpRequest(params) { 这可以获取到额外的数据和文件
            this.fileObj.multipartFile = params.file;
            this.fileObj.fileType = params.data.fileType;
            this.fileObj.procNo = params.data.procNo;
        },
        //上传移除
        handleFileRemove(file, fileList) {
            this.uploadFileList.splice(this.uploadFileList.findIndex((item) => item === file.response.body));
        },

        //禁止上传多个
        handleFileOneExceed(files, fileList) {
            this.$message.warning('禁止上传多个文件');
        },
        closeDialog() {
            this.$refs.addUpload.clearFiles();
            this.showPayFrom = false;
        },
        //提交
        sureCommit() {
            this.uploadLoading = true;
            const form = new FormData();
            form.append('multipartFile', this.fileObj.multipartFile);
            form.append('fileType', this.fileObj.fileType);
            form.append('procNo', this.fileObj.procNo);
            businessUpload(form)
                .then((res) => {
                    this.uploadLoading = false;
                    if (res.code == 200) {
                        this.$message.success('上传成功');
                        this.closeDialog();
                        this._getList();
                    }
                })
                .catch((err) => {
                    this.uploadLoading = false;
                    this.$message.error(err.message);
                });
        },