React Native（Expo）文件对象与 Javascript（jQuery）文件对象 - Blob/文件大小不同（YouTube 数据 API）

Posted 2023-02-24

【中文标题】React Native（Expo）文件对象与 Javascript（jQuery）文件对象 - Blob/文件大小不同（YouTube 数据 API）

【英文标题】：React Native(Expo) File object vs Javascript(jQuery) File object - Blob/File size differ (YouTube Data API)

【发布时间】：2021-09-23 06:30:06

【问题描述】：

我正在尝试在 React Native 中创建一个 File 对象，以使用该文件（视频）将其上传到 YouTube Data v3 API。我让我的应用程序在纯 javascript 中正常工作，我正试图让它在 React Native 中工作 - 上传部分工作但我无法在 React Native 中获取视频文件。

这是我使用 jQuery 在纯 JavaScript 中的工作代码：

function getVideoFile() 
        return $('#file').get(0).files[0];      
      

我只是使用 jQuery 获取视频文件（返回 File 对象）并将其发送到 API，然后上传没有问题。

到目前为止，这是我的 React Native：

let file = await fetch('./assets/video.mp4');
let videoFile = await file.blob();
var blob = videoFile.slice(0, videoFile.size, "video/mp4")
var f = new File([blob], "video.mp4", type: "video/mp4");

在 React Native 中上传到 YouTube 没有任何错误，但在 YouTube 上的“我的视频”页面中我得到了

Processing abandoned
The video could not be processed

我在 JavaScript 和 React Native 代码中看到的唯一区别是 File 对象 size 属性值。 JavaScript 中 File 对象的大小 (1570024) 比 React Native 中的大小 (3539) 大得多——它是同一个视频文件。有人可以解释为什么文件大小不同，因为我很难理解，我做错了什么，或者将 React Native 中的视频文件读入File 对象的正确方法是什么？

更新 1

我用纯 javascript 测试了我的 React Native 获取代码，它获得了合适的文件大小，上传的视频被 YouTube 成功处理。在我的 React Native 应用程序中，相同的函数通过获得更小的文件大小而表现不同。

async function getVideoFile()      
    let file = await fetch('video.mp4');
    let videoFile = await file.blob();
    return new File([videoFile], "video.mp4", type: "video/mp4");     

【参考方案1】：

我找到了解决方案！在 React Native 中，我首先需要使用 require 来获取正确的路径。

var path = require("./assets/video.mp4");
let response = await fetch(path);
var blob = await response.blob();      
var file = new File([blob], "video.mp4", type: "video/mp4");

由于某些奇怪的原因，fetch() 在我的 React Native 应用程序中总是返回 200 ok 状态，即使 url/文件不存在。

【讨论】：

太棒了，谢谢！