vue中使用base64编码上传文件或者图片,以及base64编码的图片在img标签中使用

    在我们开发的过程中,总会遇到上传的问题,如果不使用文件服务器的话,那么就需要我们对文件进行编码,然后发送给后台. 当然,后台也会给我们传送base64编码的文件或者是图片.最近的项目中就用到了base64编码,也是第一次写, 做为经验分享给你们. 那下面我们就来说一下base64编码在vue项目中的使用吧

     html代码,此处用的是element-ui中的上传组件:

   

           <el-upload
              class="upload-demo"
              ref="upload"
              action="#"
              :http-request="httpRequest"
              :on-change='changeData'
              :on-progress="handleProgress"
              :on-success="handleSuccess"
              >
               <el-button type="primary" size='small'>已阅读并上传</el-button>
             
            </el-upload>

接着是base64的编码方法:

 // 覆盖默认的上传行为，可以自定义上传的实现
          httpRequest(data){　　
              // 转base64
              this.getBase64(data.file).then(resBase64 => {
              this.fileBase64 = resBase64.split(',')[1]　　//直接拿到base64信息
              // console.log(this.fileBase64)
              })
              var that = this
             setTimeout(function(){
                that.uploadPercent = 100
             },2000)
          },

          // 转base64编码
          getBase64(file){
            this.dialogVisible = false
            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);
              };
            });
          },

  upload上传组件中:http-request,通过覆盖默认的上传行为，可以自定义上传的实现. 从而实现我们的base64编码的使用

 

  下面再来说说我们拿到base64编码的图片怎么显示到我们的浏览器中,也就是应用到我们的img标签中:

   

<img src='data:image/jpeg;base64,你的base64编码' />

 

  以上就是全部内容啦,欢迎指正,探讨