vue图片上传 结合node

发表于 | 阅读次数:

前端

使用FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//html
<input type="file"  accept="image/gif,image/jpeg,image/jpg,image/ png"
name="image"
@change='onUpload($event)'/>

//js methods
onUpload (e) {
    var formData = new FormData()
    formData.append('logo', e.target.files[0])
    //添加请求头
    let config = {
     headers: {'Content-Type':'multipart/form- data'}
    };
    this.axios.post('/upload',
    formData
    ).then(res => {
    //可以接收后台返回的路径
    })
}

后端

使用express文件上传中间件Multer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
const multer  = require('multer')

// 使用硬盘存储模式设置存放接收到的文件的路径以及文件名
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
      // 接收到文件后输出的保存路径（若不存在则需要创建）
      cb(null, 'upload/');    
  },
  filename: function (req, file, cb) {
      // 将保存文件名设置为 时间戳 + 文件原始名，比如 151342376785-123.jpg
      cb(null, Date.now() + "-" + file.originalname);  
  }
});

// 创建文件夹
var createFolder = function(folder){
  try{
      // 测试 path 指定的文件或目录的用户权限,我们用来检测文件是否存在
      // 如果文件路径不存在将会抛出错误"no such file or directory"
      fs.accessSync(folder); 
  }catch(e){
      // 文件夹不存在，以同步的方式创建文件目录。
      fs.mkdirSync(folder);
  }  
};// 使用硬盘存储模式设置存放接收到的文件的路径以及文件名
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
    // 接收到文件后输出的保存路径（若不存在则需要创建）
    cb(null, 'upload/');
    },
    filename: function (req, file, cb) {
    // 将保存文件名设置为 时间戳 + 文件原始名，比如 151342376785-123.jpg
    cb(null, Date.now() +  "-" + file.originalname);
    }
});

// 创建文件夹
var  createFolder  =  function(folder){
    try{
    // 测试 path 指定的文件或目录的用户权限,我们用来检测文件是否存在
    // 如果文件路径不存在将会抛出错误"no such file or directory"
    fs.accessSync(folder);
    }catch(e){
    // 文件夹不存在，以同步的方式创建文件目录。
    fs.mkdirSync(folder);
    }
};

var uploadFolder = './upload/';
createFolder(uploadFolder);

// 创建 multer 对象
var upload = multer({ storage: storage });

router.post('/upload', upload.single('image'), function(req, res, next) {
  console.log(req.file)
  res.json({data: req.file.path})
})