电子凭证文件上传

Posted 2021-10-22 李耀书

​

​ 最近，一直在做一些关于文件上传，以及凭证导出打印的工作，做一些记录，方便日后的查阅。
对了，我在这里用的是antDesign这个第三方组件

文件上传

• vue模板中

     <p>
        <a @click="uploadElect(item, item.key)">上传电子凭证</a>
     </p>
    <-->调用第三方相关的上传组件</-->
        <a-upload
          :fileList="fileListElect" // 上传的文件的集合
          :remove="handleRemoveElect" // 上传文件的删除
          :before-upload="beforeUploadElect" 
          @change="handleChangeElect" // change点击事件
        >
          <a-button> <a-icon type="upload" /> 上传 </a-button>
        </a-upload>
  

• 点击按钮后发送请求，同时对获取到的一些数据做了一些处理

      // 选择电子凭证文件
      handleChangeElect(info) {
        let fileList = [...info.fileList];
        fileList = fileList.slice(-1); // 控制每次只能上传一张图片
        this.fileListElect = fileList;
        this.queryUploadElect.file = this.fileListElect[0];
      },
     // 电子凭证删除
      handleRemoveElect(file) {
        const index = this.fileListElect.indexOf(file);
        const newFileList = this.fileListElect.slice();
        newFileList.splice(index, 1);
        this.fileListElect = newFileList;
      },
     // 确认上传电子凭证
     uploadElect() {
       /*
         FormData 对象的使用：
          1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与           value组装成一个queryString
          2. 异步上传二进制文件。
       */
      const formData = new FormData();
   formData.append("file",this.queryUploadElect.file.originFileObj);
        formData.append("id", this.queryUploadElect.id);
     /*uploadCertificate:封装的axios的请求。  */  
        uploadCertificate(formData, this.queryUploadElect.status)
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success(res.message);
              const target = this.dataSource.find(
                (item) => item.key === this.indexElectKey
              );
              this.imgElectObj = res.data;
              if (target) {
                const img = res.data.split(/;/)[0];
                this.imgElect.push(img);
                target.arrElect = this.imgElect;
                let name = [];
                for (var i = 0; i < target.arrElect.length; i++) {
                  let idx = target.arrElect[i].toString().lastIndexOf("/");
                  let str = target.arrElect[i] .toString()
                    .substring(idx + 1,        target.arrElect[i].toString().length);
                  name.push(str);
                }
                target.fileNames = name.join(";");
                target.filePath = target.arrElect.join(";");
                this.$store.commit("warrantyElect", img);
              }
            } else {
              this.$message.warning(res.message);
            }
          })
          );
  

  描述可能并不详尽，关于文件上传后的后续操作，还是要根据各位同学的项目需求以及后端返回文档做一些处理，对于取值方面可能会不同，但是在传输参数方面，还是要同后端同学进行协调，处理。