</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); },