uni.uploadFile 在h5下上传图片的时候,用第三方插件压缩图片返回的blob在上传的时候,无法获取文件名后缀。导致图片无法上传或者上传后返回的文件链接也是没有扩展名的。
j***@126.com
- 发布:2020-04-07 14:35
- 更新:2023-08-08 13:47
- 阅读:4949
uni.uploadFile 在h5下上传blob文件链接的时候无法获取文件名后缀
分类:uni-app
我也是遇到这个问题,不知道怎么搞
同样的问题,解决之后,望分享一下
7***@qq.com - fankefu
@uniAD管理员 uni.uploadFile 在h5下上传blob文件链接的时候无法获取文件名后缀和修改后缀名,有解决方法吗?
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();
})
},
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