vue Element 中 el-upload 上传组件中使用自定义上传方法 http-request
关于： 饿了吗 el-upload 组件
http-request 参数可以覆盖默认的上传行为，可以调用自己定义的js事件
注意点：
action="" 但不可以省略
http-request 必须以param为参数（ele上面没写）
通过 param.file 取得文件
api 要增加头 'content-Type': 'multipart/form-data'
示例：
前端：需要新建 formdata 对象
template部分
<el-upload class="avatar-uploader" action="" :http-request="uploadAvatar" :show-file-list="false" :before-upload="beforeAvatarUpload"> <img v-if="userobj.profile" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>
js部分
async uploadAvatar(params) {
this.forms = new FormData() // 实例化一个 formdata
this.forms.append('file', params.file)
this.forms.append('account', this.userobj.account)
const { data } = await updateUserAvatarRequest(this.forms)
this.userobj = data
this.showok(this.userobj.account + '更新头像成功')
// 如果是自己的话，就更改 vuex 缓存的
const vuexName = this.$store.getters.name
if (vuexName === this.userobj.account || vuexName === this.userobj.profile.real_name) {
// 方法一： 直接更改 变量
// this.$store.commit('user/SET_AVATAR', this.imageUrl)
// 方法二： 通过 action 更改
this.updateVuex()
}
},
updateVuex() {
this.$store.dispatch('user/getInfo', this.userobj.account)
}后端：需要增加头
export function updateUserAvatarRequest(params) {
return request({
url: '/authcenter/api/v1/users/profile/avatar',
method: 'post',
data: params,
headers: {
'content-Type': 'multipart/form-data'
}
})
}
0顶
0 踩
共 0 条评论