j***@126.com
j***@126.com
  • 发布:2020-04-07 14:35
  • 更新:2023-08-08 13:47
  • 阅读:4949

uni.uploadFile 在h5下上传blob文件链接的时候无法获取文件名后缀

分类:uni-app

uni.uploadFile 在h5下上传图片的时候,用第三方插件压缩图片返回的blob在上传的时候,无法获取文件名后缀。导致图片无法上传或者上传后返回的文件链接也是没有扩展名的。

2020-04-07 14:35 负责人:无 分享
已邀请:
j***@126.com

j***@126.com (作者)

  • Mr绍君

    亲,问题解决了么?我也遇到这个问题


    2020-05-30 10:14

  • 1***@qq.com

    我也遇到这个问题了,经过测试已经解决了,你少传了2个参数,name和filePath,这两个都是必填项

    链接:https://blog.csdn.net/qq_39246667/article/details/123062522?spm=1001.2014.3001.5502

    我记录的很详细了,可以进去看看


    2022-02-22 11:10

  • 9***@qq.com

    回复 1***@qq.com: 你这个办法之所以成功解决了和name和filePath没有任何关系,真正的原因是你从表单里把自定义的值带过去给后端接了,如果后端依旧还是从接到的file里获取文件名根本没办法解决这个问题


    2023-03-08 14:27

  • 2***@qq.com

    问题解决了吗


    2023-05-04 11:18

  • 2***@qq.com

    回复 1***@qq.com: 那两个属性都有的,也是拿不到


    2023-05-04 11:19

3***@qq.com

3***@qq.com

我也是遇到这个问题,不知道怎么搞

  • 1***@qq.com

    https://blog.csdn.net/qq_39246667/article/details/123062522?spm=1001.2014.3001.5502

    我也遇到这个问题,看这篇博客


    2022-02-22 11:11

h***@126.com

h***@126.com

我也遇到这样的问题, app端正确。前端后端都正常。 H5页面提交完和一楼一样 blob 然后没有文件后缀名称。

1***@163.com

1***@163.com

同样的问题,解决之后,望分享一下

  • 1***@qq.com

    https://blog.csdn.net/qq_39246667/article/details/123062522?spm=1001.2014.3001.5502

    看下是不是因为这个原因,少传了2项属性值


    2022-02-22 11:11

7***@qq.com

7***@qq.com - fankefu

@uniAD管理员 uni.uploadFile 在h5下上传blob文件链接的时候无法获取文件名后缀和修改后缀名,有解决方法吗?

  • 1***@qq.com

    少传了2项配置,https://blog.csdn.net/qq_39246667/article/details/123062522?spm=1001.2014.3001.5502

    看看能不能解决你的问题


    2022-02-22 11:12

1***@qq.com

1***@qq.com

uni.uploadFile 这个函数在h5上传的时候有巨坑,无法自定义上传文件的后缀,而且会自动补充一个不带后缀的文件名,我使用axios重写了blob链接上传的逻辑才解决,以下是我的代码,请大家参考:

  
uploadFile(url, filePath, data) {  
		let token = uni.getStorageSync('token');  
		return new Promise((resolve, reject) => {  
			const blobUrl = filePath  
			// 通过XMLHttpRequest对象将Blob链接转换为Blob对象  
			const xhr = new XMLHttpRequest();  
			xhr.open('GET', blobUrl);  
			xhr.responseType = 'blob';  
			xhr.onload = () => {  
				var blob = xhr.response;  
				var ext = blob.type.split('/').pop(); // 获取文件的后缀  
				const file = new File([xhr.response], 'filename.'+ext, {type: blob.type});  
				  
				// 创建FormData对象并将文件和其他参数添加到其中  
				const formData = new FormData();  
				formData.append('file', file);  
				  
				Object.keys(data).forEach(key => {  
					console.log(key, data[key]);  
					formData.append(key, data[key]);  
				});  
				  
				  
				// 使用axios上传文件  
				axios.post(url, formData, {  
					headers: {  
						'Token'      : token,  
						'Content-Type': 'multipart/form-data'  
					}  
				}).then(response => {  
					resolve(response.data)  
				}).catch(error => {  
					reject(error)  
				});  
			};  
			xhr.send();  
		})  
	},
2***@qq.com

2***@qq.com

遇到同样问题,我处理办法是加file参数。把blob本地临时地址转file文件对象,file文件里必须要有name参数
uni.uploadFile({
url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
file:file,//对象必须有name.
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
console.log(uploadFileRes.data);
}
});

要回复问题请先登录注册