ReactNative (Expo) 上传带有 UploadCare Chunking 问题的大文件

编程问答 2022-05-21

问题描述

我一直在尝试，但似乎无法通过 UploadCare 在我的 ReactNative Expo 应用程序中上传大文件。

小于 100mb 的较小文件大小我使用效果很好的直接上传 API。对于大于 100mb 的文件，您需要调用多种方法来上传文件。

  1. 调用多部分启动端点
  2. 将单个部分 (5mb) 上传到指定的 s3 网址
  3. 调用 multipart Complete

https://uploadcare.com/docs/upload-api/request-based/

这是我尝试过的，目前正在得到：

"content": "File size mismatch. Not all parts uploaded?","status_code": 400,

下面是我用来在 ReactNative 中上传文件的代码

const getChunk = (file,index,filesize,chunkSize) => {
  const start = chunkSize * index
  const end = Math.min(start + chunkSize,filesize)

  return file.slice(start,end)
}

const resp = await fetch(image.uri);
const blob = await resp.blob();
const uriParts = image.uri.split('.');
const ext = uriParts[uriParts.length - 1];
const filename = `file.${ext}`;

if (blob.size > 99000000) {
  multipartUpload(blob,filename);
} else {
  directUpload(image,filename);
}

const multipartUpload = async(blob,filename) => {
  try {
    const { uuid,parts } = await multipartStart(blob,filename);
    uploadParts(blob,parts,uuid);    
  } catch (error) {
    console.log(`Error - ${error}`)
  }  
}

const multipartStart = async(blob,filename) => {

  const body = new FormData
  body.append("UPLOADCARE_PUB_KEY","XXX")
  body.append("filename",filename)
  body.append("size",blob.data.size)
  body.append("content_type",blob.type)
  body.append("UPLOADCARE_STORE","auto")

  const response = await fetch("https://upload.uploadcare.com/multipart/start/?jsonerrors=1",{
    method: "POST",body,headers: {
      "Content-Type": "multipart/form-data"
    }
  })

  return response.json();
};

const uploadParts = async(blob,uuid) => {
  const CHUNK_SIZE = 5 * 1024 * 1024;
  const chunks = [];
  for (let i = 0; i < parts.length; i++) {
    chunks.push(getChunk(blob,i,blob.data.size,CHUNK_SIZE));
  }
  console.log(chunks);
  let completed = 0;
  for (let i = 0; i < parts.length; i++) {
    let endpoint = parts[i];
    axios(endpoint,{
      method: 'PUT',headers: {
        'Content-Type': blob.type
      },data: chunks[i]
    })
    .then(res => {
      if (res.status == 200) {
        completed++;
      }
      console.log('Parts uploaded: ',completed);
      if (completed == parts.length) {
        multipartComplete(uuid);
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
};

const multipartComplete = async(uuid) => {

  const body = new FormData
  body.append("UPLOADCARE_PUB_KEY","XXX")
  body.append("uuid",uuid)

  const response = await fetch("https://upload.uploadcare.com/multipart/complete/?jsonerrors=1",headers: {
      "Content-Type": "multipart/form-data"
    }
  })

  const result = await response.json();
  console.log(result);
};

 Expo CLI 4.1.4 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.16.3 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.4 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 14.4,DriverKit 20.2,macOS 11.1,tvOS 14.3,watchOS 7.2
    IDEs:
      Android Studio: 3.6 AI-192.7142.36.36.6392135
      Xcode: 12.4/12D4e - /usr/bin/xcodebuild
    npmPackages:
      expo: ^40.0.1 => 40.0.1 
      react: 16.13.1 => 16.13.1 
      react-dom: 16.13.1 => 16.13.1 
      react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2 
      react-native-web: ~0.13.12 => 0.13.14 
    npmGlobalPackages:
      expo-cli: 4.1.4
    Expo Workflow: managed

任何人的帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

axiosaxiosaxiosexporeact-nativereact-nativeuploadcare