快捷導(dǎo)航

van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù)

更新時間：2023年06月13日 09:42:21 作者：鯨洛洛

前端開發(fā)想省時間就是要找框架呀,下面這篇文章主要給大家介紹了關(guān)于van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

實(shí)現(xiàn)功能：

在移動端使用van-uploader組件上傳圖片，然后調(diào)用接口保存到后端數(shù)據(jù)庫，提交保存信息成功后，調(diào)用另外的接口返回數(shù)據(jù)用來回顯uploaded的文件，（一般正常的返回數(shù)據(jù)的接口是個圖片地址，可以直接顯示），我現(xiàn)在遇到的功能是返回了一個圖片地址，然后我需要在前端頁面自己去調(diào)一次圖片地址的接口。

 <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組件不熟悉的可以去官網(wǎng)自行查看

保存信息的接口代碼：

這里要在文件讀取完成后的回調(diào)函數(shù)中使用

async function onRead(file: any, detail: any) {
? ? ? ? ? ? let formData = new FormData() //格式化必不可少，在里面添加接口需要傳的參數(shù)
? ? ? ? ? ? formData.append('file', file.file)
? ? ? ? ? ? formData.append('sort', detail.index)
? ? ? ? ? ? getUploadKey(formData).then(res => {
? ? ? ? ? ? ? ? if (res.resultCode === '00') {
? ? ? ? ? ? ? ? ? ? let result = res.data
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }

接下來是回顯接口返回的數(shù)據(jù)在uploader，這里主要遇到的是v-model的fileList綁定的值，把接口獲取的值直接賦值給fileList即可以。

1、獲取接口的值，我這邊假設(shè)為fetchData,我做了一個判斷，fetchData有值才調(diào)用圖片地址的數(shù)據(jù)

if (fetchData.value.length > 0) {
? ? ? ? ? ? ? ? //當(dāng)回顯的圖片有多張時需要做一個循環(huán)
? ? ? ? ? ? ? ? for (let i = 0; i < fetchData.value.length; i++) {
? ? ? ? ? ? ? ? ? ? let item =fetchData.value[i];
? ? ? ? ? ? ? ? ? ? item = {
? ? ? ? ? ? ? ? ? ? ? ? url: item.imgUrl, //這里的imgUrl后端接口返回的圖片地址
? ? ? ? ? ? ? ? ? ? ? ? sort: item.sort,? ?//這里的數(shù)據(jù)按照自己的實(shí)際情況添加，我是后面需要到sort才添加的，不然有url即可顯示
? ? ? ? ? ? ? ? ? ? }),
? ? ? ? ? ? ? ? ? ? ? ? console.log(item.url, 'uuuu')
? ? ? ? ? ? ? ? ? ? ?//開始調(diào)用圖片地址接口，因?yàn)槲疫@里圖片接口返回的二進(jìn)制流圖片數(shù)據(jù)格式，前端需要處理才能顯示。如下使用的是：
1、先設(shè)置axios接收參數(shù)格式為"arraybuffer"
2、轉(zhuǎn)換為base64格式圖片數(shù)據(jù)在img標(biāo)簽顯示
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)
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }