好资源导航 » 文章资讯 » 详解Vue+axios+Node+express实现文件上传(用户头像上传)

详解Vue+axios+Node+express实现文件上传(用户头像上传)

2023-09-09 04:49:05 441

Vue页面的代码



修改头像

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

代码运行，成功将图片上传到了指定目录

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

详解Vue+axios+Node+express实现文件上传(用户头像上传)

热门推荐

随机推荐