VUE+Vant 实现图片上传

页面代码：

<li>
    <div class="item" v-for="(item,index) in hallImg" :key="index">
        <img :src="item" alt="">
    </div>
    <van-uploader :after-read="onRead2" class="upimg">
        <van-icon name="plus" />
    </van-uploader>
</li>复制代码

使用v-for循环数组hallImg，hallImg中存放的是数据库返回的图片URL地址

data(){
    return{
        hallImg:[],
    }
}复制代码

使用vant-uploader组件，:after-read="onRead2"触发onRead2方法：

methods:{
    onRead2(file) {
        let content = file.file;
        let data = new FormData();
        data.append('img',content);
        this.axios.post('图片上传地址',data)
        .then((res) => {
            let datas = res.data.datas.path;
            this.msg.hallImg.push(`api地址${datas}`);
        })
    },
}复制代码

onRead2方法会接收一个file参数，需要将file.file中的参数传到数据库，

需要注意，必须要加这两步

let data = new FormData();
data.append('img',content);复制代码

FormData()处理需要数据，

可以调用append()方法来添加数据，

成功后将URL拼接好push进定义的数组中。