| Personal server set up almost started to do some basic functions, starting upload pictures started. With the front end of 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)
})
}
Mainly the background, there is need for plug-ins, 1.multiparty (send pictures). 2.images (picture processing). 3.uuidV1 (generate a unique name)
// Image processing
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])
// // find the name of the uploaded image before uploading
var orgFilename = files.file[0].originalFilename;
console.log(orgFilename)
// // extensions cutting orgFilename find pictures to show that the picture is what format
// // After the cut is an array, the array to find the last one
var formate = orgFilename.split(".");
// // mosaic name new picture
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
})
});
});
|
node + express + vue upload pictures
Guess you like
Origin www.cnblogs.com/ydam/p/10983572.html
Recommended
Ranking