uni-app - H5 通过 uni.uploadFile() 上传 Blob 文件路径图片图像，文件没有后缀扩展名（上传图片到服务端文件没有后缀名，服务端判断是无效的后缀名文件）终极且完美解决方案

已于 2024-09-06 23:34:09 修改
阅读量1.5w 收藏 21
点赞数 8
分类专栏： + UniApp 文章标签： uniapp H5 H5 上传图片没有扩展名 uni.uploadFile 上传到服务器没有后缀名 Blob 本地文件路径
于 2022-11-23 21:24:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/128004567
版权
+ UniApp 专栏收录该内容
163 篇文章 2554 订阅 ¥9.90 ¥99.00
订阅专栏
在 uni-app H5 中使用 uni.uploadFile() 上传 blob 图片时遇到服务端无法识别后缀名的问题。本文提供官方解决方案，通过将图片转换为 File 对象并利用 options.filename 解决此问题，确保图片成功上传。
摘要由CSDN通过智能技术生成

前言

在 uni-app 项目中，通过 uni.uploadFile() 上传 blob 路径图片（blob:http://xxx:xx/57-de12）时，服务端判断没有后缀名。

该在 H5 网页网站端频繁出现，通过 uni.uploadFile() 上传 blob 文件路径给服务端后，后端无法获取到后缀名，进而上传失败。

支持 uniapp v2 / v3 版本。

网上的文章鱼龙混杂，各种问题和解决方案基本不行，本文提供官方的解决方案，100% 可行！

以下几种 H5 端的处理情况，就会出现该问题：

在这里插入图片描述

解决方案

