无法使用节点 js 将视频上传到兔子流

Question

我正在尝试使用 Axios 使用 node.js 将视频上传到兔子流 API，但它不起作用。我正在应用相同的逻辑来获取、删除视频，它也适用于更改名称和更改分辨率，并且在上传时我收到了 400 条回复。在兔子流仪表板中，每次我发送请求时都会创建视频，但在该视频上传失败之后。请帮助解决问题。

后端代码：

const upload = multer();
VideoRouter.post("/upload", upload.single("video"), uploadVideo);

export const uploadVideo = async (req, res) => {
  // console.log(req.body, req.file);

  const optionsToCreateVideo = {
    method: "POST",
    url: `http://video.bunnycdn.com/library/${process.env.VIDEO_LIBRARY_ID}/videos`,
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      AccessKey: process.env.BUNNY_API_KEY,
    },
    data: JSON.stringify({ title: req.body.name }),
  };

  await axios
    .request(optionsToCreateVideo)
    .then((response) => {
      const video_id = response.data.guid;

      axios
        .put(
          `http://video.bunnycdn.com/library/${process.env.VIDEO_LIBRARY_ID}/videos/${video_id}`,
          {
            headers: {
              AccessKey: process.env.BUNNY_API_KEY,
            },
            body: req.file ,
          }
        )
        .then(function (response) {
          res.status(200).json(response);
        })
        .catch(function (error) {
          // console.error("error", error);
          res.status(400).json(error);
        });
    })
    .catch((error) => {
      console.log(error.message);
      res.status(200).json({ error: "failed!" });
    });
};

处理视频上传的前端代码：

const handleVideoChange = (e) => {
    setVideo(e.target.files[0]);
  };

  const handleSubmit = () => {
    if (!videoName || videoName.trim().length === 0) {
      alert("Video Name is missing !");
      return;
    }
    if (!video) {
      alert("Video is missing !");
      return;
    }

    const form = new FormData();
    form.append("name", videoName);
    form.append("video", video);
    const config = {
      onUploadProgress: (progressEvent) => {
        const { loaded, total } = progressEvent;
        let percentage = Math.floor((loaded / total) * 100);
        console.log(percentage);
        setProgress(loaded);
      },
    };

    axios
      .post("http://localhost:4000/video/upload", form, config)
      .then((res) => console.log(res))
      .catch((err) => console.error(err));
  };

Answer 1

不要像数组或对象一样直接发送文件，使用 CreateReadStream 将其作为 RAW Binary 发送：

const buffer = fs.createReadStream('path-to-file');

put in axios 的第二个参数也是“body”，你必须直接将 RAW 二进制文件附加到它。

将后端代码中的 Axios 调用修改为：

axios.put(http://video.bunnycdn.com/library/${process.env.VIDEO_LIBRARY_ID}/videos/${video_id}`,
              buffer,
              {
                headers: {
                  AccessKey: process.env.BUNNY_API_KEY,
                },
              }
            )

希望它对您有所帮助，我花了好几个小时才弄清楚出了什么问题。