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

清渡欢LL

已于 2022-02-22 11:05:01 修改

阅读量9k

点赞数

文章标签：前端 uni-app

于 2022-02-22 11:01:07 首次发布

本文链接：https://blog.csdn.net/qq_39246667/article/details/123062522

版权

本文记录了在使用uni-app的uni.uploadFile上传图片时遇到的后缀名丢失问题，导致后台服务器无法正确解析图片URL。解决方案是通过在uploadFile方法中添加缺失的`name`和`filePath`参数，确保filename包含完整文件名及后缀。修复后，文件上传成功，服务器返回的URL包含了正确的后缀名，图片得以正常显示。

摘要由CSDN通过智能技术生成

本次在使用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)
			}
		})
	})
}