element-ui Upload 自定义上传 loading

简介

element-ui 的 Upload 定义的上传在不满足需求的时候，需要我们手动进行上传操作，但是文档里面只有自定义上传的属性，却没有自定义上传时，loading 的展示方法；这里先实现自定义上传显示原生 loading

模板标签

                <el-upload drag :http-request="uploadFile">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                  </div>
                </el-upload>

方法实现

    uploadFile(param) {
      // param.file 就是文件
      // formData 里面要塞什么，就直接塞
      const formData = new FormData()
      formData.append('file', param.file)
              axios.post('url', formData, {
                  headers: {
                    "Content-Type": "multipart/form-data; boundary={boundary}",
                  },
                  // onUploadProgress 这个方法可以获取文件上传进度
                  // 重点一：percent 就是处理后的上传进度数值1-100
                  onUploadProgress: progressEvent => {
                    const percent = parseInt(
                      ((progressEvent.loaded / progressEvent.total) * 100) | 0,
                      10
                    );
                    // 重点二：onProgress()方法需要以上方接收的形参来调用
                    // 这个方法有一个参数"percent"，给他进度值 percent 即可
                    param.onProgress({ percent });
                  },
                  transformRequest: (data) => {
                    return data;
                  },
                })
                .then((res) => {
                  self.makeImg(null);
                  console.log(res);
                })
                .catch((err) => {
                  this.$message.error("上传文件失败：" + JSON.stringify(res));
                });
    },