nut-uploader组件使用自定义上传方式(before-xhr-upload)拿不到真实的文件名

[CNBroderick]

NutUI scenes（nutui 场景）

小程序（@nutui/nutui-taro）

NutUI-vue version（nutui-vue 版本）

4.0.9

Vue version（vue 版本）

3.3.4

Operating environment（运行环境）

dev:weapp

Citation method（引用方式）

npm

Node version（node 版本）

19.0.0

Browser and its version（浏览器及其版本）

Edge(114.0.1823.43)

System and its version（系统及其版本）

Windows(11)

Taro environmental information（taro 环境信息）

  Taro CLI 3.6.7 environment info:
    System:
      OS: Windows 10 10.0.22621
    Binaries:
      Node: 19.0.0 - D:\Program Files (x86)\nodejs\node.EXE
      npm: 8.19.2 - D:\Program Files (x86)\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.7 => 3.6.7
      @tarojs/components: 3.6.7 => 3.6.7
      @tarojs/helper: 3.6.7 => 3.6.7
      @tarojs/plugin-framework-vue3: 3.6.7 => 3.6.7
      @tarojs/plugin-html: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-alipay: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-h5: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-jd: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-qq: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-swan: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-tt: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-weapp: 3.6.7 => 3.6.7
      @tarojs/runtime: 3.6.7 => 3.6.7
      @tarojs/shared: 3.6.7 => 3.6.7
      @tarojs/taro: 3.6.7 => 3.6.7
      @tarojs/webpack5-runner: 3.6.7 => 3.6.7
      babel-preset-taro: 3.6.7 => 3.6.7
      eslint-config-taro: 3.6.7 => 3.6.7

Reproduction link（重现链接）

codesandbox.io

Steps to reproduce（重现步骤）

使用nut-uploader组件
使用自定义上传方式(before-xhr-upload)
打印options.taroFilePath

What is expected?（期望的结果是什么？）

fileList 中的name 应该是真实的文件名称。

{
  "fileList": [
    {
      "status": "ready",
      "message": "等待上传",
      "uid": "1686798880924",
      "name": "http://tmp/NyLZc9Oqu5PL0bf7b2e95831cc082c6d848b4550d829.png",
      "url": "http://tmp/NyLZc9Oqu5PL0bf7b2e95831cc082c6d848b4550d829.png",
      "type": "image",
      "path": "http://tmp/NyLZc9Oqu5PL0bf7b2e95831cc082c6d848b4550d829.png",
      "percentage": 0,
      "formData": {}
    }
  ]
}

What is actually happening?（实际的结果是什么？）

fileList 中的name 实际上是文件路径。

Remarks（补充说明）

您好，此问题与问题 2278是相同问题：
#2278

因为 2278 已经关闭，所以新开了一个问题。

能否将 Taro.chooseMedia 替换 Taro.chooseMessageFile 实现：

Taro.chooseMessageFile({
    count: 1,
    success: (result) => console.log('chooseMessageFile', result),
})

参考：

1. 微信小程序文档
2. Taro文档
3. Uploader代码地址

选择后回调函数内容

{
  "errMsg": "chooseMessageFile:ok",
  "tempFiles": [
    {
      "name": "QQ截图20230613085524.png",
      "size": 2389391,
      "time": 1686617738,
      "path": "http://tmp/VoSkJ4MdMXtS0bf7b2e95831cc082c6d848b4550d829.png",
      "type": "image"
    }
  ]
}

[CNBroderick]

当前的限制：

Taro.chooseMedia：

1. 手机端只支持上传图片和视频。电脑端可以任意类型。
2. 手机和电脑的路径不同
   • 手机的路径为：wxfile://temp/xxxxxxxxxxx.png
   • 电脑的路径为：wxfile://temp/2026年06月06日改动内容.txt

Taro.chooseMessageFile

• 手机端：支持微信内的聊天文件
• 电脑端：无法使用

看样子这个也只能作为补充项，而无法替代。

[CNBroderick]

能否在Uploader 文档 Methods 表格内加一行 chooseImage 方法说明：

文档位置：src/packages/__VUE/uploader/doc.taro.md

方法名	说明	参数	返回值
chooseImage	手动让用户选择文件上传	-	-

因为手动调用选择文件方法并添加 至 v-model:file-list 后 执行 submit 方法，并没有开始上传。

在阅读源代码之后发现，需要将其再加入
let uploadQueue: Promise<UploaderTaro>[] = [];
才可以。

      async addFile() {
        const system = Taro.getSystemInfoSync().system.toLowerCase()
        const is_pc = system.indexOf('windows') >= 0 || system.indexOf('mac') >= 0
        if (!is_pc) {
          Taro.chooseMessageFile({
            count: this.available_upload_count,
            type: 'all',
            success: (result) => {
              for (let file of result.tempFiles) {
                this.uploading_list.push({
                  uid: new Date().getTime().toString(),
                  name: file.name,
                  url: file.path,
                  formData: {
                    token: this.token,
                    fileName: file.name,
                  },
                  percentage: 0,
                })
              }
              this.$refs.uploadRef.submit()
            },
          })
        } else {
          Taro.chooseMedia({
            count: this.available_upload_count,
            type: 'all',
            sizeType: ['original'],
            success: (result) => {
              for (let file of result.tempFiles) {
                this.uploading_list.push({
                  uid: new Date().getTime().toString(),
                  name: file.tempFilePath,
                  url: file.tempFilePath,
                  formData: {
                    token: this.token,
                  },
                  percentage: 0,
                })
              }
              this.$refs.uploadRef.submit()
            },
          })
        }
      },

  <nut-uploader ref="uploadRef"  v-model:file-list="uploading_list" />

所以最后选择了直接调用：

this.$refs.uploadRef.chooseImage()

[eiinu]

「手动调用选择文件方法」具体是什么使用场景呢？
如果直接从外部调用了组件内的 chooseImage 方法，那应该不需要控制 file-list 呀🤔

[CNBroderick]

「手动调用选择文件方法」具体是什么使用场景呢？ 如果直接从外部调用了组件内的 chooseImage 方法，那应该不需要控制 file-list 呀🤔

没错，我起初是手动将文件加入 file-list 然后调用 submit 方法，结果没反应，原因是得需要加入私有属性的
let uploadQueue: Promise<UploaderTaro>[] = [];
里后调用 submit 方法才可以。

所以我后来直接用的 文档里没写的方法 chooseImage ，没有用之前的。

[eiinu]

「手动调用选择文件方法」具体是什么使用场景呢？ 如果直接从外部调用了组件内的 chooseImage 方法，那应该不需要控制 file-list 呀🤔

没错，我起初是手动将文件加入 file-list 然后调用 submit 方法，结果没反应，原因是得需要加入私有属性的 let uploadQueue: Promise<UploaderTaro>[] = []; 里后调用 submit 方法才可以。

所以我后来直接用的 文档里没写的方法 chooseImage ，没有用之前的。

已提交，下次发版时会更新网站

[BG7ZAG]

h5端有个问题，就是before-xhr-upload中打印option没有文件后缀名：