node+express+vue上传图片

个人服务器搭建的差不多了，开始做一些基础功能，先从上传图片开始吧。

前端用的vue。
//html
 <div>

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

</div>
//js

uploadAvatar(avatar) {

var url = "http://localhost:3000";

console.log(avatar.target.files[0])

let file = avatar.target.files[0]

let data = new FormData();

data.append("file", file, file.name); 

data.append('data', 112)

console.log(data.get('file'))

 

this.$http.post(url + '/product/zhutu', data).then(function(data) {

console.log(data)

}, function(response) {

console.log(response)

})

}

主要是后台，需要插件有，1.multiparty（传送图片）。2.images（图片处理）。3.uuidV1（生成唯一名字）

//处理图片

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 = uuidV1() + "." + formate[formate.length - 1];

//      

images(files.file[0].path) //Load image from file 

.size(1920, 1276)

.save("public/images/detail/" + fileName, {

quality: 1000

});

//返回前台存储地址

var src = "/images/detail/" + fileName;

 

res.json({

status: true,

msg: src

})

});

});