From 0aec6c3a08d63252cdf83129be26c924689ecb62 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期二, 28 五月 2024 16:47:28 +0800
Subject: [PATCH] 更改头部
---
admin/src/components/common/upload.vue | 140 ++++++++++++++++++++++++----------------------
1 files changed, 73 insertions(+), 67 deletions(-)
diff --git a/admin/src/components/common/upload.vue b/admin/src/components/common/upload.vue
index 9917980..d6dfc8d 100644
--- a/admin/src/components/common/upload.vue
+++ b/admin/src/components/common/upload.vue
@@ -8,76 +8,82 @@
<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 + '/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)
- })
- .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 => {
+ this.$message.error(e)
+ })
+ .finally(() => {
+ this.$refs.file.value = null
+ })
+ }
+ },
+ deleItem (index) {
+ this.$emit('dele', index)
+ }
+ }
+}
</script>
<style lang="scss" scoped>
@@ -102,7 +108,7 @@
overflow: hidden;
border-radius: 5px;
border: 1px solid #d5d5d5;
- margin-left: 15px;
+ margin: 5px;
position: relative;
&:first-child {
margin: 0 !important;
@@ -117,10 +123,11 @@
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 {
@@ -138,4 +145,3 @@
}
}
</style>
-
--
Gitblit v1.9.3