vue3图片上传---vant

首先安装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>