reactjs 文件输入大小问题(通过Netlify无服务器功能将视频上传到cloudinary)

r1wp621o  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(291)

我在部署于netlify的react应用中将视频文件上传到cloudinary时遇到问题。在我的应用中,有一个react页面,其中包含将数据发送到我的API的表单。我的API负责处理对netlify函数的HTTP请求(使用Axios),然后使用无服务器函数调用cloudinary节点API来存储视频文件。我将数据从API传递到无服务器函数时,收到“Error:流体太大”,因为视频超过了netlify函数的负载限制(6 mb)。我必须压缩文件吗?这样做可以吗(前端页面-〉api.js -〉无服务器函数)?谢谢你们每天提供的所有帮助,这对我帮助很大!
我拥有的文件和错误:
page.jsx

const formHandler = async (formValues) => {
    try {
      ...
      const res = await addExercise(formValues);
      ...
    } catch (error) {
      console.log("error ", error);
    }
  };

api.js

import { instance } from "./instance";
...

 export const addExercise = async (data) => {
  try {
    const reader = new FileReader();
    reader.readAsDataURL(data.exerciseVideo[0]);
    reader.onloadend = async () => {
      const cloudVideo = reader.result;
      const cloudinaryResponse = await instance.post("upload-exerciseVideo", { cloudVideo });
      ...
    }
  } catch (error) {
    console.log("error", error);
  }
};

无服务器功能(upload-exerciseVideo.js)

import cloudinary from '../src/config/cloudinary';

export const handler = async (event, context) => {
  try {
    const data = JSON.parse(event.body);
    const { cloudVideo } = data;

    const cloudinaryRequest = await cloudinary.uploader
      .upload(cloudVideo, {
        resource_type: "video",
        upload_preset: "z9qxfc6q"
      });
    ...
    } catch (error) {
    
    console.log('error', error)
    return {
      statusCode: 400,
      body: JSON.stringify(error)
    }
  }
}

错误:x1c 0d1x

z2acfund

z2acfund1#

Netlify Serverless函数是基于AWS Lambda函数构建的,因此对文件大小和运行文件中代码所需的时间有严格限制。您没有提到视频的大小,但上传视频确实需要更长的时间,即使您在1GB的大小限制内,你可能超过了10秒的处理限制。你的视频可能已经被压缩了,所以压缩不是一个可行的选择,并且在无服务器函数中解压缩它可能会超过时间限制。https://www.netlify.com/blog/intro-to-serverless-function。如果你从前端代码上传一个大文件,比如视频,考虑使用带有未签名预设的Upload Widget。下面是一个代码沙盒链接,展示了如何在React中创建和使用Upload Widget:https://codesandbox.io/s/cld-uw-uymkb。你需要添加你的Cloudinary cloudname和一个未签名的预设来实现这个功能。你可以在这里找到创建未签名预设的说明:https://cloudinary.com/documentation/upload_presets

相关问题