uni-app uni.uploadFile 上传报错

uni-app uni.uploadFile 上传报错

项目 内容
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10企业版
HBuilderX类型 正式
HBuilderX版本号 4.87
浏览器平台 Chrome
浏览器版本 143.0.7499.170（正式版本）
项目创建方式 HBuilderX

示例代码

uni.chooseImage({
  count: 1,
  sizeType: ['compressed'],
  sourceType: ['camera'],
  success: (chooseImageRes) => {
    console.log('上传');
    var extensions = that.getFileType(chooseImageRes.tempFiles[0].name)
    var fileKey = that.configData.uploadDir + that.newGuid() + "." + extensions;
    var fileName = chooseImageRes.tempFiles[0].name;
    imageConversion.compressAccurately(chooseImageRes.tempFiles[0], { size: 200, type: chooseImageRes.tempFiles[0].type, })
      .then(res => {
        that.uploadOss(fileName, fileKey, res)
      })
      .catch(e => {
        console.log(e)
      })
  }
});
uni.uploadFile({
  url: this.configData.host,
  file: file, //要上传文件资源的路径
  name: 'file',
  header: {
    'Content-Encodeing': 'UTF-8',
    'Cache-Control': 'no-cache',
    'x-oss-storge-class': 'Standard',
    'x-oss-object-acl': 'private'
  },
  formData: {
    key: fileKey,
    policy: this.configData.policy,
    OSSAccessKeyId: this.configData.ossAccessKeyId,
    signature: this.configData.signature,
    success_action_status: '200',
    callback: this.configData.callback,
  },
  success: res => {

更多关于uni-app uni.uploadFile 上传报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

该问题请在专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

您好，根据您提供的代码和报错信息，结合官方文档与常见踩坑案例，问题基本可以定位在 “把 imageConversion 压缩后得到的 Blob 对象直接当成 file 参数传给 uni.uploadFile” 这一环节。 HBuilderX 4.87 并没有修改 uploadFile 的底层实现，而是 App/H5 各端对 file 参数的类型校验更加严格，导致之前“看似能跑”的写法在新版本暴露出问题。
下面给出 各端的正确写法 与 排查/验证步骤，您按对应平台调整即可解决。

  1. 先确认运行平台

运行端 是否允许直接传 Blob 正确做法

App-Vue3 ❌ 只能传本地临时路径（filePath）

App-Vue2 ❌ 同上

H5 ✅（需用 files 参数） 把 Blob → File 后放到 files 数组

各家小程序 ❌ 只能传本地临时路径（filePath）

  1. 各端修正示例 ▎App 端（含真机、模拟器） // 1. 把压缩后的 Blob 保存为本地临时文件
    uni.saveFile({
    tempFilePath: URL.createObjectURL(blob), // blob 来自 imageConversion
    success: ({ savedFilePath }) => {
    // 2. 用 filePath 上传
    uni.uploadFile({
    url: this.configData.host,
    filePath: savedFilePath,
    name: ‘file’,
    formData: { … },
    success: (res) => { /* … */ }
    });
    }
    }); ▎H5 端 // 1. Blob → File
    const uploadFile = new File([blob], fileName, { type: blob.type });

// 2. 使用 files 参数
uni.uploadFile({
url: this.configData.host,
files: [{ name: ‘file’, file: uploadFile }],
formData: { … },
success: (res) => { /* … */ }
});

  1. 快速验证

在 uni.uploadFile 之前 console.log(typeof file, file instanceof Blob) • 如果打印 object true → 说明您当前传的是 Blob，需要按上面改写。
改写后仍报错，请补充： • 运行端（App-Android / App-iOS / H5 / 小程序） • imageConversion 版本号 • 真机运行日志（adb logcat 或 Xcode log）

  1. 参考文档

uni.uploadFile 官方文档
uni.saveFile 官方文档

按以上方式调整后即可消除 “uploadFile:fail file error” 报错。如仍有问题，欢迎继续补充信息。

更多关于uni-app uni.uploadFile 上传报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


参考这个 issue

根据你提供的代码片段，报错原因主要有以下几点：

  1. 调用时机错误：uni.uploadFile 放在了 uni.chooseImage 外部，而 chooseImage 是异步的，上传时会先执行，此时 file、fileKey 等变量尚未定义（undefined），导致上传参数无效。

  2. 变量作用域问题：fileKey、fileName 定义在 chooseImage 的 success 内部，uni.uploadFile 无法访问它们，会报 fileKey is not defined 或传空值。

  3. 参数缺失：uni.uploadFile 的 file 直接写 file，但并未定义。应该使用 imageConversion.compressAccurately 返回的结果 res（Blob 对象），直接传入 file: res 即可（H5 支持 Blob）。

  4. Header 拼写错误：'Content-Encodeing' 应改为 'Content-Encoding'，但 OSS 对象存储通常不需要此字段，可删除。

  5. 未处理选择图片失败：chooseImage 缺少 fail 回调，若拍照取消或失败，后续操作不可控。

正确的代码结构（将上传逻辑移到压缩成功回调内）：

uni.chooseImage({
  count: 1,
  sizeType: ['compressed'],
  sourceType: ['camera'],
  success: (chooseImageRes) => {
    const tempFile = chooseImageRes.tempFiles[0];
    const extensions = that.getFileType(tempFile.name);
    const fileKey = that.configData.uploadDir + that.newGuid() + "." + extensions;
    const fileName = tempFile.name;

    imageConversion.compressAccurately(tempFile, { size: 200, type: tempFile.type })
      .then(res => {
        // 压缩成功后再上传
        uni.uploadFile({
          url: that.configData.host,
          file: res, // 直接传入 Blob
          name: 'file',
          header: {
            'Cache-Control': 'no-cache',
            'x-oss-storge-class': 'Standard',
            'x-oss-object-acl': 'private'
          },
          formData: {
            key: fileKey,
            policy: that.configData.policy,
            OSSAccessKeyId: that.configData.ossAccessKeyId,
            signature: that.configData.signature,
            success_action_status: '200',
            callback: that.configData.callback,
          },
          success: (uploadRes) => {
            console.log('上传成功', uploadRes);
          },
          fail: (err) => {
            console.error('上传失败', err);
          }
        });
      })
      .catch(e => {
        console.error('压缩失败', e);
      });
  },
  fail: (err) => {
    console.error('选择图片失败', err);
  }
});
回到顶部