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

相关推荐
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
浩星9 小时前
uniapp运行鸿蒙报错整理
uni-app
koooo~9 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
游戏开发爱好者810 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
安心不心安11 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202011 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css