|  |  | 
 |  |  | <template> | 
 |  |  |   <div> | 
 |  |  |     <el-upload | 
 |  |  |       class="avatar-uploader" | 
 |  |  |       accept=".png,.jpg" | 
 |  |  |       :style="customStyle" | 
 |  |  |       :action="uploadImgUrl" | 
 |  |  |       :data="uploadData" | 
 |  |  | 
 |  |  |       </div> | 
 |  |  |     </el-upload> | 
 |  |  |   </div> | 
 |  |  |  | 
 |  |  |    | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | 
 |  |  |       type: Object, | 
 |  |  |       default: () => {} | 
 |  |  |     }, | 
 |  |  |     uploadData: Object, | 
 |  |  |     tipsLabel: '', | 
 |  |  |     customStyle: { | 
 |  |  |       type: String, | 
 |  |  |       default: 'width: 90px; height: 90px;' | 
 |  |  |     }, | 
 |  |  |     uploadData: Object | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload' | 
 |  |  |       uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload', | 
 |  |  |       // uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/uploadPicture', | 
 |  |  |       // uploadData: { | 
 |  |  |       //   folder: 'upload', | 
 |  |  |       //   type: 'image' | 
 |  |  |       // }, | 
 |  |  |       imgurlfull: '' | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |  | 
 |  |  |    | 
 |  |  |   methods: { | 
 |  |  |     // 上传图片 | 
 |  |  |     handleAvatarSuccess(res, file) { | 
 |  |  | 
 |  |  |         let { data } = res | 
 |  |  |         this.file.imgurl = data.imgaddr; | 
 |  |  |         this.file.imgurlfull = data.url; | 
 |  |  |         console.log(this.file); | 
 |  |  |         this.$message.success('上传成功') | 
 |  |  |         this.$emit('uploadSuccess', { imgurl: data.imgaddr, imgurlfull: data.url, name: data.originname }) | 
 |  |  |         this.$emit('uploadSuccess', { imgurl: data.imgaddr, imgurlfull: data.url }) | 
 |  |  |       } else { | 
 |  |  |         this.$tip.apiFailed('上传失败') | 
 |  |  |         this.$message.error('上传失败') | 
 |  |  |       } | 
 |  |  |       this.$emit('uploadEnd') | 
 |  |  |     }, | 
 |  |  |     uploadError() { | 
 |  |  |       this.$tip.apiFailed('上传失败') | 
 |  |  |       this.$message.error('上传失败') | 
 |  |  |       this.$emit('endUpload') | 
 |  |  |     }, | 
 |  |  |     // // 拦截 | 
 |  |  |     beforeAvatarUpload(file) { | 
 |  |  |       this.$emit('uploadBegin') | 
 |  |  |       return true | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |       return true; | 
 |  |  |     }, | 
 |  |  |   }, | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss" scoped> | 
 |  |  | $image-width: 100px; | 
 |  |  | .avatar-uploader { | 
 |  |  |   width: $image-width; | 
 |  |  |   height: $image-width; | 
 |  |  | } | 
 |  |  | ::v-deep .el-upload { | 
 |  |  |   border: 1px dashed #d9d9d9; | 
 |  |  |   border-radius: 6px; | 
 |  |  |   cursor: pointer; | 
 |  |  |   position: relative; | 
 |  |  |   width: $image-width; | 
 |  |  |   height: $image-width; | 
 |  |  |   overflow: hidden; | 
 |  |  | } | 
 |  |  | .avatar-uploader .el-upload:hover { | 
 |  |  |   border-color: #409EFF; | 
 |  |  | } | 
 |  |  | .avatar-uploader-icon { | 
 |  |  |   line-height: 90px; | 
 |  |  |   font-size: 28px; | 
 |  |  |   color: #8c939d; | 
 |  |  |   width: $image-width; | 
 |  |  |   height: $image-width; | 
 |  |  |   line-height: 90px; | 
 |  |  |   text-align: center; | 
 |  |  | } | 
 |  |  | .avatar { | 
 |  |  |   width: $image-width; | 
 |  |  |   height: $image-width; | 
 |  |  |   display: block; | 
 |  |  | } | 
 |  |  | .tips-style { | 
 |  |  | 
 |  |  |   font-weight: 400; | 
 |  |  |   color: #999999; | 
 |  |  |   line-height: 13px; | 
 |  |  | } | 
 |  |  | </style> | 
 |  |  | <style lang="scss" scoped> | 
 |  |  | ::v-deep .el-upload--picture-card{ | 
 |  |  |   width: 90px !important; | 
 |  |  |   height: 90px !important; | 
 |  |  | } | 
 |  |  | ::v-deep .el-upload-list__item { | 
 |  |  |   width: 90px !important; | 
 |  |  |   height: 90px !important; | 
 |  |  | } | 
 |  |  | .icon { | 
 |  |  |   -webkit-transform: translate(-50%,-50%); | 
 |  |  |   -ms-transform: translate(-50%,-50%); | 
 |  |  |   transform: translate(0%, -85%); | 
 |  |  | } | 
 |  |  | ::v-deep .el-upload-list__item { | 
 |  |  |   width: 90px !important; | 
 |  |  |   height: 90px !important; | 
 |  |  | } | 
 |  |  | </style> | 
 |  |  |  |