单个图片上传组件封装

<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);       },  
上一篇:python对文件夹下的文件重命名


下一篇:嵌入资源第三讲:多格式文件内嵌入WPF资源文件