vue+axios（前端）node+express（后台）使用formdata上传图片

版权声明：爱我请告诉我 https://blog.csdn.net/hardly555/article/details/81448871

需求前因：平常普通的HTML中我们上传文件大多在标签内使用直接submit整个表单，现如今我们不能使用标签，如何只是用实现上传文件呢？
实现需求需要解决的问题：
1.如何在js逻辑中取得文件？
2.以什么形式上传？
3.后台如何接收？

前台代码：（如何取得文件实体，以FormData形式用axios上传）

<template>
    <div>
        <div>
            <input type="file" name="file" accept=".jpg, .jpeg, .png" @change="uploadAvatar">
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {};
  },
  methods: {
    uploadAvatar(avatar) {
        console.log(avatar.target.files[0])
        let file = avatar.target.files[0]
      let data = new FormData();
      data.append("file", file, file.name);//很重要 data.append("file", file);不成功
      data.append('data',112)
      console.log(data.get('file'))
      return axios.post("http://127.0.0.1:3000/user/file", data, {
        headers: { "content-type": "multipart/form-data" }
      });
    }
};
</script>

后台代码

//文件上传测试
router.post('/file', upload.single('file'), function(req, res) {
    let avatar = req.file
    console.log(avatar)
    console.log(req.body)
    if (avatar) {
        fs.unlink(avatar.path, (e) => {
            if (e) {
                console.log('文件操作失败')
                throw e;
            } else
                console.log('文件:' + avatar.path + '删除成功！');
        });
    }
    res.status(200).send('上传成功');
})

upload.single(‘file’)是使用文件操作中间件multer为文件生成新的文件名与保存的文件夹

multe文件保存与生成新的文件名

   //multer文件的硬盘存储模式
var storage = multer.diskStorage({
    destination: function(req, file, cb) {
        //先创建路径在保存
        createFileDirectory(uploadPath);
        //指定文件保存路径
        cb(null, 'upload/');
    },
    filename: function(req, file, cb) {
        console.log(file)
            // 将保存文件名设置为 时间戳 + 文件原始名，比如 151342376785-123.jpg
        cb(null, Date.now() + '-' + file.originalname);

    }
})

fs创建文件夹

//创建文件夹
var createFileDirectory = function(path) {
        try {
            //检测文件夹是否存在，不存在抛出错误
            fs.accessSync(path);
        } catch (error) {
            //创建文件夹
            fs.mkdirSync(path);
        }
    }

创建中间件

var upload = multer({
    storage: storage
});

结果图：
上传页面

参考链接：
https://www.jb51.net/article/127361.htm