文件输入大小问题(通过Netlify无服务器函数将视频上传到Cloudinary)

huangapple go评论73阅读模式
英文:

Problem with file input size (video upload to cloudinary through netlify serverless functions)

问题

我在我的React应用程序中遇到了将视频文件上传到Cloudinary的问题,该应用程序部署在Netlify上。在我的应用程序中,我有一个带有表单的React页面,该表单将数据发送到我的API。我的API处理与Netlify函数的HTTP请求(使用Axios),然后使用无服务器函数调用Cloudinary节点API来存储视频文件。问题发生在当我将数据从我的API传递到无服务器函数时,我得到了“错误:流体体太大”,因为视频超出了Netlify函数的有效载荷限制(6mb)。我需要压缩文件吗?像这样做可以吗(前端页面 -> api.js -> 无服务器函数)?感谢你们每天提供的所有帮助,这对我帮助很大!

我有的文件和错误:

page.jsx

const formHandler = async (formValues) => {
    try {
      ...
      const res = await addExercise(formValues);
      ...
    } catch (error) {
      console.log("错误 ", 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);
  }
};

无服务器函数(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)
    return {
      statusCode: 400,
      body: JSON.stringify(error)
    }
  }
}

错误:
文件输入大小问题(通过Netlify无服务器函数将视频上传到Cloudinary)

英文:

I'm having issues uploading video files to cloudinary in my react app, deployed in netlify. In my App I have a react page with a form that sends the data to my API. My API handles the HTTP requests to my netlify functions (using Axios), and then with the serverless function I call the cloudinary node API to store the video file. The problem happens when I'm passing the data from my API to the serverless function, I'm getting "Error: Stream body too big", because the video exceeds the payload limit of netlify functions (6mb). Do I have to compress the file? It's okay to do it like this (frontend page -> api.js -> serverless function)? Thanks for all the help you guys provide everyday, it helped me a lot!

Files that I have and the error:

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);
  }
};

serverless function (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)
    }
  }
}

Error:
文件输入大小问题(通过Netlify无服务器函数将视频上传到Cloudinary)

答案1

得分: 1

Netlify Serverless functions are built on top of AWS Lambda functions so there is a hard limit to the size of the file and the amount of time it takes to run the code in the file. You didn't mention the size of your video, but the video does take longer to upload, and even if you are within the 1GB size limit, you may be exceeding the 10-second processing limit. Your video likely already has been compressed, so compression is not a viable option, and decompressing it in the serverless function would probably exceed the time limit. Link to the source.

If you're uploading a large file, like a video, from front-end code, consider using the Upload Widget with an unsigned preset. Here's a link to a code sandbox showing how to create and use the upload widget in React: Code Sandbox Link. You will need to add your Cloudinary cloudname and an unsigned preset to make this work. You'll find instructions for creating unsigned presets here: Cloudinary Upload Presets Documentation. Image Link

英文:

Netlify Serverless functions are built on top of AWS Lambda functions so there is a hard limit to the size of the file and the amount of time it takes to run the code in the file. You didn't mention the size of your video, but the video does take longer to upload, and even if you are within the 1GB size limit, you may be exceeding the 10-second processing limit. Your video likely already has been compressed, so compression is not a viable option, and decompressing it in the serverless function would probably exceed the time limit. https://www.netlify.com/blog/intro-to-serverless-function.
If you're uploading a large file, like a video, from front-end code, consider using the Upload Widget with an unsigned preset. Here's a link to a code sandbox showing how to create and use the upload widget in React: https://codesandbox.io/s/cld-uw-uymkb. You will need to add your Cloudinary cloudname and an unsigned preset to make this work. You'll find instructions for creating unsigned presets here: https://cloudinary.com/documentation/upload_presets
文件输入大小问题(通过Netlify无服务器函数将视频上传到Cloudinary)

huangapple
  • 本文由 发表于 2023年2月7日 02:46:05
  • 转载请务必保留本文链接:https://go.coder-hub.com/75365396.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定