在Vue中如何实现上传图片并转Base64格式

在Vue中如何实现上传图片并转Base64格式

一、需求

项目中提出一个需求。前端在实现表单上传图片时，需要将base64图片直接保存在表单中再进行提交。

二、实现

组件使用element ui中的<el-upload/>,通过更改组件的内置属性来实现将图片File文件转Base64的功能，再通过表单进行提交。

1. 更改<el-upload/>的配置，将auto-upload属性的值指定为false，同时调用on-change

Attribute	说明	类型	默认值
auto-upload	是否在选取文件后立即进行上传	boolean	true
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)	—

<template #fileForm>
  <el-upload
    list-type="picture"
    action=""
    accept=".jpg, .png"
    :limit="1"
    :auto-upload="false"
    :file-list="fileList"
    :on-change="changeFile"
  >
    <el-button size="small" type="primary">上传图片</el-button>
    <div slot="tip" class="el-upload__tip">只能上传一张.jpg/.png文件</div>
  </el-upload>
</template>

注： 其他属性可参照官网按实际需求进行配置

2. 通过调用javascript 内置方法 new FileReader 来操作File文件

// 图片转Base64
getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    let imgBase64 = '';
    reader.readAsDataURL(file);
    reader.onload = () => {
      imgBase64 = reader.result;
    };
    reader.onerror = error => reject(error);
    reader.onloadend = () => resolve(imgBase64);
  });
}

3. 编写文件状态改变时的钩子，将获取到的值赋值给表单

// 文件状态改变时的钩子
changeFile(file, fileList) {
  this.infoForm.file = []; // 表单绑定值
  fileList.forEach(async item => {
    const img = await this.getBase64(item.raw);
    this.infoForm.file.push(img);
  });
  console.log(this.infoForm.file);
}

三、结果

通过在changeFile()调用console.log(this.infoForm.file)就可以看到base64图片数组，最后将表单进行提交即可。