| 个人服务器搭建的差不多了，开始做一些基础功能，先从上传图片开始吧。 前端用的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
})
});
});
|