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('文件上傳成功');
      }