文件上传
- 实现界面效果 绑定一个 @change事件
<label for="name">用户头像:</label>
<input class="form-control" type='file' name='pictureImg' @change="onHeaderchange"/>
- 在 methods调用该事件传入event参数 获取路径
onHeaderchange(ev){
this.file = ev.target.files[0];
},
- 在用表单提交事件new一个formData 实现表单项数据 再调用接口
onuserAddSubmit(){
const formData = new FormData();
formData.append("username", this.username); // 表单项
formData.append("psw", this.password);
formData.append("fileHeader", this.file);
// 发生请求
RequestUserAdd(formData)
.then(data => {
if (data.resultCode === 1) {
this.$router.replace({ path: "/user/userList" });
}
})
.catch(err => {
this.message = "添加用户失败:" + err;
});
}
}
- 在接口是用axios封装了的
export const RequestUserAdd = (params) =>axios.post(`${BASE_URL}/api/add`,params).then(res => res.data);
注意:上传头像一定会使用formData 先new一个formData