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

已于 2025-01-19 16:15:20 修改
阅读量1.7w 收藏 22
点赞数 9
分类专栏： + UniApp + Uniapp 开发问题汇总 文章标签： uniapp H5 H5 上传图片没有扩展名 uni.uploadFile 上传到服务器没有后缀名 Blob 本地文件路径
于 2022-11-23 21:24:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44198965/article/details/128004567
版权
在 uni-app H5 中使用 uni.uploadFile() 上传 blob 图片时遇到服务端无法识别后缀名的问题。本文提供官方解决方案，通过将图片转换为 File 对象并利用 options.filename 解决此问题，确保图片成功上传。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

在 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 1万+
uni-app/vue.js/JavaScript将base64转Blob，uniappapp端如何将图片的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 - 超详细 H5 网站图片压缩功能，图像上传前进行压缩降低大小并上传到服务器完整示例源码（附带 uview 组件库 u-upload 上传组件与该图片压缩插件 “搭配组合“ 使用教程）
王二红
05-06 1万+
uniapp图片图像压缩插件，uniappuviewupload压缩图片，uniapp如何对图片进行压缩减小体积，uniapp上传图片太慢有什么办法能压缩一下吗，uniapph5上传前压缩图片降低大小，uniapp中如何压缩图片，uniapp图像上传前如何进行降低质量缩小文件大小，uniappuviewUpload上传组件怎么在H5网页上图片压缩，uview上传组件怎么压缩降低图片大小，uniapp图像压缩示例代码，uniapp照片相片怎么进行上传前的压缩操作，uniappuview组
Uniapp实现多种文件类型上传
梦想成为公务员
03-10 1746
在移动端开发中，文件上传是常见的功能需求。本文将通过Uniapp框架，详细讲解如何实现支持多类型文件（图片、视频、文档等）的上传功能，并解决跨平台兼容性问题😄😄😄。
UniApp 上传文件：全面指南与实践
前端开发探索之旅
02-19 3470
在 UniApp 中实现文件上传功能，主要使用和这几个 API。通过合理的流程设计和对常见问题的处理，可以确保文件上传功能的稳定性和可靠性。开发者在实际应用中，要根据项目需求和服务器端的要求，灵活调整文件上传的实现方式。同时，要注意处理好跨域、文件大小限制、网络问题等，为用户提供良好的文件上传体验。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
uniapp中uploadFile的用法
最新发布
Vae2437426397的博客
03-31 1462
以下代码实现了从本地选择图片并上传到服务器的功能。
解决uni-uploadFile上传图片丢失后缀名的问题
qq_39246667的博客
02-22 1万+
本次在使用uni.uplodFile()上传图片时，遇到丢失后缀名导致后台服务器无法解析的问题，特此记录 首先放上解决问题前后对比图 解决前:formdata filename属性无后缀 解决后，filename参数已有后缀，并且为文件名: 问题如下： 当使用uni-file-picker组件上传图片时，formdata中的filename丢失后缀名，导致后台服务器返回的url无后缀名，图片无法正常显示的问题 <uni-file-picker file-extname="
uniapp-H5端使用uni.uploadFile上传图片或图像，文件没有后缀名，导致图片上传失败的解决办法
qq_45751819的博客
10-12 4306
发现后端并没有给返回数据，还来了个500，正常来说此时应该请教后端大佬的，但是这个地方比较特殊，问题在于前端传过去的数据有问题，但是这个不怪我们，而是uniapp官方背大锅，h5端与其他小程序、app在这个地方的处理方式不同，上面的方法其他端通用，唯独h5不行，请看vcr。我最近写了一个小程序，有一个拍照上传图片的功能，用Uview的u-upload组件写的，在小程序端测试一切功能正常，但是到H5端就发现图片没法传给后端或者传过去的图片后端无法识别，报500错误。有个地方忘说了，就是文件后缀名丢失的问题。
uniapp uni.uploadFile filename 没有后缀名 上传的问题 后端是node
weixin_40046130的博客
07-29 5557
url: 后端接口 可以拼接query参数 files 一个数组集合，可以上传多个文件 header： 增加需求请求头 如果后端没要求可不填写 这里我们需要注意的一点 后端接收图片文件时， 标准库会判断 文件filename的后缀名 目前h5 是没有后缀名的 显示一个file- 时间戳的字符串 手机端有后缀名 所以在浏览器测试有问题 因为标准的后端库都会校验filename的后缀名 手机端目前测试没问题 ...
uniapp h5端上传图片压缩转Blob上传
weixin_41521961的博客
06-24 6097
1. 图片压缩使用 uniapp 插件市场上的压缩插件，地址：https://ext.dcloud.net.cn/plugin?id=1718 2. 新建一个js文件，写toBlob的方法 constbase64ToBlob=({b64data='',contentType='',sliceSize=512}={})=>{ returnnewPromise((resolve,reject)=>{ //使用atob()方法将数据解...
uniapp上传文件后缀名丢失
qq_43345846的博客
04-02 1830
因为uniapp不支持H5的录音，所以要靠自己去实现，这里用的是依赖库做实现，调用uni.uploadFile时发现文件后缀丢失的问题，例如我要上传一个文件名为：test.mp3，传到服务器后就变成了test.或者test，反正都把后缀名丢了，这里也去uniapp社区逛了，试下来发现都不行，官方没有提供好的解决方案。因为uni本身就提供请求相关的api，所以不想为了一个上传再单独引入axios这样的依赖库，所以决定使用。接下来别急着去调这个方法，先得搞清楚需要上传的文件在JS中变成了什么类型，
uniapp选定文件或图片并上传——附前端js对上传图片blob和base64互转教程
wwppp987的博客
07-21 6260
代码】uniapp选定文件或图片并上传——附前端js对上传图片blob和base64互转教程。
uniapp—H5 上传图片，拍照上传的问题总结（参考多方总结）
萍萍的博客
12-17 1414
总结目前遇到的uniapp的h5上传图片的问题，这里做了一些总结归纳。uniapp - 超详细 H5 网站图片压缩功能，图像上传前进行压缩降低大小并上传到服务器完整示例源码（附带 uview 组件库 u-upload 上传组件与该图片压缩插件 “搭配组合“ 使用教程）_uview 图片压缩-优快云博客。
uniapp(全端兼容) - 详解前端阿里云OSS上传图片并添加水印功能，纯前端直传图片到阿里oss对象存储另外添加自定义水印，uniApp上传图像文件到OSS时给图片插入水印添加水印（无需后端服务）
热门推荐
高级前端工程师
11-01 1万+
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，阿里云oss对象存储，前端直传无需后端接口服务器，上传图片到阿里云oss，给图片添加水印后再传到oss上，文字水印，图片水印，uni-app实现阿里OSS直传，uniapp阿里云oss图片直接上传(不需要后端做签名)，uni-app上传图片到oss并在底部加入文字水印，uni-app上传图片并添加水印支持拍照单图片上传多图片上传并添加水印，uniapp选取相册中的照片并插入水印上传，各平台打开相机和相
uniapp h5 上传图片返回路径没有图片后缀
m0_48909912的博客
12-13 167
可以看到每次上传的图片返回回来的时候大小都一样，很小，之后800多。提示：查看filepath及相关的路径字段是否对应正确。
uniapp中上一篇介绍图片，但在H5端是不能实现图片上传的
weixin_62305533的博客
12-29 849
解决H5 图片上传服务器，连接不上问题，基于uniapp的uni.uploadFile()
uni-app 中h5图片上传的问题
dangjunwei123的博客
03-29 1617
解决H5上传的问题 <view class="line1" > <text @click="preview" >头像</text> <image src="../../static/images/toppic.png" @click="upload" mode="widthFix"></image> ...
H5、uniapp等上传图片
keaicll的博客
03-23 358
上传图片 H5 uniapp
uniapp云开发uniCloud.uploadFile上传图片文件后缀名丢失
个人博客
10-01 2677
cloudPath属性写的不对
uni-app 上传文件
麋鹿的鹿
12-13 724
<view class="img" @tap="getUploadImg"> <image :src='list.logo'></image> </view> getUploadImg(e) { uni.chooseImage({ count: 1, // 默认9 sizeType: ['compressed'], sourceType: ['album'], success: (res) =&
uni-app uni.uploadFile上传多文件前后端java代码
04-26
首先，您可以查阅uni-app和uni.uploadFile的官方文档，以深入了解如何使用这个功能上传多个文件。对于后端Java代码，请在服务器端参考Java Servlet规范和Java EE规范。您也可以查找一些示例代码和教程，了解如何在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

王二红

请作者喝杯咖啡 :)

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

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

打赏作者

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

抵扣说明：

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

余额充值