vue+axios+node 文件上传接口与使用

171 阅读1分钟

vue全部代码如下

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
// 导入 axios 模块
import axios from 'axios'
const ChangeAvatar = (img) => axios({
  url: 'http://localhost:3000/upload', // 此处可以替换为实际url
  method: 'post',
  anync: true,
  contentType: false,
  processData: false,
  data: img
})
const update = (event) => {
  const img = event.target.files[0]
  const size = img.size
  if (size > 3145728) {
    alert('请选择3M以内的图片!')
    return false
  }
  const Form = new FormData()
  Form.append('avatar', img)
  ChangeAvatar(Form)
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
}

node api接口代码如下。(express)

methods.js 文件
// 定义全局方法
module.exports = {
  isArrayFn(o) {
    return Object.prototype.toString.call(o) === "[object Array]";
  }
}
// upload.js 路由文件
// 导入主要模块
const { v4: uuidv4 } = require("uuid");
const { isArrayFn } = require("../../common/methods");
const baseUrl = require("../../common/baseUrl");
const fileUpload = require('express-fileupload');
app.use(fileUpload());

router.post('/upload', function(req, res) {
  let avatar = req.files.avatar;
  const filePath = req.body.filePath; // 前端传过来的存储路径
  const contents = `static/${filePath ? filePath : ""}`; // 文件存储路径
  const filesArr = [];
  if (isArrayFn(avatar)) {
    // 多文件上传
    for (let i = 0; i < avatar.length; i++) {
      avatar[i].name = uuidv4() + "-" + avatar[i].name; // 修改文件名称 避免重复
      filesArr.push({
        url: baseUrl + "/" + contents + avatar[i].name,
      });
      avatar[i].mv(`${contents}${avatar[i].name}`, (err) => {
        if (err) return res.status(500).send(err);
      });
    }
    res.json({
      status: 0,
      msg: "File uploaded!",
      data: filesArr,
    });
  } else {
    // 单文件上传
    avatar.name = uuidv4() + "-" + avatar.name; // 修改文件名称 避免重复
    avatar.mv(`${contents}${avatar.name}`, function (err) {
      if (err) return res.status(500).send(err);
      return res.json({
        status: 0,
        msg: "File uploaded!",
        data: {
          url: baseUrl + "/" + contents + avatar.name,
        },
      });
    });
  }
})

这里没有使用multer,而是用的express-fileupload