接口文档:
image.png
1.:on-success="handleSuccess" //上传成功时触发的方法
image.png
handleSuccess(file) {
//file.data.tmp_path 图片临时上传的路径
console.log("成功");
console.log(file);
},
2.:on-remove="handleRemove" //移除时候触发的方法
image.png
//移除的时候触发的方法
handleRemove(file, fileList) {
//file.response.data.tmp_path 图片临时上传的路径console.log("移除")
//从this.form.pics 移除当前 X 掉的图片
//先获取该图片的索引
//findIndex((item)=>{})遍历 把符合条件的元素的索引进行返回
//[{pic:图片路径},{pic:图片路径}]
let Index = this.form.pics.findIndex((item)=>{
return item.pic === file.response.data.tmp_data;
})
this.form.pics.splice(Index,1);
console.log(file, fileList);
},
image.png
image.png
代码注解:
<template>
<div>
//注意这边的图片上传也是一个向后端发请求,也是需要带上token的头部请求
<el-form-item>
<el-upload
action="http://localhost:8888/api/private/v1/upload" //这边要写全路径,因为baseURl是基于axios请求,这边的upload不是基于axios
:on-preview="handlePreview"
:header="headers"
:on-remove="handleRemove" //移除时候触发的方法
:on-success="handleSuccess" //上传成功时触发的方法
:file-list="fileList"
list-type="picture"> //上传类型为图片
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
</div>
</template>
<script>
export default {
data() {
return {
form:{
pics:[]
},
headers:{
Authorization:localStorage.getItem('token')
}
};
},
methods: {
handlePreview(file) {
console.log(file);
},
//移除的时候触发的方法
handleRemove(file, fileList) {
//file.response.data.tmp_path 图片临时上传的路径
console.log("移除")
//从this.form.pics 移除当前 X 掉的图片
//先获取该图片的索引
//findIndex((item)=>{})遍历 把符合条件的元素的索引进行返回
//[{pic:图片路径},{pic:图片路径}]
let Index = this.form.pics.findIndex((item)=>{
return item.pic === file.response.data.tmp_data;
})
this.form.pics.splice(Index,1);
console.log(file, fileList);
},
//成功时候触发的方法
handleSuccess(file) {
//file.data.tmp_path 图片临时上传的路径
console.log("成功");
console.log(file);
//给this.form.pics
this.form.pics.push({
pic:file.data.tmp_data
})
},
}
}
</script>
网友评论