详细流程及示例代码如下，

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
专栏目录
订阅专栏
uni-app - 将 base64 图片编码转为 Blob 本地文件路径（把base64类型的图片，转换成blob二进制文件流）适用于 uni-app / vue.js / JavaScript
王佳斌
11-26 9312
uni-app / vue.js / JavaScript 将 base64 转 Blob，uniapp app端如何将图片的base64编码转换成File对象或Blob，uni-app / vue.js / JavaScript 中拿到base64转blob对象，uniapp 图片base64格式转blob格式方法，uniapp上传图片压缩转base64码与base64转图片路径，Base64/Blob/File 图片文件转换，url、base64、blob相互转换方法，读取本地文件为Base64并转成B
UNIAPP使用uni.uploadFile在H5环境上传文件时，后端提示错误 : “No multipart boundary param in Content-Type“
灵壹Eli的博客
06-05 583
UNIAPP使用uni.uploadFile上传文件时后端提示错误 : “No multipart boundary param in Content-Type”
解决uni-uploadFile上传图片丢失后缀名的问题
qq_39246667的博客
02-22 9094
本次在使用uni.uplodFile()上传图片时，遇到丢失后缀名导致后台服务器无法解析的问题，特此记录 首先放上解决问题前后对比图 解决前:formdata filename属性无后缀 解决后，filename参数已有后缀，并且为文件名: 问题如下： 当使用uni-file-picker组件上传图片时，formdata中的filename丢失后缀名，导致后台服务器返回的url无后缀名，图片无法正常显示的问题 <uni-file-picker file-extname="
关于Uniapp微信小程序uni.uploadFile上传报错---errMsg:“uploadFile:fail createUploadTask:fail invalid url
最新发布
简单Cere
07-26 826
真机有自动去除前后空格，所以没有影响，但开发者工具没那么智能，导致图片上传报错。保证url的完整性，header中配置后端需要的参数就不会有任何问题了。
【vue/uniapp】使用 uni.chooseImage 和 uni.uploadFile 实现图片上传（包含样式，可以解决手机上无法上传的问题）
花间半盘棋
01-03 4201
发现如果是在微信小程序的项目中嵌入 h5 的模块，这个 h5 的项目使用 u-upload 的话，图片上传功能在电脑上正常，但是在手机的小程序上测试就不会生效，点击上传加号按钮毫无反应。，删除的实现方法是在本地进行的，是对数组进行 splice 之后，再将最新的图片数组保存进大数组一次，最后再进行上传，注释写的很详细，方便以后回顾查看。进行图片选择功能，配置相应参数和值，选择成功，走到 then 的成功回调里，回显照片，此时调接口。现在最终的解决方法是，使用 uniapp 的。
uniapp实现上传文件功能
weixin_59525879的博客
10-01 1841
UniApp是一款跨平台的开发框架，可用于开发微信小程序、H5、Android和iOS等多种平台应用。以上是实现上传文件功能的基本步骤，如果需要进一步的操作，可参考uni.uploadFile的官方文档。
uniapp上传文件后缀名丢失
qq_43345846的博客
04-02 1500
因为uniapp不支持H5的录音，所以要靠自己去实现，这里用的是依赖库做实现，调用uni.uploadFile时发现文件后缀丢失的问题，例如我要上传一个文件名为：test.mp3，传到服务器后就变成了test.或者test，反正都把后缀名丢了，这里也去uniapp社区逛了，试下来发现都不行，官方没有提供好的解决方案。因为uni本身就提供请求相关的api，所以不想为了一个上传再单独引入axios这样的依赖库，所以决定使用。接下来别急着去调这个方法，先得搞清楚需要上传的文件在JS中变成了什么类型，
uniapp h5端上传图片压缩转Blob上传
weixin_41521961的博客
06-24 5833
1. 图片压缩使用 uniapp 插件市场上的压缩插件，地址：https://ext.dcloud.net.cn/plugin?id=1718 2. 新建一个js文件，写toBlob的方法 constbase64ToBlob=({b64data='',contentType='',sliceSize=512}={})=>{ returnnewPromise((resolve,reject)=>{ //使用atob()方法将数据解...
uniapp uni.uploadFile filename 没有后缀名 上传的问题 后端是node
weixin_40046130的博客
07-29 5256
url: 后端接口 可以拼接query参数 files 一个数组集合，可以上传多个文件 header： 增加需求请求头 如果后端没要求可不填写 这里我们需要注意的一点 后端接收图片文件时， 标准库会判断 文件filename的后缀名 目前h5 是没有后缀名的 显示一个file- 时间戳的字符串 手机端有后缀名 所以在浏览器测试有问题 因为标准的后端库都会校验filename的后缀名 手机端目前测试没问题 ...
uniapp选定文件或图片并上传——附前端js对上传图片blob和base64互转教程
wwppp987的博客
07-21 5520
代码】uniapp选定文件或图片并上传——附前端js对上传图片blob和base64互转教程。
uniapp中上一篇介绍图片，但在H5端是不能实现图片上传的
weixin_62305533的博客
12-29 680
解决H5 图片上传服务器，连接不上问题，基于uniapp的uni.uploadFile()
uniapp - 超详细 H5 网页利用 uni.downloadFile 下载 URL 文件流并调用浏览器下载功能效果，前台通过请求后端接口获取文件并下载保存到本地（支持电脑PC与手机移动端H5）
王佳斌
11-03 8968
uniapp h5网页下载文件，uniapp网站下载文件流，uniapp的移动端h5实现接口url文件下载，uniapp h5页面在浏览器中如何下载指定url文件流文件并保存到本地，uniapp移动端h5调用后端接口保存文件到本地，uniapp h5通过下载后获得临时路径怎么让浏览器弹出下载，uniapp怎么请求接口下载到文件，得到Blob临时路径对象后如何下载到本地，浏览器怎么下载blob对象，uniapp二进制文件流下载，uniapp h5中的文件流下载和指定的url下载详细教程，uniapp app移
uni-app H5上传图片过大失败
hy2356891299的博客
02-25 1794
uni-app 选择图片和拍照上传文件，当文件过大时压缩图片后再上传
Android文件上传返回数据,【报Bug】uni.uploadFile上传文件，安卓APP没有返回值，需返回上一页面，控制台才会打印出来（H5正常）...
weixin_33771816的博客
05-28 753
详细问题描述(DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题)[内容]重现步骤用uni.uploadFile上传文件，在安卓APP上面没有任何返回值，success fail complete 都没有执行，当返回上一页面时，控制台才会打印出这几个返回的值，在H5端是正常的。[步骤][结果]...
uniapp图片上传说明
m0_72167535的博客
12-19 5464
因为选择之后返回的是图片的临时路径，一旦app关闭，如果图片没有上传到服务器的话，会导致之前上传的图片无法显示，临时文件的生命周期是在app运行时生效，关闭则失效。后端直接从request中获取前端传递的文件信息，也可以通过@RequestParam(value = "userId") String userId，来接收formData中的内容。注意上传多个文件时，uri是文件路径，必须设置。name是文件的名字，上传多个文件时，名字必须设置，并且不能重复，如果存在3重复名字的文件，后端只能获取到一个。
uniapp 图片压缩后上传
你若无殇，岁月无恙……
05-07 323
【代码】uniapp 图片压缩后上传。
uni.uploadFile单文件上传、多文件上传
weixin_70012426的博客
04-18 1052
【代码】uni.uploadFile单文件上传、多文件上传。
uni-app图片上传至服务器（uni.uploadFile）
XINGZI前端程序猿的博客
10-12 1440
自定义uni.uploadFile()方法函数上传图片
uni-app uni.uploadFile上传多文件前后端java代码
04-26
很抱歉，我无法提供代码的参考，因为我是一名语言模型AI，没有能力编写代码。但是，我可以向您推荐一些相关的资源和文章，以帮助您解决您的问题。 首先，您可以查阅uni-app和uni.uploadFile的官方文档，以深入了解如何使用这个功能上传多个文件。对于后端Java代码，请在服务器端参考Java Servlet规范和Java EE规范。您也可以查找一些示例代码和教程，了解如何在Java中实现多文件上传。以下是一些可能有用的资源： - uni-app官方文档：https://uniapp.dcloud.net.cn/api/request/network-file - Java EE规范：https://docs.oracle.com/javaee/6/tutorial/doc/bnadx.html - 多文件上传示例：https://www.tutorialspoint.com/servlets/servlets-file-uploading.htm 希望这些信息能对您有所帮助，如果您有其他问题或需要更多的指导，请告诉我，我会尽力为您提供更好的帮助和支持。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值