使用el-upload和post请求上传图片
步骤:
1.设置post请求头格式
modifyNickAndAvatar = (data,success)=>{
service({
url:'users/modifyNickAndAvatar?',
method:'post',
headers:{
'Content-Type':'multipart/form-data'
},
data
}).then(res =>{
success(res);
}).catch(err=>{
throw err
})
}
2.el-upload代码如下:
<el-upload
ref='upload'
action="#"
:http-request="selectPicUpload"
:data="{staff_nick_name,staff_id}"
:on-change="myFileUpload"
:limit="1"
:auto-upload="false">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail"
:src="file.url" alt="">
</div>
</el-upload>
<div class="username">更改用户名
<el-input placeholder="请输入内容" v-model="staff_nick_name " clearable class="pwd_ipt"></el-input>
</div>
<div class="modify_button" @click="ModifyNickBtn">确认修改</div>
(1)action可以不写路径,因为用:http-request="selectPicUpload"自定义了上传方法,但不能为空,随便写个占位符。
(2):data属性是携带的数据,也可以在自定义方法里面放在构造的对象里。
(3):on-change是当文件添加或上传文件时会调用的方法,可以在这里获取到添加的文件信息。
(4):auto-upload,当使用http-request实现自定义方法时,该属性也要给个false值。
实现http-request方法
selectPicUpload(obj){
let fd = new FormData(); //参数的格式是formData格式的
fd.append("file", obj.file); //参数
fd.append('staff_id',this.staffInfo.staff_id)
fd.append('staff_nick_name',this.staff_nick_name)
modifyNickAndAvatar(fd,(res)=>{
console.log(res)
})
},
ModifyNickBtn(){
// 判用户名和头像都空就提示
if(this.staff_nick_name == '' && this.fileList.url == ''){
this.$message({
showClose: true,
message: '请输入修改内容!',
type: 'error'
});
}else {
//会自动执行自定义的方法 selectPicUpload
this.$refs.upload.submit();
}
},