elementui 上传图片转base64

ゞ浴缸里的玫瑰 2023-02-23 05:05 22阅读 0赞

## elementui 上传图片转base64 ##

做项目的时候，遇到需要上传图片的需求，虽然已经做好了，但是想想PC端有时候也会遇到（这次是移动端的），所以就想到了用elementui搞一下，但是遇到了一个问题，后台接收图片的是base64的，所以这里需要把图片转成base64再上传，

1、使用elementui组件的时候，需要再on-change绑定一个方法来接收图片信息，auto-upload（是否立即上传图片）需要设置成false，例子中用的是手动上传

<el-upload
          class="upload-demo"
          ref="upload"
          action=""
          accept=".jpg,.jpeg,.png,.JPG,.JPEG"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false"
          :http-request="handleHttpRequest"
          :before-upload="beforeUpload"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
          :on-change="getFile">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

2、on-change文件状态改变时，就会调用 getFile（file, fileList） 方法，参数file下会有一个raw属性，file.raw对应的就是文件的内容

getFile(file, fileList) { 
            console.log(file);
            this.getBase64(file.raw).then(res => { 
              console.log(res)
            });
          }

3、因为图片转base64需要 FileReader 这个API，但是这个API貌似不能return，所以就用 promise 封装了一下，也有另外一种方法，再data定义一个变量去接收转换成的base64，上代码

getFile(file, fileList) { 
            console.log(file);
            this.getBase64(file.raw).then(res => { 
              console.log(res)
            });
          },
          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);
              };
            });
          }