uniapp使用uviewPlus的up-upload上传文件的UI但是自己使用axios进行文件上传

news2024/10/21 4:29:06

这个是原生的UviewPlus进行文件上传的内容

<up-upload :fileList="imageFileList" @delete="true" style="margin-left: 10rpx; padding: 0rpx;"
	name="6" :file-type="image" multiple :maxCount="9" width="180rpx" height="180rpx"
	previewFullImage="true">
	<image src="/static/icon/image_upload.png" mode="widthFix"
		style="width: 100rpx;height: 100rpx;">
	</image>
</up-upload>

axios封装上传文件

const uploadImage = (event) => {
	console.log(event)

	const formData = new FormData();
	formData.append("file", event.file[0].file); // 添加文件到 FormData

	server.FileUpload("/uploadImage", formData).then((res) => {
		console.log(JSON.stringify(res))
	})
}

原因

数据格式是:

{
	"file": [{
		"type": "image",
		"url": "blob:http://localhost:5173/100faf50-f4ff-4aba-a61f-d517700c2b2b",
		"thumb": "blob:http://localhost:5173/100faf50-f4ff-4aba-a61f-d517700c2b2b",
		"size": 173255,
		"name": "66.png",
		"file":
		//‍[⁠File⁠]‍
		{}
	}],
	"name": "6",
	"index": 1
}

这里的数据是UviewPlus进行解析的数据类型,然后这里的实际数据的类型是在file里面的,所以这样就跨域获取对应的数据并且可以上传到服务器上面去

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2219782.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NOIP2023题解

T1&#xff1a;词典 有一个好猜的结论&#xff1a;对于一个字符串&#xff0c;若它当中的最小字符大于等于某其他字符串中的最大字符&#xff0c;那么这个字符串一定不可行。 证明也很简单&#xff0c;若最小字符大于最大字符&#xff0c;显然一定不可行。若最小字符等于最大…

常用Python数据分析开源库:Numpy、Pandas、Matplotlib、Seaborn、Sklearn介绍

文章目录 1. 常用Python数据分析开源库介绍1.1 Numpy1.2 Pandas1.3 Matplotlib1.4 Seaborn1.5 Sklearn 1. 常用Python数据分析开源库介绍 1.1 Numpy Numpy(Numerical Python)是Python数据分析必不可少的第三方库&#xff0c;Numpy的出现一定程度上解决了Python运算性能不佳的…

解决VScode(Visual Studio Code)中的乱码问题. 2024-10-13

系统环境: win10 64bit , vscode 1.94.2 1.乱码原因 默认使用utf-8编码,导致非utf-8内容乱码 2.解决乱码问题 1)打开设置 点击左下角的齿轮,然后再点击设置 2)启用编码自动检测 在设置搜索框中输入 编码 ,然后启用 自动猜测编码选项 3.乱码问题解决 重新打开文件后,乱码问…

清空redo导致oracle故障恢复---惜分飞

客户由于空间不足,使用> redo命令清空了oracle的redo文件 数据库挂掉之后,启动报错 Fri Oct 04 10:32:57 2024 alter database open Beginning crash recovery of 1 threads parallel recovery started with 31 processes Started redo scan Errors in file /home/oracle…

各种查询sql介绍

1. 关联查询&#xff08;JOIN&#xff09; 关联查询用于从多个表中检索数据。它基于两个或多个表之间的共同字段&#xff08;通常是主键和外键&#xff09;来组合数据。 内连接&#xff08;INNER JOIN&#xff09;&#xff1a; sql SELECT a.name, b.order_date FROM custome…

IO进程---day5

1、使用有名管道实现两个进程之间的相互通信 //管道文件 #include<myhead.h> int main(int argc, const char *argv[]) {//创建有名管道文件1if(mkfifo("./pipe1",0664)-1){perror("创建管道文件失败");return 0;}if(mkfifo("./pipe2",066…

upload-labs靶场Pass-03

