|  |  |  | 
|---|
|  |  |  | <img :src="item.url" v-if="fileType(item.url) === 'img'" /> | 
|---|
|  |  |  | <video controls autoplay :src="item.url" v-else></video> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="file_list_item" :style="{width: width, height: height, cursor: 'pointer'}" @click="$refs.file.click()"> | 
|---|
|  |  |  | <i class="el-icon-plus"></i> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="file_list_item" :style="{width: width, height: height, cursor: 'pointer'}" @click="$refs.file.click()"> | 
|---|
|  |  |  | <i class="el-icon-plus" style="font-size: 18px;color: #8c939d;text-align: center;margin-top: 10px"></i> | 
|---|
|  |  |  | <i style="font-size: 12px;color: #8c939d;font-style: normal;text-align: center">{{tips}}</i> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <input type="file" ref="file" :accept="accept" @change="getFile" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <input type="file" ref="file" :accept="accept" @change="getFile" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </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: [] | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | tips: { | 
|---|
|  |  |  | type: String, | 
|---|
|  |  |  | default: '0' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | accept: { | 
|---|
|  |  |  | type: String, | 
|---|
|  |  |  | default: '' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | folder: { | 
|---|
|  |  |  | type: String, | 
|---|
|  |  |  | default: '' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/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) | 
|---|
|  |  |  | console.log(res.data.data) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(e => { | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .finally(() => { | 
|---|
|  |  |  | this.$refs.file.value = null | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | deleItem (index) { | 
|---|
|  |  |  | this.$emit('dele', index) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss" scoped> | 
|---|
|  |  |  | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | border-radius: 5px; | 
|---|
|  |  |  | border: 1px solid #d5d5d5; | 
|---|
|  |  |  | margin-left: 15px; | 
|---|
|  |  |  | margin: 5px; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | &:first-child { | 
|---|
|  |  |  | margin: 0 !important; | 
|---|
|  |  |  | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | z-index: 10000; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | .el-icon-close { | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | font-size: 19px; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .el-icon-plus { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  |  | 
|---|