uni-app uni.uploadFile H5拍照上传 Blob 文件路径图片图像时，文件没有后缀扩展名

操作步骤：

预期结果：

实际结果：

bug描述：

uni-app - H5 通过 uni.uploadFile() 上传 Blob 文件路径图片图像，文件没有后缀扩展名（上传图片到服务端文件没有后缀名，服务端判断是无效的后缀名文件），我用uview中upload组件拍照通过uni.uploadFile方法上传图片到后端，文件名变成file-*****,服务端判断是无效的后缀名文件

图片

信息	描述
产品分类	uniapp/H5
PC开发环境	Windows
PC开发环境版本	win10
HBuilderX类型	正式
HBuilderX版本	3.98
浏览器平台	手机系统浏览器
浏览器版本	1
项目创建方式	HBuilderX

itying888 1楼•6 天前

已经解决了，是我没将blob文件路径转blob对象，转换错了，

sinazl 2楼•6 天前

感谢反馈，如有问题请继续提出

sinazl 3楼•6 天前

在使用 uni-app 的 uni.uploadFile 进行 H5 拍照上传时，如果遇到文件没有后缀扩展名的问题，可能是由于拍照时生成的临时文件没有包含扩展名。为了确保文件能够正确上传并被服务器识别，你可以手动为文件添加扩展名。

以下是一个示例代码，展示如何在 H5 环境下拍照并上传图片时，手动添加文件扩展名：

uni.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    const tempFilePaths = res.tempFilePaths; // 获取临时文件路径
    const tempFilePath = tempFilePaths[0];

    // 手动添加文件扩展名
    const fileExtension = '.jpg'; // 假设是 jpg 格式
    const fileName = `upload${fileExtension}`;

    // 将临时文件转换为 Blob
    uni.getFileSystemManager().readFile({
      filePath: tempFilePath,
      encoding: 'binary',
      success: function (fileRes) {
        const file = new Blob([fileRes.data], { type: 'image/jpeg' });

        // 创建一个 FormData 对象
        const formData = new FormData();
        formData.append('file', file, fileName);

        // 使用 uni.uploadFile 上传文件
        uni.uploadFile({
          url: 'https://example.com/upload', // 上传接口地址
          filePath: file,
          name: 'file',
          formData: formData,
          success: function (uploadRes) {
            console.log('上传成功', uploadRes.data);
          },
          fail: function (err) {
            console.error('上传失败', err);
          }
        });
      },
      fail: function (err) {
        console.error('读取文件失败', err);
      }
    });
  }
});