vue之vant上传图片

1.引入组件之后，使用:after-read="afterRead"事件（文件读取前的回调函数）

2.再回调函数创建formData对象,然后构建用于文件上传的表单数据,使用append指定上传数据，最后请求接口上传

<div class="imgfile_box">
     <van-uploader v-model="fileList"  :max-count="2" :after-read="afterRead"/>
</div>
import { useRouter } from "vue-router";
import axios from "axios";
import { ref } from "vue";
const fileList = ref([]);
const afterRead = (file) => {
    // 创建formData对象
    const formData = new FormData();
    formData.append("file", file.file);
    console.log(file);
    // 请求接口
    axios({
        url: "/app/File/file",
        method: "post",
        data: formData,
        headers: {
            id: 23
        }
    }).then((res) => {
        console.log(res.data);
    });
    
};