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

vue + element 文件上传 并将文件转 base64

vue + element 文件上传并将文件转 base64