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

最新推荐文章于 2024-11-24 18:08:02 发布
原创 最新推荐文章于 2024-11-24 18:08:02 发布 · 409 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

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

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

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

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

在这里插入图片描述

Web995
关注
uni-app - H5 通过 uni.uploadFile() 上传 Blob 文件路径图片图像，文件没有后缀扩展名（上传图片到服务端文件没有后缀名，服务端判断是无效的后缀名文件）终极且完美解决方案
🏆 前端领域优质创作者
11-23 1万+
uniappH5上传图片没有后缀名，uniapp中h5通过uni.chooseimage直接上传图片没有图片扩展名，uni.uploadFile在H5下上传blob文件链接的时候无法获取文件后缀扩展名，解决uni.uploadFile上传图片丢失后缀名的问题，完美解决uniapp发布h5上传头像base64图片，ufilename没有后缀名，H5模式下上传的文件，服务端拿不到后缀名怎么办，uni.canvasToTempFilePathH5生成的文件没有后缀名，uniappH5上传图片后调用u
uni-app 小程序上传图片报错：uploadFile:fail parameter error: parameter.filePat…meter.name should be...
iuvc的博客
11-08 6122
uni-app 开发过程中，发现上传功能在小程序端报错：`uploadFile:fail parameter error: parameter.filePat…meter.name should be String instead of Undefined`。
uniapp-H5端使用uni.uploadFile上传图片或图像，文件没有后缀名，导致图片上传失败的解决办法
qq_45751819的博客
10-12 5281
发现后端并没有给返回数据，还来了个500，正常来说此时应该请教后端大佬的，但是这个地方比较特殊，问题在于前端传过去的数据有问题，但是这个不怪我们，而是uniapp官方背大锅，h5端与其他小程序、app在这个地方的处理方式不同，上面的方法其他端通用，唯独h5不行，请看vcr。我最近写了一个小程序，有一个拍照上传图片的功能，用Uview的u-upload组件写的，在小程序端测试一切功能正常，但是到H5端就发现图片没法传给后端或者传过去的图片后端无法识别，报500错误。有个地方忘说了，就是文件后缀名丢失的问题。
关于Uniapp微信小程序uni.uploadFile上传报错---errMsg:“uploadFile:fail createUploadTask:fail invalid url
简单Cere
07-26 2885
真机有自动去除前后空格，所以没有影响，但开发者工具没那么智能，导致图片上传报错。保证url的完整性，header中配置后端需要的参数就不会有任何问题了。
uniapp uni.uploadFile errMsg: “uploadFile:fail
qq_38552198的博客
10-14 1412
3.检查转发层限制，这里用的nginx，可参考对应代理设置。uniapp 上传后一直显示加载中。1.检查前后端上传有无问题。
uniapp写小程序图片上传报错 uploadFile:fail createUploadTask:fail url not in domain list
weixin_45041493的博客
03-27 1842
小程序体验版报错：uploadFile:fail createUploadTask:fail url not in domain list。注意这里有两个域名需要填，之前我填的一个域名，所以一直不成功。小程序后台配置开发设置-服务器域名的uploadFlie和download的合法域名。
小程序wx.uploadFile出现中文无法上传或者出现乱码
03-29
出现中文无法上传或者出现乱码时可以参考一下这篇跳坑指南微信小程序联盟-uploadFile跳坑指南  里面讲的很详细了，这里归纳一下，解决方法：  在formData中对文字进行编码，使用encodeURI()  wxml中例：   ...
【vue/uniapp】使用 uni.chooseImage 和 uni.uploadFile 实现图片上传（包含样式，可以解决手机上无法上传的问题）
花间半盘棋
01-03 6311
发现如果是在微信小程序的项目中嵌入 h5 的模块，这个 h5 的项目使用 u-upload 的话，图片上传功能在电脑上正常，但是在手机的小程序上测试就不会生效，点击上传加号按钮毫无反应。，删除的实现方法是在本地进行的，是对数组进行 splice 之后，再将最新的图片数组保存进大数组一次，最后再进行上传，注释写的很详细，方便以后回顾查看。进行图片选择功能，配置相应参数和值，选择成功，走到 then 的成功回调里，回显照片，此时调接口。现在最终的解决方法是，使用 uniapp 的。
uniapp 打包发布 uni.uploadFile() 上传出错报跨域问题
落叶随风将要去远方，看沿途的风景回忆一场...
08-27 6125
参考代码： let formData = { i:2, c:'entry', a:'wxapp', m:'yzd_edu', deviceType:'wxapp', do: 'UploadImg'};let params = '';for(let k in formData) { if(params) params += '&'; params += `${k}=${formData[k]}`;}//发布后跨域上传失效问题，改成如下方式即可解决uni.uploadFile({ // url: th
uni.uploadFile上传图片后台接收不到数据
每天都要努力学习哦~~
04-17 3091
今天遇到一个很奇怪的问题，通过使用uni.uploadFile上传文件时后端接收不到文件，查过很多资料，原来是自定义了header的Content-Type问题。取消即可，另把自定义文件上传的代码贴出来。浏览器会默认帮我们加上请求头，并且默认加上一串boundary信息。select文件动作保存文件信息。分析：当我们加上请求头的时候。
uni-app uni.uploadFile提示“errMsg“: “uploadFile:fail undefined“
qq_43565396的博客
06-28 6702
2、formData中不能有跟name参数同名的参数（uploadFile接口中name参数指定的是后端接受文件内容的字段，formData中的内容也是可以被后端接受的参数，可能会产生冲突，猜测是这个原因）1、 请求头需要添加。
关于微信小程序uni.uploadFile上传报错---请求拦截---errMsg:“uploadFile:fail createUploadTask:fail invalid url“
Jooa0704的博客
03-21 4380
使用uni.chooseImage选择图片，uni.uploadFile上传图片时，发现了上面这句报错
使用uniapp开发支付宝/钉钉小程序uni.uploadFile报错errMsg: “uploadFile:fail 无效参数“
逍遥的码农的博客
05-06 1935
使用uniapp开发支付宝/钉钉小程序uni.uploadFile报错errMsg: “uploadFile:fail 无效参数“
uniapp uni.uploadFile微信小程序上传图片/视频时异常 “errno“:1001,“errMsg“:“uploadFile:fail parameter error解决方法
Tekin 是深耕技术 20 年的全栈实战派专家，精通 Go/Python/Java 等多语言开发。博客专注技术原理与实战结合，深度解析 Python 高阶编程、Go 语言架构、数据库优化等硬核内容。涵盖并发编程、机器学习、云原生等前沿领域，通过真实案例拆
11-24 1867
最近使用了uniapp的这个 uni-file-picker 组件的 uni.uploadFile，在H5里面上传正常， 当是到了微信小程序里面居然报 "errno":1001,"errMsg":"uploadFile:fail parameter error: parameter.filePat…， 这个name既你的表单的名称，后端通过这个名称获取上传文件。这样就可以完美解决这个 uni.uploadFile 小程序和H5参数不兼容的问题了。这个的解决方法其实很简单， 我们在。
uniapp 使用 uni-file-picker 上传头像
Serenity_Qin的博客
01-29 1456
此处我需要将头像的存储地址存入数据库中，因此需要上传额外的参数（用户的id），所以需要使用 uni.uploadFile() 的 formData。此处使用 @select 处理选择完文件后的逻辑，即将文件上传到自己的服务器。
uniapp中上传头像遇到的问题
qq_42586147的博客
03-09 549
uniapp上传图片
uniapp文件上传封装使用（含超时设置:大文件上传失败原因）
橙子yq的代码世界
08-01 997
【代码】uniapp文件上传封装使用（含超时设置:大文件上传失败原因）
关于uniapp上传头像功能实现代码如下
ajhdcjksdhfs的博客
05-05 655
关于uniapp上传头像方法的封装可以直接拿来使用
uniapp小程序解决不能上传文件/图片问题
qq_45740997的博客
04-13 5237
当前uniapp微信小程序无法使用formData( )来上传文件/图片，会出现FormData is not defined 问题，而官方给的uni.uploadFile（）也是看的懵懵懂懂。
uniapp H5端使用uni.uploadFile上传图片失败
最新发布
01-11
### 解决 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、付费专栏及课程。

余额充值