s3文件上传-不适用于视频-React / Meteor-AWS-SDK

如何解决s3文件上传-不适用于视频-React / Meteor-AWS-SDK

在我的react / meteor项目中将mp4文件上传到s3存储桶时出现问题。它适用于其他类型的文件（mp3，图像），但不适用于视频。我没有收到任何错误，但是当我尝试读取上载的文件时不起作用。

这是我的客户代码：

import React from "react";
import { Meteor } from "meteor/meteor";
import PropTypes from "prop-types";
import { types } from "../../../utils/constants/types";

const FileUpload = ({ fileType,type,typeId,subtype,setFileName }) => {
  const handleUpload = event => {
    event.preventDefault();
    const file = event.target.files[0];
    const fileExtension = file.type;
    var reader = new FileReader();
    reader.onload = function () {
      Meteor.call(
        "uploadFile",fileExtension,reader.result,(err,result) => {
          if (err) {
            console.log(err);
          } else {
            setFileName(result);
          }
        }
      );
    };
    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input name="Uploader" onChange={handleUpload} type="file" />
    </div>
  );
};

在服务器端有我的流星方法：

Meteor.methods({
  uploadFile: async function (fileType,data,typeId) {
    let extension;
    let contentType = fileType;

      if (fileType.includes("jpeg") || fileType.includes("jpg")) {
        extension = "jpg";
      } else if (fileType.includes("png")) {
        extension = "png";
      } else if (fileType.includes("mp4")) {
        extension = "mp4";
      } else if (fileType.includes("audio/mpeg")) {
        contentType = "video/mp4";
        extension = "mp3";
      } else if (fileType.includes("pdf")) {
        extension = "pdf";
      } else {
        throw new Meteor.Error("format-error","Only authorized format");
      }

      const random = Random.id();
      const key = `random.${extension}`;

      const buf =
        extension !== "mp4"
          ? Buffer.from(data.replace(/^data:image\/\w+;base64,/,""),"base64")
          : data;

      const config = {
        Bucket: bucketName,Key: key,Body: buf,ContentType: contentType,ACL: "public-read",};

      if (extension !== "mp4") {
        config.ContentEncoding = "base64";
      }
      const uploadResult = await s3.upload(config).promise();
      return uploadResult.Location;

  },});

我认为这可能是由于阅读器无法正确管理视频文件而引起的，但是我有点迷失了。任何输入将不胜感激。谢谢。

解决方法

我想问一下，因为我看到您的代码非常复杂。为什么要通过服务器上传文件？

我认为将文件从客户端直接推送到S3效率更高。如果您有兴趣了解这个概念（https://github.com/activitree/s3up-meta），请查看我正在维护的这个程序包。它是对几年前经过测试的较旧软件包的重新编写。上载由Meteor服务器签名，但由客户端上载。您不想让套接字/光纤忙于文件上传，而每次上传都有大量数据（有关上传状态的数据）。您可能希望所有这些都在用户/客户端上。

要注意的另一件事是在存储桶/管理/生命周期中设置AbortIncompleteMultipartUpload的重要性。这是您S3大小可能不受控制地增长的地方。

最后，当我上传视频时，我只是上传了文件（从输入类型文件接收）。看起来像这样：

video: File
   lastModified: 1573722339000
   lastModifiedDate: Thu Nov 14 2019 13:05:39 GMT+0400 (Gulf Standard Time) {}
   name: "IMG_7847.MOV"
   size: 20719894
   type: "video/quicktime"
   webkitRelativePath: ""

我确实使用其他助手来确定文件（并限制允许上传的时间长度）和文件类型。

您可以在上传或/和激活S3端的CloudWatch时监视服务器端的错误，以查看发生故障的地方。