首先安装vant
vant官网:介绍 - Vant 4 (gitee.io)
废话不多说以下就是上传的代码,换成自己的接口,cv走就可以用
<template> <div> <van-uploader v-model="fileList" multiple :after-read="afterRead" /> </div> </template> <script setup> import { ref } from 'vue'; import { Uploader } from 'vant'; // 文件列表 const fileList = ref([]); // 上传图片的函数 const afterRead = (file) => { // 使用 FormData 来包装文件 const formData = new FormData(); formData.append('file', file.file); // 发送 POST 请求到 API 接口 fetch('接口', { method: 'POST', body: formData, }) .then(response => response.json()) .then(data => { console.log('111111111111', "拼接" + data.url); // 处理响应数据,例如将上传成功的图片添加到 fileList }) .catch(error => { console.error('上传错误:', error); }); }; </script>