1.今天在开发过程中,遇到了使用vant上传组件,回显无法预览的问题,在搜索后,解决方法如下:
<van-uploader v-model="fileList"
accept='.jpg,.jpeg,.png'
:before-read="beforeRead"
:after-read="afterRead"
:max-size="10000 * 1024"
@oversize="onOversize"
:before-delete="beforeDel" />
fileNameList.split(',').forEach(v => {// 遍历后端返回的文件名
this.$http.secondParty.getImageByName({ fileName: v }).then(k => {
// 文件名请求到base64格式文件
// 图片base64转url
let img = 'data:image/jpeg;base64,' + k.data
let imgurl = this.base64ImgtoFile(img)
console.log('imgurl===', imgurl)
let url =
window.webkitURL.createObjectURL(imgurl) ||
window.URL.createObjectURL(imgurl)
// 创建图片地址
this.fileList.push({
content: 'data:image/jpeg;base64,' + k.data,
File: imgurl,
name: v,
status: 'done',
message: '上传中',
isImage: true,
url
})
})
})
base64ImgtoFile(dataurl, filename = 'file') {
const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const suffix = mime.split('/')[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
},