当前位置: 首页 > article >正文

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


http://www.kler.cn/a/387362.html

相关文章:

  • 【PGCCC】Postgresql Toast 原理
  • C 语言标准库 - <errno.h>
  • 力扣 LeetCode 27. 移除元素(Day1:数组)
  • 力扣每日一题 3258. 统计满足 K 约束的子字符串数量 I
  • go语言 分布式一致
  • Linux系统的网络设置
  • 数据结构-归并排序笔记
  • Java 连接操作 MySQL 数据库(增删查改操作)
  • 文献阅读 | Nature Methods:使用 STAMP 对空间转录组进行可解释的空间感知降维
  • LLMs在供应链投毒检测中的应用
  • 植物明星大乱斗1
  • 利用AI工具进行论文数据收集
  • 了解GPT大模型,读这本书就够了!(文末送书)
  • 【模块化大作战】Webpack如何搞定CommonJS与ES6混战(1-3)
  • 【网络】深入理解 HTTPS:确保数据传输安全的核心协议
  • 今天要重新认识下注解@RequestBody
  • IDEA构建JavaWeb项目,并通过Tomcat成功运行
  • 【快速入门】Kafka的安装部署
  • 关于QUERY_ALL_PACKAGES权限导致Google下架apk
  • LLM大模型学习精华系列:VLLM性能优化部署实践——全面加速从推理到部署的流程
  • 【ESP】一小时速通入门笔记
  • 【数据处理】数据预处理·数据变换(熵与决策树)
  • AI 写作(五)核心技术之文本摘要:分类与应用(5/10)
  • Sigrity SPEED2000 Power Ground Noise Simulation模式如何进行电源地噪声分析操作指导-SODIMM
  • SQLAlchemy 介绍与实践
  • 【软件测试】需求的概念和常见模型(瀑布、螺旋、增量、迭代)