如何在没有输入字段的情况下将视频文件上传到 S3？答案

【问题标题】：How to upload a video file to S3 without input field?如何在没有输入字段的情况下将视频文件上传到 S3？
【发布时间】：2020-10-12 23:10:18
【问题描述】：

我正在制作一个可以使用网络摄像头拍摄视频片段的 React 应用程序，然后我可以将视频文件上传到 S3。现在，我有一个下载按钮，可以从前端下载视频并保存在本地。然后后端会在本地系统中找到视频并上传到S3。我想把下载按钮替换为上传按钮，这样我就可以直接把视频上传到S3而不用下载到本地了。

我一直在互联网上搜索如何在不使用前端输入字段的情况下将文件上传到 S3，但我找不到任何东西。我可以使用任何依赖项或软件包来解决此问题吗？

前端：

import React from "react";
import ReactDOM from "react-dom";
import Webcam from "react-webcam";

const WebcamStreamCapture = () => {

const webcamRef = React.useRef(null);
const mediaRecorderRef = React.useRef(null);
const [capturing, setCapturing] = React.useState(false);
const [recordedChunks, setRecordedChunks] = React.useState([]);

const handleStartCaptureClick = React.useCallback(() => {
  setCapturing(true);
  mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
    mimeType: "video/webm"
  });
  mediaRecorderRef.current.addEventListener(
    "dataavailable",
    handleDataAvailable
  );
  mediaRecorderRef.current.start();
}, [webcamRef, setCapturing, mediaRecorderRef]);

const handleDataAvailable = React.useCallback(
  ({ data }) => {
    if (data.size > 0) {
      setRecordedChunks((prev) => prev.concat(data));
    }
  },
  [setRecordedChunks]
);

const handleStopCaptureClick = React.useCallback(() => {
  mediaRecorderRef.current.stop();
  setCapturing(false);
}, [mediaRecorderRef, webcamRef, setCapturing]);

const handleDownload = React.useCallback(() => {
  if (recordedChunks.length) {
    const blob = new Blob(recordedChunks, {
      type: "video/webm"
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    a.href = url;
    a.download = "react-webcam-stream-capture.webm";
    a.click();
    window.URL.revokeObjectURL(url);
    setRecordedChunks([]);
  }
}, [recordedChunks]);

return (
  <>
    <Webcam  
    audio={false} ref={webcamRef} />
    {capturing ? (
      <button onClick={handleStopCaptureClick}>Stop Capture</button>
    ) : (
      <button onClick={handleStartCaptureClick}>Start Capture</button>
    )}
    {recordedChunks.length > 0 && (
      <button onClick={handleDownload}>Download</button>
    )}
  </>
);
};

   ReactDOM.render(<WebcamStreamCapture />, document.getElementById("root"));

后端：

const fs = require('fs');
const AWS = require('aws-sdk');

// Enter copied or downloaded access ID and secret key here
const ID = '';
const SECRET = '';

// The name of the bucket that you have created
const BUCKET_NAME = '';

const s3 = new AWS.S3({
    accessKeyId: ID,
    secretAccessKey: SECRET
});

const uploadFile = (fileName) => {
    // Read content from the file
    const fileContent = fs.readFileSync(fileName);

    // Setting up S3 upload parameters
    const params = {
        Bucket: BUCKET_NAME,
        Key: 'footage.webm', // File name you want to save as in S3
        Body: fileContent
    };

    // Uploading files to the bucket
    s3.upload(params, function(err, data) {
        if (err) {
            throw err;
        }
        console.log(`File uploaded successfully. ${data.Location}`);
    });
};

uploadFile('react-webcam-stream-capture.webm'); // the file name in the parameter needs to exist inside the local machine.

您可以运行 'npm start' 来运行前端和 'node' 来运行后端。

【问题讨论】：

标签： reactjs amazon-web-services amazon-s3 file-upload

【解决方案1】：

您可以generate a presigned URL 并使用该 URL 通过 HTTP 请求在前端上传您的文件。

这样，您可以：

向后端发出请求以在前端获取预签名 URL
在前端使用后端提供的 URL 发出 PUT HTTP 请求，以上传您的文件

【讨论】：