首页 > 解决方案 > 如何在节点后端不使用 multer 将视频上传到 YouTube

问题描述

我想使用 youtube API 上传视频,我正在使用node.js表示为后端。我使用multer成功地将视频上传到 youtube,但multer所做的是将我的视频作为中间件复制到我的服务器位置。但我不想那样。我想从我的硬盘的原始位置上传一个视频,而不需要任何副本到我的服务器位置。我该怎么做?

这是使用 node.js 和 express 的后端代码

const express = require("express");
const youtube = require("youtube-api");
const uuid = require("uuid").v4;
const cors = require("cors");
const open = require("open");
const multer = require("multer");
const fs = require("fs");

const PORT = 4000;
const credentials = require("./client_secret.json");
const app = express();
app.use(express.json());
app.use(cors());

const storage = multer.diskStorage({
  destination: "./",
  filename(req, file, callback) {
    const newFileName = `${uuid()}-${file.originalname}`;
    callback(null, newFileName);
  },
});

const uploadVideoFile = multer({
  storage: storage,
  // single:'recfile',
}).single("VideoFile");

app.post("/upload", uploadVideoFile, (req, res) => {
  if (req.file) {
    const filename = req.file.filename;
    const { title, description } = req.body;

    open(
      oAuth.generateAuthUrl({
        access_type: "offline",
        scope: "https://www.googleapis.com/auth/youtube.upload",
        state: JSON.stringify({
          filename,
          title,
          description,
        }),
      })
    );
  }
});

app.get("/oAuth2CallBack", (req, res) => {
  res.redirect("http://google.com");

  const fileName = JSON.parse(req.query.state).filename;
  const title = JSON.parse(req.query.state).title;
  const description = JSON.parse(req.query.state).description;

  oAuth.getToken(req.query.code, (err, tokens) => {
    if (err) {
      console.log(err);
      return;
    }

    oAuth.setCredentials(tokens);
    youtube.videos.insert(
      {
        resource: {
          snippet: { title, description },
          status: { privacyStatus: "private" },
        },
        part: "snippet,status",
        media: {
          body: fs.createReadStream(fileName),
        },
      },
      (err, data) => {
        console.log("DONE!");
        console.log(data);
        console.log(err);
        // process.exit();
      }
    );
  });
});

const oAuth = youtube.authenticate({
  type: "oauth",
  client_id: credentials.web.client_id,
  client_secret: credentials.web.client_secret,
  redirect_url: credentials.web.redirect_uris[0],
});

app.listen(PORT, (req, res) => {
  console.log("app is listening on PORT 4000");
});


这是我使用 react.js 的前端代码:

import React, { useState } from "react";

import axios from "axios";

const YouTubeApiEndpoint = "http://192.168.0.106:4000/upload";
// const YouTubeUploadApi =

const UploadPage = () => {
  const [form, setForm] = useState({
    title: "",
    description: "",
    file: null,
  });

  function handleChange(event) {
    // if (event.target.name === "file") {
    //   console.log(event.target.files);
    // }

    const inputValue =
      event.target.name === "file" ? event.target.files[0] : event.target.value;
    setForm({
      ...form,
      [event.target.name]: inputValue,
    });
  }

  function handleSubmit(event) {
    event.preventDefault();

    console.log({ form });
    const videoData = new FormData();
    videoData.append("VideoFile", form.file);
    videoData.append("title", form.title);
    videoData.append("description", form.description);

    axios.post(YouTubeApiEndpoint, videoData).then((response) => {
      console.log(response.data);
    });
  }

  return (
    <div>
      <h1>Upload Youtube Video</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <input
            onChange={handleChange}
            type="text"
            name="title"
            autoComplete="off"
            placeholder="Title"
          />
        </div>
        <br />
        <div>
          <textarea
            onChange={handleChange}
            type="Description"
            name="description"
            autoComplete="off"
            placeholder="Description"
          />
        </div>
        <br />
        <div>
          <input
            onChange={handleChange}
            accept="video/mp4"
            type="file"
            name="file"
            placeholder="Add Video File"
          />
        </div>
        <br />
        <button type="submit">Upload Video</button>
      </form>
    </div>
  );
};

export default UploadPage;


标签: javascriptnode.jsreactjsexpress

解决方案


推荐阅读