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

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

vue 复制代码
<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封装上传文件

vue 复制代码
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))
	})
}

原因

数据格式是:

json 复制代码
{
	"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里面的,所以这样就跨域获取对应的数据并且可以上传到服务器上面去

相关推荐
gnip10 分钟前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员27 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘32 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的34 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im40 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常1 小时前
vue中添加原生右键菜单
javascript·vue.js
旷世奇才李先生2 小时前
Next.js 安装使用教程
开发语言·javascript·ecmascript
Mintopia3 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖3 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript