vue上传文件到服务器，服务端使用node进行接收，并存储到文件系统

1.传输文件需要使用FormData，使用append添加数据

add() {
      // 发送file文件，需要使用FormData进行传输
      let formData = new FormData();
      let file = this.addTable.file;
      // file对应的是一个file对象
      formData.append("file", file, "filename.png"); //很重要 data.append("file", file);不成功
      formData.append("title", this.addTable.title);
      console.log(formData);
      addSong(formData).then((res) => {
        console.log(res);
        this.$Message.success({
          content: "添加成功！！",
        });
      });
    },

2.axios发post请求时，需要设置headers为 ‘Content-Type’: ‘multipart/form-data’，还有data不用序列化

export function addSong(data) {
    return request({
        url: '/picture/add',
        data: data ,
        headers: { 'Content-Type': 'multipart/form-data' }
    })
}

3.node配置接口，使用formidable解析FormData

let fs = require("fs");
const formidable = require('formidable')
exports.addPicture = (req, res) => {
    // console.log(req.body); //这样访问传入的FormData为空，很正常

    const form = new formidable.IncomingForm()//要这样解析FormData
    form.parse(req, function (err, fields, files) {
        console.log(fields);//普通类型
        console.log(files);//file类型
        let title = fields.title
        let pngPath = new Date().getTime() + '.jpg'

        // formidable自动生成文件，此时只用复制粘贴文件到自己想要的地方
        let copiedPath = files.file.filepath
        let toPath = path.join(__dirname, '..', '/public/images/') + pngPath
        console.log(copiedPath, toPath);
        try {
            fs.copyFileSync(copiedPath, toPath)
            console.log('success');
        } catch (error) {
            console.log(error);
        }
        // 插入数据库
        const sql = `insert picture set  ?`
        let sqlData = {
            picture:pngPath,
            date:new Date(),
            title
        }
        db.query(sql, sqlData, (err, result) => {
            if (err) return res.msg(err)
            if (result.affectedRows !== 1) return res.msg('发布图片失败！')
            res.msg('发布图片成功！', 200)
        })
    })
 }