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

相关推荐
00后程序员张26 分钟前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
小桥风满袖32 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
少年阿闯~~35 分钟前
CSS3的新特性
前端·javascript·css3
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
前端君10 小时前
实现最大异步并发执行队列
javascript
知识分享小能手11 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
00后程序员张11 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
蚂蚁RichLab前端团队12 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能