当前位置:网站首页>van-uploader上传图片,使用base64回显无法预览的问题
van-uploader上传图片,使用base64回显无法预览的问题
2022-07-31 06:10:00 【布偶乱跑】
1.今天在开发过程中,遇到了使用vant上传组件,回显无法预览的问题,在搜索后,解决方法如下:
- html:
<van-uploader v-model="fileList"
accept='.jpg,.jpeg,.png'
:before-read="beforeRead"
:after-read="afterRead"
:max-size="10000 * 1024"
@oversize="onOversize"
:before-delete="beforeDel" />
- js
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
})
})
})
- base64转文件
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
})
},
边栏推荐
- 基于交替迭代法的交直流混合系统潮流计算matlab程序iEEE9节点系统算例
- 解决win11/win10在登陆界面(解锁界面)点击获取每日壁纸无效的问题 - get Daily Lockscreen and Wallpaper - Win11/10的登录界面背景图片在哪里?
- SQL Server Datetime2数据类型
- In-depth analysis of z-index
- 从入门到一位合格的爬虫师,这几点很重要
- gstreamer's caps event and new_segment event
- 【Star项目】小帽飞机大战(七)
- 【C语言项目合集】这十个入门必备练手项目,让C语言对你来说不再难学!
- 简单谈谈Feign
- MySQL系列一:账号管理与引擎
猜你喜欢
随机推荐
【Go报错】go go.mod file not found in current directory or any parent directory 错误解决
数据库概论 - MySQL的简单介绍
QFileInfo常规方法
codec2 BlockPool:不可读库
LeetCode:952. 按公因数计算最大组件大小【欧拉筛 + 并查集】
Zabbix6.2惊喜发布!特别优化中大型环境部署的性能!
Analysis of the implementation principle and detailed knowledge of v-model syntactic sugar and how to make the components you develop support v-model
Automatic translation software - batch batch automatic translation software recommendation
【Go】Go 语言切片(Slice)
Install and use uView
(border-box) The difference between box model w3c and IE
基于LSTM的诗词生成
2022.07.15_每日一题
Obtaining server and client information
SQLite数据库连接字符串
事务的四大特性
2022.07.18_每日一题
文件 - 07 删除文件: 根据fileIds批量删除文件及文件信息
Kubernetes调度
【C语言项目合集】这十个入门必备练手项目,让C语言对你来说不再难学!