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

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

原文地址：https://blog.csdn.net/qq_45153375/article/details/143024673

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！