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

分类：uni-app

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

2020-04-07 14:35 负责人:无分享

8 个回复

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();  
        })  
    },

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

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

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

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

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 - 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

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);
}
});

2***@qq.com - 80后it男

真实有效
// #ifdef H5

  const imgBlob = await fetch(res.tempFilePaths[0]).then((r) => r.blob())  
  const imgFile = new File([imgBlob], res.tempFiles[0].name, { type: imgBlob.type })  
  let form = new FormData()  
  form.append('avatarfile', imgFile)  
  console.log(imgFile, '这个是什么样111111子')  

  // console.log(file)  
  // 正式将转好的File对象进行上传  
  uni.uploadFile({  
    url: `/api/Img`, //改为你的接口  
    name: 'avatarfile',  
    file: imgFile,  
    fileType: 'image',  
    success: (res) => {  
      userInfo.value.picAddress = res.data  
      console.log(res.data, '修改成功')  
    },  
    header: {  
      // 需要带的请求头，token等等  
      // 'content-type': 'multipart/form-data',  
    },  
  })  

  // #endif

要回复问题请先登录或注册

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

8 个回复

公告

相关问题

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

与内容相关的链接

8 个回复

公告

相关问题