vue+node.js 实现图片上传到服务器

1. vue页面：

<div>
    <input type="file" name="file" accept=".jpg, .jpeg, .png" @change="uploadAvatar">
</div>

2. methods中：

	uploadAvatar(avatar) {
      console.log(avatar.target.files[0])
      let file = avatar.target.files[0]
      let data = new FormData();
      console.log(data)
      data.append("file", file, file.name); 
      data.append('data', 112)

      console.log('123',data.get('file'))
      
      this.$ajax.post('/zhutu', data).then(function(data) {
        console.log(data)
      }, function(response) {
        console.log(response)
      })
    }

3. node中需要 multiparty插件（用来传送图片） images插件 （用来做图片处理） uuid（用来生成唯一名字）
   所以每一个都记得去npm库中下载哦

const express = require("express");
var router = express.Router();

// 下载multiparty 插件 用来传送图片
var multiparty = require("multiparty")
// 下载uuid npm install uuid --save 用来生成唯一名字
const uuid = require('uuid');
// 下载images插件 用来做24行的（图片处理）
const images = require("images")


router.post('/zhutu', function(req, res, next) {
	console.log('tupian')
	var form = new multiparty.Form();
	form.parse(req, function(err, fields, files) {
		console.log(files.file[0])
		// //找到上传的图片上传之前的名字
		var orgFilename = files.file[0].originalFilename;
		console.log(orgFilename)
		// //切割orgFilename 找到图片的扩展名 以证明图片是什么格式的
		// //切割后是一个数组，找到数组最后一个
		var formate = orgFilename.split(".");
		// //拼接新的图片名称
		var fileName = uuid.v1() + "." + formate[formate.length - 1];
		//  将图片存储到服务器本地
		images(files.file[0].path) //Load image from file 
		.size(1920, 1276) // 这里一定要先把这个public/images文件夹给创建好 不然要报错哦
		.save("public/images/" + fileName, {
			quality: 1000
		});
		//返回前台存储地址
		var src = "/images/" + fileName;
		
		res.json({
			status: true,
			msg: src
		})
	});
});

module.exports=router;

这里特别感谢一个博主，虽然找不到他的博客了，找了好几天，就他的能用，超级感谢！！！！