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);
});
};
原文地址:https://blog.csdn.net/weixin_58462329/article/details/143646283
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!