upload-labs靶场Pass-03 分析源码 $is_upload false; $msg null; if (isset($_POST[submit])) {if (file_exists(UPLOAD_PATH)) {$deny_ext array(.asp,.aspx,.php,.jsp);$file_name trim($_FILES[upload_file][name]);$file_name deldot($file_name);//删除文件名末尾的…

Damn-Vulnerable-Drone:一款针对无人机安全研究与分析的靶机工具

关于Damn-Vulnerable-Drone Damn-Vulnerable-Drone是一款针对无人机安全研究与分析的靶机工具&#xff0c;广大研究人员可以利用该环境工具轻松学习、研究和分析针对无人机安全态势。 Damn Vulnerable Drone 基于流行的 ArduPilot/MAVLink 架构&#xff0c;其中故意留下了各种…

PDF 软件如何帮助您编辑、转换和保护文件

如何找到最好的 PDF 编辑器。 无论您是在为您的企业寻找更高效的 PDF 解决方案&#xff0c;还是尝试组织和编辑主文档&#xff0c;PDF 编辑器都可以在一个地方提供您需要的所有工具。市面上有很多 PDF 编辑器 — 在决定哪个最适合您时&#xff0c;请考虑这些因素。 1. 确定您的…

基于 Konva 实现Web PPT 编辑器(三)

完善公式 上一节我们简单讲述了公式的使用&#xff0c;并没有给出完整的样例&#xff0c;下面还是完善下相关步骤&#xff0c;我们是默认支持公式的编辑功能的哈&#xff0c;因此&#xff0c;我们只需要提供必要的符号即可&#xff1a; 符号所表达的含义是 mathlive 的command命…

从0开始深度学习(12)——多层感知机的逐步实现

依然以Fashion-MNIST图像分类数据集为例&#xff0c;手动实现多层感知机和激活函数的编写&#xff0c;大部分代码均在从0开始深度学习&#xff08;9&#xff09;——softmax回归的逐步实现中实现过 1 读取数据 import torch from torchvision import transforms import torchv…

JavaCove部署文档

1. 基础配置 1.1服务器&#xff1a; 2 核 2G 1.2. 一个域名 1.3. 项目地址&#xff1a; gitee:https://gitee.com/guo-_jun/JavaCove github:https://github.com/nansheng1212/JavaCove 2. CentOS 安装 Docker 官方网站上有各种环境下的 安装指南&#xff0c;这里主要介绍…

webpack自定义插件 ChangeScriptSrcPlugin

插件文件 class ChangeScriptSrcPlugin {apply(compiler) {const pluginName "ChangeScriptSrcPlugin";compiler.hooks.compilation.tap(pluginName, (compilation, callback) > {compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(pluginName,(html…

SpringCloudStream使用StreamBridge实现延时队列

利用RabbitMQ实现消息的延迟队列 一、安装RabbitMQ 1、安装rabbitmq 安装可以看https://blog.csdn.net/qq_38618691/article/details/118223851,进行安装。 2、安装插件 安装完毕后,exchange是不支持延迟类型的,需要手动安装插件,需要和安装的rabbitmq版本一致 https:…

动态规划:17.简单多状态 dp 问题_买卖股票的最佳时机III_C++

题目链接&#xff1a; 一、题目解析 题目&#xff1a;123. 买卖股票的最佳时机 III - 力扣&#xff08;LeetCode&#xff09; 解析&#xff1a; 拿示例1举例&#xff1a; 我们可以如图所示买入卖出股票&#xff0c;以求得最大利润&#xff0c;并且交易次数不超过2次 拿示…

基于SpringBoot设计模式之结构型设计模式·组合模式

文章目录 介绍开始架构图定义条目定义文件定义文件夹 测试样例 总结 介绍 能够使容器与内容具有一致性&#xff0c;创造出递归结构的模式就是 Composite 模式。Composite 在英文中是“混合物”“复合物”的意思。   以目录为例&#xff0c;在计算机中&#xff0c;某个目录下有…

在海外留学/工作,如何报考微软mos认证?

重点首先得强调的是&#xff0c;即使在海外也可以顺利地在国内获取微软MOS认证&#xff01; 01 微软mos认证简介 Microsoft Office Specialist 简称MOS。是微软公司和第三方国际认证机构、全球三大IT测验与教学中心之一的思递波/Certiport公司于1997年联合推出的&#xff0c;…

2009年国赛高教杯数学建模A题制动器试验台的控制方法分析解题全过程文档及程序

2009年国赛高教杯数学建模 A题 制动器试验台的控制方法分析 汽车的行车制动器&#xff08;以下简称制动器&#xff09;联接在车轮上&#xff0c;它的作用是在行驶时使车辆减速或者停止。制动器的设计是车辆设计中最重要的环节之一&#xff0c;直接影响着人身和车辆的安全。为了…

分享一个IDEA里面的Debug调试设置

1.问题来源 其实我们在这个IDEA里面的这个进行调试的时候&#xff0c;这个是只有步入&#xff0c;出去的选项的&#xff1b; 之前学习这个sort的底层源码的时候&#xff0c;进不去&#xff0c;我们是设置了一个取消java*什么的选项&#xff0c;然后使用这个step into就可以进…

计算机网络易混知识点

1.以太网采用曼彻斯特编码&#xff1b;以太网帧最短为64B&#xff0c;其中14个B首部(目的MAC-6B&#xff0c;源MAC-6B&#xff0c;类型-2B)4B尾部 2.OSI协议中&#xff0c;每一层为上一层提供服务&#xff0c;为下一层提供接口 3.帧序号的比特数表示的是发送窗口的大小&#…