Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UploadFile 在H5中,无法正确上传文件 或 不是二进制上传文件 #15571

Open
jiankian opened this issue Apr 22, 2024 · 0 comments
Labels
F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x

Comments

@jiankian
Copy link

相关平台

H5

复现仓库

https://gitee.com/jiankian/AnnTaroNutUI-Test.git
浏览器版本: Chrome 123.0.6312.123
使用框架: React

复现步骤

Taro.chooseImage({
    success(res) {
        console.log('Taro.chooseImage res', res) const uploadTask = Taro.uploadFile({
            url: 'http://127.0.0.1:1333/api/app//user_center/attachment/upload',
            filePath: res.tempFilePaths[0],
            // @ts-ignore
            fileType: res.tempFiles[0].type,
            header: {
                'Content-Type': 'multipart/form-data',
                'Ann-Token': 'eyJhbGciOiJIUzI1NiJ9.eyJ1aWQiOjIsImlwIjoiMTI3LjAuMC4xIiwiZXhwIjoxNzE4ODc0ODIwfQ.3l--LsDxQOMR3MJ6QbHxhMIAz30vWXwvQkKstuhfEKw',
            },
            formData: {
                'formData1': 'formData1_value'
            },
            name: 'file',
            fileName: res.tempFiles[0].originalFileObj ? .name,
            withCredentials: false,
            // H5
            success(response: {
                errMsg: any;
                statusCode: number;
                data: string
            }) {
                console.log(' Taro.uploadFile success response', response);

            },
            fail(e: any) {
                console.log(' Taro.uploadFile fail', e);
            },
            complete(e: any) {
                console.log('beforeXhrUpload Taro.uploadFile complete', e);
            },
        }) uploadTask.progress((res: {
            progress: any totalBytesSent: any totalBytesExpectedToSend: any
        }) = >{
            console.log(' Taro.uploadFile uploadTask progress', res);
        })
    }
})

期望结果

使用二进制上传文件

实际结果

服务端无法获取文件
使用Ant Design的Web上传是正常的,请求载荷如下:
725af1ade965428407a33030c608398

而使用Taro.uploadFile上传,浏览器调试控制台显示的不是二进制上传
image
而相同的代码,在微信小程序端 是正确上传的,而同样的服务端接口,我使用Ant Design、Element-UI等上传组件上传都是正常的。

环境信息

👽 Taro v3.6.27


  Taro CLI 3.6.27 environment info:
    System:
      OS: Windows 11 10.0.22631
    Binaries:
      Node: 16.20.2 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
      npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.27 => 3.6.27
      @tarojs/components: 3.6.27 => 3.6.27
      @tarojs/helper: 3.6.27 => 3.6.27
      @tarojs/plugin-framework-react: 3.6.27 => 3.6.27
      @tarojs/plugin-html: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-alipay: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-h5: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-jd: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-qq: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-swan: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-tt: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-weapp: 3.6.27 => 3.6.27
      @tarojs/react: 3.6.27 => 3.6.27
      @tarojs/runtime: 3.6.27 => 3.6.27
      @tarojs/shared: 3.6.27 => 3.6.27
      @tarojs/taro: 3.6.27 => 3.6.27
      @tarojs/taro-loader: 3.6.27 => 3.6.27
      @tarojs/webpack5-runner: 3.6.27 => 3.6.27
      babel-preset-taro: 3.6.27 => 3.6.27
      eslint-config-taro: 3.6.27 => 3.6.27
      react: ^18.0.0 => 18.2.0


补充信息

和其它对比

@taro-bot2 taro-bot2 bot added F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x labels Apr 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x
Projects
Status: API
Development

No branches or pull requests

1 participant