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);
});
};