0


el-upload前端实现多文件上传

template中:

    <el-upload
            class="upload-demo"
            ref="fileUpload1"
            :file-list="fileList1"
            action=""
            :on-exceed="handleExceed1"
            :http-request="httpRequest1"
            :on-remove="handleRemove1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>

script中:

data:

formdata1: new FormData(), //创建FormData1对象

methods:

 methods: {
    handleExceed1(file, fileList) {
      //上传的过程中触发的函数
    },
    httpRequest1(file) {
      //上传完毕触发的函数
      this.formdata1.append("new_files", file.file);
    },
    handleRemove1(file, fileList) {
      /**
       * 检测删除的file是否是新加入的file文件 如果不是,删除就给与md5的值
       */
      if ((file.raw != undefined && file.raw instanceof File) == false) {
        this.deleteFiles1 += file.md5 + ",";
      }
    },  
  },

提交的时候:

 this.formdata1 = new FormData(); //创建FormData对象
        this.formdata1.append("fault_no", this.$route.query.fault_no);
        this.formdata1.append("progress", "1");
        this.formdata1.append("step", n);
        this.formdata1.append("files_to_delete", this.deleteFiles1);//删除的文件的id值
        this.$refs.fileUpload1.submit();//用来提交文件上传的file格式文件组
        updateFaultFile(this.formdata1).then((res) => {
          if (res.resCode === 20000) {
            this.$message.success("更新成功");
          } else {
            this.$message.error("更新失败");
          }
        });

如果仅仅是单文件上传的话:直接在提交的时候传入

this.formdata1.append("new_files", this.fileList[0]);

就可以了


本文转载自: https://blog.csdn.net/u010822903/article/details/134412878
版权归原作者 Sample_浅浅未央 所有, 如有侵权,请联系我们删除。

“el-upload前端实现多文件上传”的评论:

还没有评论