526互联

elementui el-upload实现不自动上传，将上传内容放在formData里面，传递给后端

发布时间 2023-11-16 10:38:30作者: 遇你温柔如初
　//这种情况一般是要弹出一个弹框进行上传操作


　　　　　　　　　<el-upload
                  ref="upload"
                  action=""
                  name="fileList"
                  :show-file-list="false"
                  :auto-upload="false"
                  :multiple="true"
                  :headers="header"
                  :on-change="onSuccess"
                  :on-error="onError"
                >
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                </el-upload>
methods:{
    onSuccess(response) {
        this.filesList.push(response);
    },

　　onError(err) {
      var errData = JSON.parse(err.message);
      this.$notify({
        title: "警告",
        message: errData.message,
        type: "warning",
      });
    },

　　// 弹框确定按钮
    handlerOk(){
        let formData = new FormData();
　　　　
        formData.append('newAgent', this.addParams.newAgent);
        formData.append('hostsList', this.addParams.hostsList);
         //将上传列表循环添加到表单里面
        this.filesList.forEach(ele=>{
            formData.append('filesList', ele.raw);
        })


        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$axios
        .post("/api/...........", formData)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("操作成功");
            loading.close();
     
          }
        });
    },    

}