【避坑指“难”】ant-design-vue中Upload上传组件使用customRequest:httpRequest后进度条消失

319 阅读1分钟
 <a-upload
                  style="margin-left: 10px;"
                  name="file"
                  :multiple="true"
                  action="#"
                  :customRequest="httpRequest"
                  :beforeUpload="beforeUpload"
                  :remove="remove"
                  :file-list="fileList"
                  v-decorator="[
                    'file',
                    { rules: [{ required: true, message: '请上传相关材料' }] }
                  ]"
                  placeholder="请上传相关材料"
                  @change="handleChange"
                >
<a-button> <a-icon type="upload" />上传材料</a-button>

重写进度条

httpRequest(options) {
      let fileList = options.file;
      let progress = { percent: 1 };
      let speed = 100 / (options.file.size / 65000);
      const intervalId = setInterval(() => {
        if (progress.percent < 100) {
          progress.percent += speed;
          options.onProgress(progress);
        } else {
          clearInterval(intervalId);
        }
      }, 100);
      console.log("request", fileList);
    },