vue之vant上传图片

server/2024/11/14 14:12:07/

1.引入组件之后,使用:after-read="afterRead"事件(文件读取前的回调函数)

2.再回调函数创建formData对象,然后构建用于文件上传的表单数据,使用append指定上传数据,最后请求接口上传

javascript"><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.ppmy.cn/server/140753.html

相关文章

kubectl常用命令简介

在之前浅谈Kubernetes集群架构 中介绍了kube-apiserver是提供k8s对内或对外的api请求的唯一入口&#xff0c;本文介绍的 kubectl 是官方的CLI命令行工具&#xff0c;用于与 apiserver 进行通信&#xff0c;将用户在命令行输入的命令&#xff0c;组织并转化为 apiserver 能识别的…

typescript 补充

文章目录 Pick<T, K> 从 T 中挑选部分属性构成新类型Partial<T>&#xff1a;将类型的所有属性变为可选Required<T>&#xff1a;将类型的属性变为必选。Omit<T, K>&#xff1a;从 T 中移除部分属性构成新类型。Readonly<T>&#xff1a;将类型的属…

基于IM场景下的Wasm初探:提升Web应用性能|得物技术

一、何为Wasm &#xff1f; Wasm&#xff0c;全称 WebAssembly&#xff0c;官网描述是一种用于基于堆栈的虚拟机的二进制指令格式。Wasm被设计为一个可移植的目标&#xff0c;用于编译C/C/Rust等高级语言&#xff0c;支持在Web上部署客户端和服务器应用程序。 Wasm 的开发者参…

NAT网络工作原理和NAT类型

NAT基本工作流程 通常情况下&#xff0c;某个局域网中&#xff0c;只有路由器的ip是公网的&#xff0c;局域网中的设备都是内网ip&#xff0c;内网ip不具备直接与外部应用通信的能力。 处于内网的设备如何借助NAT来实现访问外网的应用&#xff1f; 对于开启了NAT功能的局域网…

Spring Boot实现多数据源连接和切换

文章目录 前言一、多数据源配置与切换方案二、实现步骤1. 创建多个 DataSource 配置类2. 创建 DataSource 配置类3. 创建动态数据源路由类4. 实现 DynamicDataSource 类5. 创建 DataSourceContextHolder 来存储当前的数据源标识6. AOP 方式切换数据源7. 自定义注解来指定数据源…

Apache POI 操作Word常用方法

系列文章目录 一、Java使用Apache POI导出excel 二、Apache POI 操作Excel常用方法 三、Apache poi 拆分单元格并赋值 四、使用easypoi模板方法导出excel 五、Apache poi给excel单元格添加下拉框或数据验证 六、Apache poi操作Word常用方法 文章目录 系列文章目录一、介绍二、…

M芯片Mac构建Dockerfile - 注意事项

由于MacBook的M芯片架构与intel不同&#xff0c;交叉构建Linux服务器docker镜像&#xff0c;需要以下步骤完成&#xff1a; 编写好Dockerfile在命令行中&#xff0c;执行构建命令&#xff1a; docker buildx build --platform linux/amd64 -t ${image_name}:${tag} .

机器视觉基础—双目相机

机器视觉基础—双目相机与立体视觉 双目相机概念与测量原理 我们多视几何的基础就在于是需要不同的相机拍摄的同一个物体的视场是由重合的区域的。通过下面的这种几何模型的目的是要得到估计物体的长度&#xff0c;或者说是离这个相机的距离。&#xff08;深度信息&#xff09…