解决uni-uploadFile上传图片丢失后缀名的问题

本次在使用uni.uplodFile()上传图片时，遇到丢失后缀名导致后台服务器无法解析的问题，特此记录

首先放上解决问题前后对比图

解决前:formdata filename属性无后缀

解决后，filename参数已有后缀，并且为文件名:

问题如下：

当使用uni-file-picker组件上传图片时，formdata中的filename丢失后缀名，导致后台服务器返回的url无后缀名，图片无法正常显示的问题

<uni-file-picker file-extname="jpg,jpeg,png" mode="grid" :auto-upload="false" title="上传图片(选填)" :limit="5" file-mediatype="image" @select="handleSelectImage">
</uni-file-picker>
.../**
* @description :上传文件文件回调
* */handleSelectImage(files){console.log('select........',files)console.log(this.forms.images)files.tempFiles.map(imgItem =>{console.log(imgItem)let formdata = new FormData()formdata.append(imgItem.name,imgItem.file)console.log(formdata)uni.uploadFile({url:'/api/uploadAvatar?sessionId='+uni.getStorageSync('sessionId'),method:'POST',formaData:formdata,success:(res)=> {console.log(res,JSON.parse(res.data))let data = JSON.parse(res.data)console.log('添加前:  ',this.forms.images)this.forms.images = [...this.forms.images,data.data.url]    console.log('添加后:  ',this.forms.images,data.data.url)}})})}

原因: uni.uploadFile()漏掉了2个必填项:

如官网所示,

name：文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
filePath：要上传文件资源的路径。
更多配置见官方文档：uni.uploadFile官方文档

handleSelectImage(files){console.log('select........',files)console.log(this.forms.images)files.tempFiles.map(imgItem =>{console.log(imgItem)let formdata = new FormData()formdata.append(imgItem.name,imgItem.file)console.log(formdata)uni.uploadFile({url:'/api/uploadAvatar?sessionId='+uni.getStorageSync('sessionId'),method:'POST',name:'file',  // 必填项filePath:imgItem.url, //必填项formaData:formdata,success:(res)=> {console.log(res,JSON.parse(res.data))let data = JSON.parse(res.data)console.log('添加前:  ',this.forms.images)this.forms.images = [...this.forms.images,data.data.url]console.log('添加后:  ',this.forms.images,data.data.url)}})})
}

filePath参数：

来自 @select选择文件后的回调参数tempFiles的tempFiles数组中每一个文件对象的url属性

name参数

默认是字符串"file"

解决uni-uploadFile上传图片丢失后缀名的问题相关推荐

uniapp云开发uniCloud.uploadFile上传图片文件后缀名丢失
原因简述:cloudPath属性写的不对基于uniCloud云开发,实现上传图片功能,发现能正常上传,但是上传的图片会是这种格式,没有后缀名:https://vkceyugu.cdn.bspapp. ...
uni-app uni.uploadFile上传图片前后端（java）详解
近日在使用uni.uploadFile上传图片时,碰到后端收到不到文件的问题,网上没有写uni-app java后端的处理实例,小程序到是有很多,但都是单文件上传,即使是多文件上传,也是采用一个for ...
mysql如何处理图片吗_如何解决mysql插入图片后缀名问题？
inventory是库存里边包括pic这个字段,现在要是先从inventory把图片选择出来,并插入record的pic中,但是插入之后图片的后缀名(jpg)没有了?如何解决?? 下面这个是inve ...
struts2接收文件全是后缀名tmp解决办法
有个朋友之前一直用SSM,后来用SSH开发项目,遇到一个问题在struts2接收上传文件的时候,发现所有接收的文件不对,后缀名还都是.tmp的,其实这个解决办法太简单. 文件确实都已经上传上来了.S ...
Windows10文件后缀名不显示·解决方法
Windows10文件后缀名不显示·解决方法第一步:Windows+E组合键(即打开此电脑) 第二步:勾选文件扩展名第一步:Windows+E组合键(即打开此电脑) Windows+E组合键(即打 ...
vue 打包后，后缀名为.woff等字体问题不能用解决办法
vue 打包后,后缀名为.woff等字体问题不能用解决办法参考文章: (1)vue 打包后,后缀名为.woff等字体问题不能用解决办法 (2)https://www.cnblogs.com/mogu ...
Mac打不开后缀名为txt文件，显示文本编码中文不适用的解决措施
Mac打不开后缀名为txt文件,显示文本编码中文不适用的解决措施问题: 未能打开文稿".txt".文本编码中文(GB 18030)不适用解决措施: 1.打开文本编辑器的偏好设置 ...
文件夹图标后缀名变成.ink的解决办法
问题描述文件夹甚至是我的电脑的后缀名变成.ink,导致用户无法打开文件夹或我的电脑. 问题分析用户操作失误修改文件夹或我的电脑扩展名: 后台木马程序恶意修改. 解决办法开始>运行>输 ...
计算机名称更改不生效,修改文件后缀名无效怎么办？Win7系统修改文件扩展名无效的解决方法...
我们经常需要在电脑中修改文件后缀名,而这些文件仅仅是通过后缀名来分别它们的不同.如果我们修改文件的后缀名发现无效,并没有修改为其它的格式,那么说明系统中文件的后缀名没有显示,我们需要将其显示再去修改. ...

解决uni-uploadFile上传图片丢失后缀名的问题

解决前:formdata filename属性无后缀

解决后，filename参数已有后缀，并且为文件名:

原因: uni.uploadFile()漏掉了2个必填项:

filePath参数：

name参数

解决uni-uploadFile上传图片丢失后缀名的问题相关推荐

最新文章

热门文章