修改头像
axios接口
letChangeAvatar=(img)=>axios({
url:'/user/changeavatar',
method:'post',
anync:true,
contentType:false,
processData:false,
data:img
})
js部分调用封装的接口
methods:{
changeAvatar(event){
letimg=event.target.files[0];
letsize=img.size;
if(size>3145728){
alert('请选择3M以内的图片！');
returnfalse;
}
letForm=newFormData();
Form.append('avatar',img,this.avatar_name);
API.ChangeAvatar(Form)
.then((response)=>{
console.log(response)
})
.catch((error)=>{
console.log(error)
})
}
}
- 在这里我并没有用form方式，而是将input隐藏，用label绑定input，当我们点击label的时候，也就点击了input
- 我将请求封装在了另一个文件里，为ChangeAvatar()函数，如果不封装，按常规写法一样是可以的
- Form.append('avatar',img,this.avatar_name);第一个参数为input的name,第二个参数为文件对象，第三个参数为文件的名字
- ajaxnewFormData()方法提交文件时，不能用data:{a:1}的键值对方法提交，应当直接将文件对象提交data:FormData
后台node代码
constfileUpload=require('express-fileupload');
app.use(fileUpload());
app.post('/user/changeavatar',function(req,res){
console.log(req.files);//theuploadedfileobject
letavatar=req.files.avatar;
//Usethemv()methodtoplacethefilesomewhereonyourserver
avatar.mv('dist/static/img/avatar/'+req.files.avatar.name+'.jpg',function(err){
if(err)
returnres.status(500).send(err);
res.send('Fileuploaded!');
});
})
在这里我并没有用multer，而是用别人的npm包express-fileupload
代码运行，成功将图片上传到了指定目录
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。