element ui push Upload组件批量上传文件

multiple 属性 是支持多文件  :action="uploadFileConfigure.url"上传的地址

  <el-dialog v-model="visible" title="电子保单上传" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="box_con">
        <el-upload multiple class="upload-demo" :action="uploadFileConfigure.url" :on-remove="removeChange" :on-success="successChange" :on-change="handleChange" drag show-file-list>
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖到此次处或，<em>点击上传</em></div>
          <template #tip>
                <!-- this.uploadFileConfigure.url = `${app.api}/oss/file/upload?access_token=${getToken()}`; -->
            <div class="el-upload__tip"><el-button type="primary" @click="addGuarantee()">电子保单上传</el-button></div>
          </template>
        </el-upload>
      </div>
    </el-dialog>

 const successChange = (file:any,fileList:any) => {
      const resUrl = file.data.url
      const url = fileList.name
      const fileName = url.substring(0,url.lastIndexOf("."))
      
      state.fileList.push({vin: fileName, url: resUrl, uid: fileList.uid});
      // console.log(state.fileList);
      
    }

    const removeChange = (file:any, files: any) => {
      state.fileList.splice(state.fileList.findIndex((v:any) => v.uid == file.uid),1)
    }
    const handleChange = () => {
    };

    const addGuarantee = () => {
      state.visible = true;
      
      console.log(state.fileList);
      
      let params = {
        data:state.fileList,
        purchasePlanId: route.query.id,
        type:"WARRANTY_UPDATE_CONFIG",
      };
      baseService.post("/sys/backpurchasecarinfo/updateTableFileByDataList", params).then((res) => {
        if(res.code !== 0){
          return ElMessage.error(res.msg);
        }
        state.visible = false;
        ElMessage.success("上传成功");
      })
    };
    const searchList = () => {
      baseService.get("/sys/basecar/page", state.dataForm).then((res) => {
        if (res.code !== 0) {
          return ElMessage.error(res.msg);
        }
        state.dataList = res.data.list;
        state.total = res.data.total;
      });
    };

最后

以上就是朴素柚子为你收集整理的element ui push Upload组件批量上传文件的全部内容，希望文章能够帮你解决element ui push Upload组件批量上传文件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。