uni.uploadFile上传头像失败,打开vConsole上传成功

本文探讨了使用uni.uploadFile上传头像时遇到的问题。在开发者工具中上传功能正常,但在实际应用中上传失败。通过开启vConsole发现上传功能恢复正常,提示可能需要检查上传下载域名的配置。

uni.uploadFile上传头像失败,打开vConsole上传成功

开发者工具可以上传头像到数据库,体验版vConsole可以上传,关闭上传失败

查看上传下载域名是否有配置

在这里插入图片描述

### 解决 UNIAPP 在 H5 环境下 `uni.uploadFile` 上传图片失败的问题 当在 H5 环境中使用 `uni.uploadFile` 方法上传文件时,可能会遇到后端提示错误:“No multipart boundary param in Content-Type”。这通常是因为前端发送请求时未正确设置多部分表单数据边界参数。 为了确保文件能够被正确上传并处理,在调用 `uni.uploadFile` 函数之前应该先创建一个有效的 FormData 对象,并将要上传的数据项加入其中。对于图片文件来说,还需要注意如何转换 base64 编码的图像字符串为 Blob 或者 File 类型的对象以便于传输[^1]。 下面是一个改进后的代码片段用于解决上述提到的问题: ```javascript const uploadImage = async (base64Url) => { // 将 Base64 图片转成 Blob 对象 function dataURItoBlob(dataURI) { var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]); else byteString = unescape(dataURI.split(',')[1]); var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) ia[i] = byteString.charCodeAt(i); return new Blob([ab], {type:mimeString}); } const blob = await dataURItoBlob(base64Url); // 创建带有时间戳作为名称的新 File 实例 const fileOfBlob = new File([blob], `${new Date().getTime()}.jpg`, { type: 'image/jpeg' }); // 构建 FormData 表单对象并将文件添加进去 const formData = new FormData(); formData.append('file', fileOfBlob); try { const result = await uni.uploadFile({ url: import.meta.env.VITE_BASE_URL + '/system/file/upload', filePath: '', // 此处为空因为实际文件已经在formData里了 name: 'file', files: [fileOfBlob], formData, header: {'Content-Type': 'multipart/form-data'}, success(res){ console.log(JSON.parse(res.data)); }, fail(err){ console.error(err); } }); } catch(error){ console.error(`Upload failed with error ${error}`); } }; ``` 此方法解决了两个主要问题:一是设置了正确的 `Content-Type` 请求头;二是通过构建标准的 `FormData` 来传递文件信息给服务器,从而避免了原始实现中存在的文件名丢失的情况[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值