实现功能：在移动端使用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格式来显示。