van-uploader保存文件到后端回显后端接口返回的数据
作者：鲸洛洛
前端开发想省时间就是要找框架呀,下面这篇文章主要给大家介绍了关于van-uploader保存文件到后端回显后端接口返回的数据,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
实现功能：
在移动端使用van-uploader组件上传图片，然后调用接口保存到后端数据库，提交保存信息成功后，调用另外的接口返回数据用来回显uploaded的文件，（一般正常的返回数据的接口是个图片地址，可以直接显示），我现在遇到的功能是返回了一个图片地址，然后我需要在前端页面自己去调一次图片地址的接口。
<div class="imgWrap">
<!-- :max-count="3" -->
<van-uploader
:disabled="isUpload"
:before-read="beforeUpHandle"
:after-read="onRead"
@click="emitCont"
v-model="fileList"
multiple
:max-count="15"
@delete="handleRemove"
>
<van-button
icon="photograph
"
></van-button>
<div class="addImg">添加图片</div>
</van-uploader>
</div>对van-uploader组件不熟悉的可以去官网自行查看
保存信息的接口代码：
这里要在文件读取完成后的回调函数中使用
async function onRead(file: any, detail: any) {
let formData = new FormData() //格式化必不可少，在里面添加接口需要传的参数
formData.append('file', file.file)
formData.append('sort', detail.index)
getUploadKey(formData).then(res => {
if (res.resultCode === '00') {
let result = res.data
}
})
}接下来是回显接口返回的数据在uploader，这里主要遇到的是v-model的fileList绑定的值，把接口获取的值直接赋值给fileList即可以。
1、获取接口的值，我这边假设为fetchData,我做了一个判断，fetchData有值才调用图片地址的数据
if (fetchData.value.length > 0) {
//当回显的图片有多张时需要做一个循环
for (let i = 0; i < fetchData.value.length; i++) {
let item =fetchData.value[i];
item = {
url: item.imgUrl, //这里的imgUrl后端接口返回的图片地址
sort: item.sort, //这里的数据按照自己的实际情况添加，我是后面需要到sort才添加的，不然有url即可显示
}),
console.log(item.url, 'uuuu')
//开始调用图片地址接口，因为我这里图片接口返回的二进制流图片数据格式，前端需要处理才能显示。如下使用的是：
1、先设置axios接收参数格式为"arraybuffer"
2、转换为base64格式图片数据在img标签显示
3、return 'data:image/png;base64,' + btoa( new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '') );
axios({
method: 'get',
url: item.url,
headers: {
'XXX-XXX-TOKEN': XXXXXX,//需要到token的小伙伴借鉴
},
responseType: 'arraybuffer',
})
.then(res => {
//若是没有做这个obj的封装，图片将无法显示。
let obj = {
content: `data:image/png;base64,${btoa(
new Uint8Array(res.data).reduce(
(data, byte) => data + String.fromCharCode(byte),
'',
),
)}`,
sort: item.sort,
}
fileList.value.push(obj)
})
.catch(err => {
reject(err.data)
})
}
}补充：van-uploader这个组件要回显图片两种方法：
1、提供图片的base64字符串
直接把base64字符串加前缀之后，封装成一个obj放入fileList，就可以直接回显图片
2、提供文件的二进制流
（这种能回显图片因为后端能接受这样的请求方式。但现在很多框架不支持没有完整请求头的请求，那么就会请求不到后端图片回显失败，这种方式还是有一定局限性的），我一开始用的这个方法就是没有实现回显所以又考虑转为base64格式来显示。
总结
到此这篇关于van-uploader保存文件到后端回显后端接口返回的数据的文章就介绍到这了,更多相关van-uploader保存文件到后端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！