vue+nodejs实现视频上传

前端使用vue+element, 服务端使用nodejs

需求：前端上传视频，服务端处理file文件

直接上代码吧

vue:直接使用的上传组件

<el-upload
  class="upload-demo"
  drag
  :action="action"
  :auto-upload="true"
  :multiple="false"
  :on-success="videoSuccess"
  :before-upload="beforeUploadVideo"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

export default {
  data() {
    return {
      action: "" // 要上传的地址
    };
  },
  methods: {
    //上传前回调
    beforeUploadVideo(file) {
      // console.log("上传前", file);
      var fileSize = file.size / 1024 / 1024 < 50;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov"
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!fileSize) {
        this.$message.error("视频大小不能超过50MB");
        return false;
      }
    },
    //   上传文件
    videoSuccess(res) {
      console.log("success", res);
      if (res.data.error_code == 0) {
        this.$message({
          type: "success",
          message: "棒！上传成功啦"
        });
      } else {
        this.$message.error(res.data.description);// 上传失败提示
      }
    },
  }
};

nodejs：使用formidable来处理表单数据

在index.js文件中，使用border-parser处理post请求

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

//处理post字段请求
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: false
}));

然后在具体接口中使用formidable
首先要npm下载然后引入formidable
const formidable = require("formidable");

var form = new formidable.IncomingForm();
form.encoding = "utf-8";
form.uploadDir = path.join("uploads/");// 将文件存储的临时路径
form.parse(req, async function (err, fields, files) {
    if (err) {
    console.log("解析失败", err);
  } else {
    // console.log("处理好的文件", files);
    // console.log(fs.createReadStream(files.file.path)); // 将文件转为可读的文件流
    request(
      {
        url: `**************`,
        method: "POST",
        headers: {
          "Content-Type": "multipart/form-data;",
        },
        formData: { // 注意formdata的格式
          video: fs.createReadStream(files.file.path),
          "Content-Type": "video/mp4",
        },
      },
      function (err, response, body) {
        body = JSON.parse(body);
        console.log("上传视频", body);
        res.send(body);
      }
    );
  }
}）