|  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  |     import axios from 'axios'; | 
 |  |  |     export default { | 
 |  |  |         props: { | 
 |  |  |             width: { | 
 |  |  |                 type: String, | 
 |  |  |                 default: '90px' | 
 |  |  |             }, | 
 |  |  |             height: { | 
 |  |  |                 type: String, | 
 |  |  |                 default: '90px' | 
 |  |  |             }, | 
 |  |  |             list: { | 
 |  |  |                 type: Array, | 
 |  |  |                 default: [] | 
 |  |  |             }, | 
 |  |  |             accept: { | 
 |  |  |                 type: String, | 
 |  |  |                 default: '' | 
 |  |  |             }, | 
 |  |  |             folder: { | 
 |  |  |                 type: String, | 
 |  |  |                 default: '' | 
 |  |  |             } | 
 |  |  |         }, | 
 |  |  |         data() { | 
 |  |  |             return { | 
 |  |  |                 uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload' | 
 |  |  |             } | 
 |  |  |         }, | 
 |  |  |  | 
 |  |  |         methods: { | 
 |  |  |             fileType(url) { | 
 |  |  |                 if (url.indexOf('.mp4') !== -1) { | 
 |  |  |                     return 'video' | 
 |  |  |                 } else { | 
 |  |  |                     return 'img' | 
 |  |  |                 } | 
 |  |  |             }, | 
 |  |  |             getFile(e) { | 
 |  |  |                 if (e.target && e.target.files.length > 0) { | 
 |  |  |                     this.$emit('loading') | 
 |  |  |                     const formdate = new FormData() | 
 |  |  |                     formdate.append('file', e.target.files[0]) | 
 |  |  |                     formdate.append('folder', this.folder) | 
 |  |  |                     axios.post(this.uploadImgUrl, formdate) | 
 |  |  |                         .then(res => { | 
 |  |  |                             this.$emit('success', res.data.data) | 
 |  |  |                         }) | 
 |  |  |                         .catch(e => { | 
 |  |  |                             this.$message.error(e) | 
 |  |  |                         }) | 
 |  |  |                         .finally(() => { | 
 |  |  |                             this.$refs.file.value = null | 
 |  |  |                         }) | 
 |  |  |                 } | 
 |  |  |             }, | 
 |  |  |             deleItem(index) { | 
 |  |  |                 this.$emit('dele', index) | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  | import axios from 'axios' | 
 |  |  | export default { | 
 |  |  |   props: { | 
 |  |  |     width: { | 
 |  |  |       type: String, | 
 |  |  |       default: '90px' | 
 |  |  |     }, | 
 |  |  |     height: { | 
 |  |  |       type: String, | 
 |  |  |       default: '90px' | 
 |  |  |     }, | 
 |  |  |     list: { | 
 |  |  |       type: Array, | 
 |  |  |       default: [] | 
 |  |  |     }, | 
 |  |  |     accept: { | 
 |  |  |       type: String, | 
 |  |  |       default: '' | 
 |  |  |     }, | 
 |  |  |     folder: { | 
 |  |  |       type: String, | 
 |  |  |       default: '' | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   data () { | 
 |  |  |     return { | 
 |  |  |       uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload' | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |  | 
 |  |  |   methods: { | 
 |  |  |     fileType (url) { | 
 |  |  |       if (url.indexOf('.mp4') !== -1) { | 
 |  |  |         return 'video' | 
 |  |  |       } else { | 
 |  |  |         return 'img' | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     getFile (e) { | 
 |  |  |       if (e.target && e.target.files.length > 0) { | 
 |  |  |         this.$emit('loading') | 
 |  |  |         const formdate = new FormData() | 
 |  |  |         formdate.append('file', e.target.files[0]) | 
 |  |  |         formdate.append('folder', this.folder) | 
 |  |  |         axios.post(this.uploadImgUrl, formdate) | 
 |  |  |           .then(res => { | 
 |  |  |             this.$emit('success', res.data.data) | 
 |  |  |           }) | 
 |  |  |           .catch(e => { | 
 |  |  |             this.$message.error(e) | 
 |  |  |           }) | 
 |  |  |           .finally(() => { | 
 |  |  |             this.$refs.file.value = null | 
 |  |  |           }) | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     deleItem (index) { | 
 |  |  |       this.$emit('dele', index) | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss" scoped> | 
 |  |  |     .file { | 
 |  |  |         /*width: 100%;*/ | 
 |  |  |         /*height: 90px;*/ | 
 |  |  |         margin: 10px 0; | 
 |  |  |       padding: 10px; | 
 |  |  |       box-sizing: border-box; | 
 |  |  |       display: flex; | 
 |  |  |       align-items: center; | 
 |  |  |       justify-content: space-between; | 
 |  |  |       position: relative; | 
 |  |  |       margin-bottom: 10px; | 
 |  |  |       /* margin-right: 20px; */ | 
 |  |  |        /* margin: 10px 0;*/ | 
 |  |  |         input { | 
 |  |  |             opacity: 0; | 
 |  |  |         } | 
 |  |  | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  | </style> | 
 |  |  |  |