这是我在学习图片上传功能的时候自己总结出来的,希望对朋友你有所帮助
前端vue2中的问题上传图片
<el-upload
:headers="{ 'Authorization': token }"
class="avatar-uploader"
action='http://localhost:8080/images/upload'
:multiple="false"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
这是要上传到后端的地址
action='http://localhost:8080/images/upload'
在 el-upload标签中定义 :headers="{ 'Authorization': token }"
但注意:token要在data的return中定义 获取token的值,这是事先将token存在了sessionStorage里边,现在可以直接获取
data() {
return {
token:sessionStorage.getItem('token'),
}
}
是先存储的token在sessionStorage中,在登录逻辑的时候就存储
sessionStorage.setItem("token",res.headers.authorization);
sessionStorage.setItem("username",this.ruleForm.username)
后端逻辑再学习中,请耐性等待....