在这里要注意一下，因为 readAsDataURL 操作是异步的，我们如何将存在数组中的若干的 file对象，进行编码，并且按照上传的顺序，把编码后端图片base64字符串储存在一个新数组内呢，首先想到的是promise的链式调用，可是不能并发进行转码，有点浪费时间。我们可以通过循环 async 函数进行并发，并且排列顺序。请看 methods 的 submitData 方法
utils.js
export function uploadImgToBase64 (file) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = function () { // 图片转base64完成后返回reader对象 resolve(reader) } reader.onerror = reject }) }
添加商品页面 部分代码
<template> <div> <el-upload ref="imgBroadcastUpload" :auto-upload="false" multiple :file-list="diaLogForm.imgBroadcastList" list-type="picture-card" :on-change="imgBroadcastChange" :on-remove="imgBroadcastRemove" accept="image/jpg,image/png,image/jpeg" action=""> <i></i> <div slot="tip">只能上传jpg/png文件，且不超过2M</div> </el-upload> <el-button>submitData</el-button> </div> </template> <script> import { uploadImgToBase64 } from '@/utils' // 导入本地图片转base64的方法 export default { name: 'imgUpload', data () { return { diaLogForm: { goodsName:'', // 商品名称字段 imgBroadcastList:[], // 储存选中的图片列表 imgsStr:'' // 后端需要的多张图base64字符串 , 分割 } } }, methods: { // 图片选择后 保存在 diaLogForm.imgBroadcastList 对象中 imgBroadcastChange (file, fileList) { const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB if (!isLt2M) { this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid) this.$message.error('图片选择失败，每张图片大小不能超过 2MB,请重新选择!') } else { this.diaLogForm.imgBroadcastList.push(file) } }, // 有图片移除后 触发 imgBroadcastRemove (file, fileList) { this.diaLogForm.imgBroadcastList = fileList }, // 提交弹窗数据 async submitDialogData () { const imgBroadcastListBase64 = [] console.log('图片转base64开始...') // 并发 转码轮播图片list => base64 const filePromises = this.diaLogForm.imgBroadcastList.map(async file => { const response = await uploadImgToBase64(file.raw) return response.result.replace(/.*;base64,/, '') // 去掉data:image/jpeg;base64, }) // 按次序输出 base64图片 for (const textPromise of filePromises) { imgBroadcastListBase64.push(await textPromise) } console.log('图片转base64结束..., ', imgBroadcastListBase64) this.diaLogForm.imgsStr = imgBroadcastListBase64.join() console.log(this.diaLogForm) const res = await addCommodity(this.diaLogForm) // 发请求提交表单 if (res.status) { this.$message.success('添加商品成功') // 一般提交成功后后端会处理，在需要展示商品地方会返回一个图片路径 } }, } } </script>
这样本地图片上传的时候转base64上传就完成了。可是轮播图有可以进行编辑，我们该如何处理呢？一般来说商品增加页面和修改页面可以公用一个组件，那么我们继续在这个页面上修改。
编辑时我们首先会拉取商品原有数据，进行展示，在进行修改，这时候服务器返回的图片是一个路径 这样，当我们新增一张图片的还是和上面的方法一样转码即可。可是后端说，没有修改的图片也要赚base64转过来，好吧那就做把。这是一个在线链接 图片，不是本地图片，怎么做呢？
2. 在线图片转base64
具体步骤
utils.js 文件添加在线图片转base64的方法，利用canvas
编辑商品，先拉取原来的商品信息展示到页面
提交表单之前，区分在线图片还是本地图片进行转码
utils.js
export function uploadImgToBase64 (file) { return new Promise((resolve, reject) => { function getBase64Image (img) { const canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, canvas.width, canvas.height) var dataURL = canvas.toDataURL() return dataURL } const image = new Image() image.crossOrigin = '*' // 允许跨域图片 image.src = img + '?v=' + Math.random() // 清除图片缓存 console.log(img) image.onload = function () { resolve(getBase64Image(image)) } image.onerror = reject }) }
添加商品页面 部分代码