vue+element以base64的方式上传文件

最近在做一个element的upload以base64的方式实现文件上传，就需要前端处理上传文件的file文件流。接下来记录处理过程，仅供参考！

1.使用element的upload组件，选择你需要的组件就行

           <!-- 上传照片 -->
           <div class="uploadPhotoBox">
              <el-upload
                style="height:126px;width:90px;display:inline-block;"
                class="avatar-uploader"
                action=''
                :on-change="getFile"
                :auto-upload="false"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <img v-else src="../../assets/head.png" style="height:126px;width:90px;"/>
                <div class="changePhotoStyle">{{imageUrlText}}</div>
              </el-upload>
            </div>

2.method里面处理file生成base64格式，就是getBase64这个函数（FileReader需要使用promise封装才能使用）

  getBase64(file) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
          imgResult = reader.result;
        };
        reader.onerror = function(error) {
          reject(error);
        };
        reader.onloadend = function() {
          resolve(imgResult);
        };
      });
    },

3.通过on-change方式获取到file的文件信息，然后调用this.getBase64转换成base64的方式。

  getFile(file) {
      // if(file.success){
      console.log(file)
      const isJPG = file.raw.type === 'image/jpeg';
      const isPNG = file.raw.type === 'image/png';
      const isLt5M = file.raw.size / 1024 / 1024 < 5;
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是JPG或者PNG格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      if((isJPG || isPNG) && isLt5M){
        this.getBase64(file.raw).then(res => {
          console.log(res)
          //这里拿到base64的文件流，处理你自己的业务逻辑
        });
      }
      
    },

以上代码亲测有效，可直接复制到项目中查看console.log打印出来效果，亲自动手试试，纸上得来终觉浅，绝知此事要躬行！