vue + element 文件上傳 並將文件轉 base64

當時有一個需求 是需要用到上傳文件這個功能，並且需要將文件轉為 base64 給到后台。網上找的全是啥圖片轉base64 肯定是因為這類需求比較常見。當時有點懵了。后面一想，都他娘是文件啊。然后就找到百度 Ctrl + C  -->  Ctrl +V

這里需要注意一點一定要做文件大小限定，如果文件太大轉成base64還他娘的更大了,要注意 要注意

再說一下哦，既然是需要轉 base64 那應該是不需要上傳到服務器，前端自己本地轉好 傳后台 。文檔中 說 action 為必填 解決方案如下

<el-upload
 class="avatar-uploader"
 action="#"
 :show-file-list="false"
 :http-request="httpRequest"
>
  <el-input v-model.trim="item.secretKeyFileName" readonly></el-input>
  <el-button type="primary" @click="getFile(index)">選取文件</el-button>
  <div slot="tip" class="el-upload__tip">文件上傳限制說明</div>
</el-upload>

action 參數 給它 #

咱自己定義一個 http-request   官網定義是：覆蓋默認的上傳行為，可以自定義上傳的實現 

現在擼轉 base 64 

主要是用到H5 方法中的 fileReader api。但是這個api不能return。那就promise一下吧

//這個file參數 也就是文件信息，你使用 插件 時 你就可以打印出文件信息 看看嘛
getBase64(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file);
　　　　　//開始轉
        reader.onload = function() {
          fileResult = reader.result;
        };
　　　　　//轉 失敗
        reader.onerror = function(error) {
          reject(error);
        };
　　　　　//轉 結束 咱就 resolve 出去
        reader.onloadend = function() {
          resolve(fileResult);
        };
      });
    }

這里 就說說 剛剛 我們自定義 的上傳

httpRequest(data){　　// 沒事兒就打印data看看唄
　　　　//這是限制上傳文件類型
      const isPFX = data.file.type === "application/x-pkcs12";
      const isLt2M = data.file.size / 1024 / 1024 < 2;

      if (!isPFX) {
        this.$message.error("上傳文件只能是 PFX 格式!");
      }else if (!isLt2M) {
        this.$message.error("上傳文件大小不能超過 2MB!");
      }else{
        // 轉base64
        this.getBase64(data.file).then(resBase64 => {
        this.fileBase64 = resBase64.split(',')[1]　　//直接拿到base64信息
        console.log(resBase64.split(',')[1])
        })
        this.$message.success('文件上傳成功');
      }