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

相关推荐
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
GISer_Jing7 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆7 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding9 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
共享ui设计和前端开发人才9 小时前
UI前端大数据处理安全性保障:数据加密与隐私保护策略
ui