前言
使用的是
element-ui
中的upload
组件
:action="imageUrl"
图片上传到后台的地址
:headers="headers"
由于没有走axios
请求,需要设置header
头。
:on-success="handlePreview"
上传成功后的回调
list-type
文件列表的类型
效果
<el-upload class="upload-demo" :action="imageUrl" :headers="headers"
:on-success="handlePreview" list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
data(){
return:{
// 图片上传到后台的地址
imageUrl: '图片上传到后台的地址',
//图片上传成功后的路径
images:"",
//设置header头
headers: {
Authorization: window.sessionStorage.getItem('token'),
},
}
},
methods:{
//上传成功时的钩子函数
handlePreview(file) {
console.log(file)
if (file.code == 200) {
this.images = file.data.path
}
},
}