vue2 + vant2 实现上传图片功能

为实现移动端提交信息页面上传图片功能，如下图：

这里应要求，上传流程为：点击“添加图片”调取上传图片接口，接口请求成功返回一个链接地址，将多个地址组成数组格式，在最后点击提交时，同页面其他参数一起传给后端。

相关文档：Vant 2 - Mobile UI Components built on Vue

<div class="uploadImg">
    <p class="uploadTitle">上传照片:<span>（最多上传4张照片）</span></p>
        <van-uploader 
            v-model="infoData" 
            multiple 
            :max-count="4" 
            :max-size="10 * 1000 * 1024" 
            @oversize="onOversize"
            :before-read="beforeRead"
            :before-delete="beforeDelete"
            :after-read="afterRead">
            <img
                class="add"
                src="/默认占位图地址"
                alt=""/>
        </van-uploader>
</div>

使用到的相关API和事件如下：

v-model (fileList)

已上传的文件列表

max-count

文件上传数量限制

max-size

文件大小限制，单位为 byte

oversize

文件大小超过限制时触发

before-read

文件读取前的回调函数，返回 false 可终止文件读取，支持返回 Promise

before-delete

文件删除前的回调函数，返回 false 可终止文件读取，支持返回 Promise

after-read

文件读取完成后的回调函数

// css
.uploadImg{
    width: 100%;
    margin-top: 0.4rem;
    padding: 0 0 0 0.2rem;
    .uploadTitle{
        color: #333;
        font-size: 0.32rem;
        margin-bottom: 0.45rem;
        span{
            color: #aaa;
            font-size: 0.24rem;
        }
    }
}

<script>
import Vue from 'vue';
import { Toast, Uploader } from 'vant'
Vue.use(Uploader);

export default {
    data() {
        return {
            fileList:[],  // 上传的图片列表
            infoData:{},  // 页面显示的数据
        }
    },
    
    methods:{
        // 判断文件大小
        onOversize(file) {
            Toast('文件大小不能超过 10M');
        },
        // 判断文件类型
        beforeRead(file) {
            if (file.type != 'image/png' 
                && file.type != 'image/jpg' 
                && file.type != 'image/jpeg') {
                Toast('请上传png或jpg格式图片');
                return false;
            }
            return true;
        },
        // 上传图片
        afterRead(result){
            // console.log('afterRead',result.content);
            let data={
                file:result.content,
            }

            const loading = Toast.loading({
                forbidClick: true,
                text: '上传中，请稍候...',
            })

            this.$http.post("/上传图片的接口地址", data).then((res) => {
                if (res.code == 0) {
                    // 请求成功后返回图片链接
                    this.fileList.push(res.data.imageUrl);
                } else {
                    Toast(res.msg);
                }
            }).finally(()=>{
                loading.close()
            })
        },
        // 删除
        beforeDelete(result,detail){
            // console.log('beforeDelete',detail.index);
            this.fileList.splice(detail.index, 1);
            this.infoData.splice(detail.index, 1);
        },
    },
}
</script>

具体代码都贴上来，欢迎大家提出问题！