|  |  | 
 |  |  | <template> | 
 |  |  |   <div> | 
 |  |  |     <el-upload | 
 |  |  |       ref="uploadFileBtn" | 
 |  |  |       class="upload-demo" | 
 |  |  |       :accept="uploadData.fileTyp" | 
 |  |  |       :accept="uploadData.fileType" | 
 |  |  |       :action="uploadImgUrl" | 
 |  |  |       :limit="1" | 
 |  |  |       :before-remove="removes" | 
 |  |  | 
 |  |  |       :on-error="uploadError" | 
 |  |  |       :before-upload="beforeFileUpload" | 
 |  |  |       :file-list="fileList"> | 
 |  |  |     <el-button size="small" type="primary">点击上传</el-button> | 
 |  |  |     <div slot="tip" class="el-upload__tip">只能上传{{ uploadData.fileType }}文件,且不超过5mb</div> | 
 |  |  |     <el-button  size="small" type="primary"  >点击上传</el-button> | 
 |  |  |     <div style="display: inline-block;position: absolute"  slot="tip" class="el-upload__tip" v-if="showTips">{{'(只能上传'+uploadData.fileType +'文件,且不超过5mb)'}}</div> | 
 |  |  |   </el-upload> | 
 |  |  |   </div> | 
 |  |  |  | 
 |  |  | 
 |  |  | <script> | 
 |  |  | export default { | 
 |  |  |   props: { | 
 |  |  |     fileList:{ | 
 |  |  |       type: Array, | 
 |  |  |       default: () => [] | 
 |  |  |     }, | 
 |  |  |     file: { | 
 |  |  |       type: Object, | 
 |  |  |       default: () => {} | 
 |  |  |     }, | 
 |  |  |     tipsLabel: '', | 
 |  |  |     fileIndex: { | 
 |  |  |       type: Number, | 
 |  |  |       default: () =>0 | 
 |  |  |     }, | 
 |  |  |     showTips: { | 
 |  |  |       type: Boolean, | 
 |  |  |     default: () => true | 
 |  |  |     }, | 
 |  |  |     customStyle: { | 
 |  |  |       type: String, | 
 |  |  |     default: 'width: 190px; height: 190px;' | 
 |  |  |       default: 'width: 190px; height: 190px;' | 
 |  |  |     }, | 
 |  |  |     uploadData: Object | 
 |  |  |   }, | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       fileList:null, | 
 |  |  |       uploaded:false, | 
 |  |  |       // fileList:[], | 
 |  |  |       uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload?folder='+this.uploadData.folder | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |  | 
 |  |  |   watch: { | 
 |  |  |     fileList (nv,ov) { | 
 |  |  |       if(this.fileList ==null){ | 
 |  |  |         this.fileList = new Array(); | 
 |  |  |       } | 
 |  |  |       if(this.fileList.length == 0){ | 
 |  |  |         this.uploaded = false | 
 |  |  |       }else{ | 
 |  |  |         this.uploaded=true | 
 |  |  |       } | 
 |  |  |      // alert(this.fileList) | 
 |  |  |     }, | 
 |  |  |     tipsLabel (nv,ov) { | 
 |  |  |       if(this.tipsLabel ==null){ | 
 |  |  |         this.tipsLabel = '' | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     removes() { | 
 |  |  |       this.uploaded=false | 
 |  |  |       this.$emit('remove') | 
 |  |  |     }, | 
 |  |  |     // 上传图片 | 
 |  |  |     handleExceed(){}, | 
 |  |  |     handleExceed(){ | 
 |  |  |       this.$message.error('只允许上传1个文件,请删除已传文件,重试!') | 
 |  |  |     }, | 
 |  |  |     handleFileSuccess(res, file) { | 
 |  |  |       if (res.code == 200) { | 
 |  |  |         let { data } = res | 
 |  |  |         this.uploaded = true | 
 |  |  |         // this.fileList = [{name: data.originname, url: data.url }] | 
 |  |  |         this.$message.success('上传成功') | 
 |  |  |         this.$emit('uploadSuccess', { fileurl: data.imgaddr, fileurlFull: data.url, name: data.originname }) | 
 |  |  |         this.$emit('uploadSuccess', { fileurl: data.imgaddr,  fileurlFull: data.url, name: data.originname ,index:this.fileIndex}) | 
 |  |  |       } else { | 
 |  |  |         this.$tip.apiFailed('上传失败') | 
 |  |  |         this.$message.apiFailed('上传失败') | 
 |  |  |       } | 
 |  |  |       this.$emit('uploadEnd') | 
 |  |  |     }, | 
 |  |  |     uploadError() { | 
 |  |  |       this.$tip.apiFailed('上传失败') | 
 |  |  |       this.$message.apiFailed('上传失败') | 
 |  |  |       this.$emit('endUpload') | 
 |  |  |     }, | 
 |  |  |     // // 拦截 | 
 |  |  |     beforeFileUpload(file) { | 
 |  |  |  | 
 |  |  |       this.$emit('uploadBegin') | 
 |  |  |       return true | 
 |  |  |     } | 
 |  |  | 
 |  |  |   height: $image-width; | 
 |  |  | } | 
 |  |  | ::v-deep .el-upload { | 
 |  |  |   border: 1px dashed #d9d9d9; | 
 |  |  |   //border: 1px dashed #d9d9d9; | 
 |  |  |   border-radius: 6px; | 
 |  |  |   cursor: pointer; | 
 |  |  |   position: relative; | 
 |  |  |   width: $image-width; | 
 |  |  |   height: $image-width; | 
 |  |  |   height: auto; | 
 |  |  |   overflow: hidden; | 
 |  |  | } | 
 |  |  | .avatar-uploader .el-upload:hover { | 
 |  |  | 
 |  |  |   width: $image-width; | 
 |  |  |   height: $image-width; | 
 |  |  |   display: block; | 
 |  |  | } | 
 |  |  | }#67C23A | 
 |  |  | .tips-style { | 
 |  |  |   height: 13px; | 
 |  |  |   font-size: 13px; | 
 |  |  | 
 |  |  |   width: 90px !important; | 
 |  |  |   height: 90px !important; | 
 |  |  | } | 
 |  |  | ::v-deep .el-upload-list__item-name{ | 
 |  |  |   color: #67C23A; | 
 |  |  | } | 
 |  |  | ::v-deep .el-upload-list__item { | 
 |  |  |   width: 80% !important; | 
 |  |  |   height: 50px !important; |