|  |  |  | 
|---|
|  |  |  | </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) { | 
|---|
|  |  |  | 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> | 
|---|
|  |  |  |  | 
|---|