vue3图片上传---vant

简介: 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>
目录
相关文章
|
1天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
7 2
|
1天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
7 2
|
1天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
8 1
|
1天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
9 1
|
1天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
5 1
|
1天前
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
4 0
|
1天前
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
6 0
|
1天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
7 1
|
1天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
1天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料