簡(jiǎn)介

element-ui 的 Upload 定義的上傳在不滿足需求的時(shí)候，需要我們手動(dòng)進(jìn)行上傳操作，但是文檔里面只有自定義上傳的屬性，卻沒有自定義上傳時(shí)，loading 的展示方法；這里先實(shí)現(xiàn)自定義上傳顯示原生 loading

模板標(biāo)簽

                <el-upload drag :http-request="uploadFile">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    將文件拖到此處，或
                    <em>點(diǎn)擊上傳</em>
                  </div>
                </el-upload>

方法實(shí)現(xiàn)

    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 這個(gè)方法可以獲取文件上傳進(jìn)度
                  // 重點(diǎn)一：percent 就是處理后的上傳進(jìn)度數(shù)值1-100
                  onUploadProgress: progressEvent => {
                    const percent = parseInt(
                      ((progressEvent.loaded / progressEvent.total) * 100) | 0,
                      10
                    );
                    // 重點(diǎn)二：onProgress()方法需要以上方接收的形參來調(diào)用
                    // 這個(gè)方法有一個(gè)參數(shù)"percent"，給他進(jìn)度值 percent 即可
                    param.onProgress({ percent });
                  },
                  transformRequest: (data) => {
                    return data;
                  },
                })
                .then((res) => {
                  self.makeImg(null);
                  console.log(res);
                })
                .catch((err) => {
                  this.$message.error("上傳文件失?。? + JSON.stringify(res));
                });
    },