j***@126.com
j***@126.com
  • 发布:2020-04-07 14:35
  • 更新:2024-09-04 14:13
  • 阅读:6067

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

分类:uni-app

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

2020-04-07 14:35 负责人:无 分享
已邀请:
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();  
        })  
    },
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

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

2***@qq.com

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

要回复问题请先登录注册