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

最新推荐文章于 2024-10-09 16:32:45 发布

x_minqu

最新推荐文章于 2024-10-09 16:32:45 发布

阅读量753

点赞数

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/m0_46483779/article/details/127443127

版权

这篇博客详细介绍了如何使用Vue.js创建一个支持多文件上传的组件，包括上传地址配置、文件移除和上传成功的回调处理。示例代码展示了`el-upload`组件的用法，以及如何处理文件列表和调用后台接口进行文件上传。同时，还提供了上传成功后的回调函数和关闭对话框的逻辑。

摘要由CSDN通过智能技术生成

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;
      });
    };