kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整上传组件,视频的展示处理

Browse Source
This commit is contained in:
aixianling
2023-04-19 17:13:30 +08:00
parent da5082cde8
commit cb3ce7e729
1 changed files with 75 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/AiUploader.vue
View File

@@ -4,25 +4,27 @@
<div class="item" v-for="(item, i) in fileList" :key="i">
<template v-if="type == 'image'">
<ai-image :src="item.url" :preview="preview"/>
<div class="info">
<i>{{ item.fileSizeStr }}</i>
</div>
<u-icon v-if="!disabled" class="delBtn" color="#f46" name="close-circle-fill" size="40" @click="remove(i)"/>
</template>
<template v-else>
<template v-else-if="type == 'video'">
<video :src="item.url" :poster="item.thumb"/>
<u-icon v-if="!disabled" class="delBtn" color="#f46" name="close-circle-fill" size="40" @click="remove(i)"/>
</template>
<div class="file" v-else>
<ai-image :preview="preview" :file="item"/>
<div class="info">
<span>{{ item.name }} </span>
<i>{{ item.fileSizeStr }}</i>
</div>
</template>
<template v-if="!disabled">
<div btn @tap="handleReUpload(i)">
重新上传
</div>
<div btn @tap="remove(i)">
删除
</div>
</template>
<template v-if="!disabled">
<div btn @tap="handleReUpload(i)">
重新上传
</div>
<div btn @tap="remove(i)">
删除
</div>
</template>
</div>
</div>
<div v-if="!disabled&&(fileList.length == 0 || (multiple && fileList.length < limit))" class="default"
@click="upload">
@@ -51,16 +53,23 @@ export default {
fileId: String,
mediaId: String,
def: {default: () => []},
action: {default: '/app/wxcp/upload/uploadFile'},
action: String,
preview: Boolean,
size: {default: 10 * 1024 * 1024},
disabled: Boolean,
sourceType: {default: () => ['album', 'camera']}
},
computed: {
errorImage() {
return this.$cdn + 'file.png'
},
...mapState(['token']),
errorImage: v => v.$cdn + 'file.png',
api() {
if (this.action) return this.action
else return {
image: '/admin/file/add',
file: '/admin/file/add',
video: '/admin/file/addVideo',
}[this.type]
}
},
watch: {
def: {
@@ -74,6 +83,7 @@ export default {
}
},
immediate: true,
deep: true
},
},
data() {
@@ -88,8 +98,8 @@ export default {
},
upload(wait) {
typeof wait == 'function' && wait()
let count = this.limit - (this.fileList?.length||0)
if(count>0){
let count = this.limit - (this.fileList?.length || 0)
if (count > 0) {
let params = {
count,
sizeType: ['compressed'],
@@ -99,10 +109,8 @@ export default {
if (count > this.limit && this.limit !== 1) {
return this.$u.toast(`不能超过${this.limit}个`)
}
if (res.tempFiles) {
res.tempFiles?.map((item) => {
this.uploadFile(item)
})
if (res.tempFiles?.length > 0) {
res.tempFiles.map(this.uploadFile)
} else if (res?.tempFile) {
this.uploadFile(res.tempFile)
}
@@ -115,10 +123,9 @@ export default {
} else {
uni.chooseFile(params)
}
}else{
} else {
this.$u.toast(`不能超过${this.limit}个`)
}
},
uploadFile(img) {
if (this.size > 0 && img.size > this.size) {
@@ -131,22 +138,29 @@ export default {
this.$emit('manual', img)
uni.hideLoading()
} else {
this.$http.post(this.action, formData, {
this.$http.post(this.api, formData, {
params: {type: this.type},
}).then((res) => {
uni.hideLoading()
if (res?.data) {
this.$emit('data', res.data)
this.$u.toast('上传成功!')
if (this.action == '/app/wxcp/upload/uploadFile') {
if (!this.action) {
if (this.type == 'image') {
const [image = "",] = res.data
this.fileList.push({url: image.split(";")[0], id: image.split(";")?.[1]})
} else if (this.type == 'video') {
const [video = "", thumb = ""] = res.data
this.fileList.push({url: video.split(";")[0], id: video.split(";")?.[1], thumb: thumb.split(";")[0]})
}
} else if (this.api == '/app/wxcp/upload/uploadFile') {
this.$emit('update:mediaId', res.data?.media?.mediaId)
this.$emit('update:fileId', res.data.file.id)
this.fileList.push(res.data.file)
} else if (this.action == '/admin/file/add2') {
} else if (this.api == '/admin/file/add2') {
let info = res.data
this.$emit('update:fileId', info?.id)
this.fileList.push(res.data)
} else if (this.action == '/admin/file/add-portrait') {
} else if (this.api == '/admin/file/add-portrait') {
this.fileList.push({url: res.data?.split(";")?.[0], id: res.data?.split(";")?.[1]})
}
this.$emit("update:def", this.fileList)
@@ -156,8 +170,7 @@ export default {
}
}).catch(err => {
this.$u.toast(err)
uni.hideLoading()
})
}).finally(() => uni.hideLoading())
}
},
@@ -174,15 +187,29 @@ export default {
line-height: normal;
margin-bottom: 16px;
.fileList {
.item {
display: flex;
align-items: center;
margin-bottom: 10px;
::v-deep.fileList {
display: flex;
flex-wrap: wrap;
image {
width: 160px;
height: 160px;
.item {
width: initial;
padding: 0 10px 10px 0;
position: relative;
.delBtn {
position: absolute;
right: -8px;
top: -8px;
z-index: 2;
border-radius: 50%;
overflow: hidden;
background-color: #fff;
height: 40px;
}
image, video {
width: 29vw;
height: 29vw;
}
i {
@@ -219,8 +246,8 @@ export default {
}
.default {
width: 240px;
height: 240px;
width: 30vw;
height: 30vw;
box-sizing: border-box;
border-radius: 8px;
background: #f3f4f7;
@@ -240,6 +267,12 @@ export default {
font-size: 28px;
}
}
.file {
width: 100vw;
display: flex;
align-items: center;
}
}
}
</style>