ANTD文件上传

ANTD文件上传

文件先上传到一个中间的文件服务器上，然后返回一个http的文件地址，存储时再调用相应后端接口进行文件地址的保存

<a-upload
  name="upload_file"
  :multiple="true"
  :openFileDialogOnClick="true"
  :file-list="fileList"
  :action="'/file/upload/v4'"
  :headers="headers"
  :showUploadList="false"
   @change="uploadChange"
 >
    <a-button  :disabled='uploadLoading'  @click="uploadById(Id)"> <a-icon type="upload" />上传		附件
    </a-button>
</a-upload>

action：路径需要根据自己需要进行配置

export default {
  data() {
    return {
      headers: {
        headers：{设置上传的请求头部},
        fileList:[],//用来绑定上传文件列表
        fileData:[],//作为中间件对上传的文件列表进行筛选
      },
    };
  },
  methods: {
    // 选择上传之后的操作
    uploadChange(info) {
      let that = this
      let { fileList } = info;
      const status = info.file.status;
      if (status !== "uploading") {
         // 上传中
        that.uploadLoading = this.$message.loading("文件上传中...")
      }
      if (status === "done") {
          // 上传完成后
        if(this.fileData.length<1){// 这里是上传单个文件，上传多个可把if判断取消
           // 选择自己需要保存的数据进行重组（可以输出一下info看哪些信息是自己需要的）
          this.fileData.push({
            id: info.file.response.data.rows[0].id,
            path: info.file.response.data.rows[0].url,
            name: info.file.response.data.rows[0].fileName,
            size: info.file.response.data.rows[0].fileSize,
          });
          // 用来保存到数据库
          that.$post({
            url: "/api/slaughter_product/common/myBaseFile/addFileList",
            data: {bid: this.uploadOrderNo, fileList: this.fileData}
          }).then(res=>{
            if(res.rel){
              this.$message.success('上传成功')
              setTimeout(that.uploadLoading,0)
              // 如果需要在上传后进行置空要在这里进行操作（主要表格列表里面会用到此操作）
              // this.fileList = []
              // this.fileData = []
            }
          })
        }else{
          this.$message.warning('请等待上个文件上传')
        }
        
      }else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`);
      }
      this.fileList = [...fileList]; //重点（因上传的fileList需要使用三次，因此需要此操作）
    },
  },
};