<template>
<el-upload
class="upload-signle"
:action="uoloadAction"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:file-list="fileList"
list-type="picture"
:multiple="false"
:limit = "1"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</template>
<script>
import config from '@/config/config';
export default {
name: 'singleUpload',
props:{
// 上传地址
uoloadAction:{
type:String,
required: true
},
// 成功回调函数
successCallBack:{
type:Function,
required: true
},
// 分类图标
icon:String
},
data() {
return {
fileList: []
};
},
watch:{
icon(value){
// console.log(value);
if(value){
this.fileList.push({
name:value.substr(value.substr(value.lastIndexOf('/')+1)),
url:config.BASE_URL + value
})
}
}
},
methods: {
// 上传成功
handleSuccess(response,file, fileList){
console.log(response)
if(response.status === 1){
this.successCallBack(response.data)
}
},
// 删除
handleRemove(file, fileList) {
console.log(file, fileList);
if(file.status === "success"){
this.fileList = []
this.successCallBack(null)
}
},
// 上传个数限制提示
handleExceed(){
this.$message.error('只能上传一个图标!')
}
}
}
</script>
----------------------
import SingleUpload from '@/components/upload/singleUpload'
components:{
SingleUpload
},
<el-form-item label="分类图标">
<SingleUpload
uoloadAction="/manager/api/auth/category/upload_category"
:successCallBack="getCategoryIcon"
:icon="productCate.icon"
></SingleUpload>
</el-form-item>
-------------------------
// 图片上传成功或者 删除成功 都会调用
getCategoryIcon(data){
console.log(data);
if(data == null){
// 删除成功
this.productCate.icon =null;
}else{
// 上传成功
this.productCate.icon = data.name;
}
console.log(this.productCate.icon);
},
