Element: upload组件的http:request怎么获取进度值

[houwh]

upload组件的http:request怎么获取进度值

[element-bot]

Hello, this issue has been closed because it does not conform to our issue requirements. Please submit issues with issue-generator. More info can be found in #3693.

[7NZ]

在网上搜没找到答案，到官方issues找，没有看到http-request的回答，我在别处看到的，忘记是哪了，这里说一下
2.4.11版本el-upload组件里面写了http-request的说明覆盖默认的上传行为，可以自定义上传的实现
但是可选值和默认值没有写，也没找到示例。在搜别的问题时发现它的用法，使用的时候传入一个参数，控制台打印，如下

里面有文件对象file，onSuccess，onProgress，onError等，onProgress需要传入一个值，是进度的事件
贴下代码, uploadRequest就是自定义上传的方法，传入了一个参数，具体看下面代码中参数的用法（重点关注uploadRequest 和参数option）

<el-upload
      class="fileupload-drap"
      drag
      ref="fileUpload"
      :auto-upload="false"
      :action="el_upload_action"
      :data="uploadData"
      :on-success="uploadSuccess"
      :on-error="uploadErr"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :http-request="uploadRequest"
      :on-exceed="handleExceed"
      :limit="1"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">选择文件之后点击确定上传，一次只可以上传一个文件</div>
</el-upload>

const OSS = require('ali-oss');

let client = new OSS({
  region: '<Your region>',
  accessKeyId: '<Your AccessKeyId>',
  accessKeySecret: '<Your AccessKeySecret>',
  bucket: 'Your bucket name'
});
export default {
  data(){
    return {
      dialogVisible: false,
      parentId: '',
      fileType: 1,
      uploadData: {},
      el_upload_action: 'customeurl',
    }
  },
  methods: {
    submitUpload(){
      this.$refs.fileUpload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    uploadSuccess(response, file, fileList){
      // console.log('success', response, file, fileList);
      this.$refs.fileUpload.clearFiles(); // 清空文件列表
    },
    uploadErr(err, file, fileList){
      console.log('err', err, file, fileList);
      // this.$refs.fileUpload.clearFiles(); // 清空文件列表
    },
    uploadRequest(option){
      const self = this;
      let file = option.file;
      let type = file.type;
      let size = file.size;
      let pos = file.name.lastIndexOf('.');
      let filename = file.name.substring(0, pos);
      let extendName = file.name.substring(pos + 1);
      console.log(option);

      // let timetamp = new Date().getTime();
      // let storeAs = 'upload/' + timetamp +'.'+ extendName;
      let storeAs = 'upload/' + file.name;
      //storeAs表示上传的object name , file表示上传的文件
     // 这里client是aliyun oss的上传api
      client.multipartUpload(storeAs, file, {
        progress: function (p, checkpoint) {
          option.onProgress({percent: Math.floor(p * 100)}); // 触发el-upload组件的onProgress方法
        },
        // mime: type,
      }).then(function (result) {
        console.log(result);
        if (result.res.status === 200) {
          // 上传之后的文件地址
          let uploadedUrl = result.res.requestUrls[0];
          if(size >= 100*1024){
            uploadedUrl = results.res.requestUrls[0].split("?")[0];
          }else{
            uploadedUrl = result.res.requestUrls[0];
          }
          option.onSuccess(result); // 触发el-upload组件的onSuccess方法
        }
      }).catch(function (err) {
        console.log(err);
        // option.onError('上传失败'); // 触发el-upload组件的onError方法，此方法会移除文件列表
        self.$message({
          message: '上传失败，请重试',
          type: 'warning'
        });
      });
    }
  }
}

[zoexx]

楼上讲的很详细了 精髓就在一句：
👉👉👉onProgress({percent: 99 })

[RunningTree]

client.multipartUpload(storeAs, file, {
onUploadProgress: function(event) {
params.onProgress({percent: event.loaded/event.total*100},params.file)
}
}).then(function (result) {})