上传组件新增视频支持

This commit is contained in:
aixianling
2023-04-07 10:42:04 +08:00
parent 214f92bf05
commit 9e3ba31ef1
2 changed files with 37 additions and 30 deletions

View File

@@ -31,10 +31,7 @@ export default {
preview: Boolean, preview: Boolean,
link: Boolean, link: Boolean,
miniapp: Boolean, miniapp: Boolean,
file: { file: {default: () => ({})}
default: () => {
}
}
}, },
methods: { methods: {
...mapActions(['previewFile', 'injectJWeixin']), ...mapActions(['previewFile', 'injectJWeixin']),

View File

@@ -11,7 +11,7 @@
</div> </div>
<div class="imgList" v-else-if="type == 'video'"> <div class="imgList" v-else-if="type == 'video'">
<div class="item" v-for="(item, i) in fileList" :key="i"> <div class="item" v-for="(item, i) in fileList" :key="i">
<ai-image :src="item.url" :preview="preview"/> <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)"/> <u-icon v-if="!disabled" class="delBtn" color="#f46" name="close-circle-fill" size="40" @click="remove(i)"/>
</div> </div>
<div v-if="!disabled&&(fileList.length == 0 || (fileList.length < limit))" class="default" @click="upload"> <div v-if="!disabled&&(fileList.length == 0 || (fileList.length < limit))" class="default" @click="upload">
@@ -64,16 +64,22 @@ export default {
fileId: String, fileId: String,
mediaId: String, mediaId: String,
def: {default: () => []}, def: {default: () => []},
action: {default: '/admin/file/add'}, action: String,
preview: Boolean, preview: Boolean,
size: {default: 10 * 1024 * 1024}, size: {default: 10 * 1024 * 1024},
disabled: Boolean, disabled: Boolean,
}, },
computed: { computed: {
...mapState(['token']), ...mapState(['token']),
errorImage() { errorImage: v => v.$cdn + 'file.png',
return this.$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: { watch: {
def: { def: {
@@ -105,19 +111,17 @@ export default {
upload(wait) { upload(wait) {
let count = this.limit - (this.fileList?.length || 0) let count = this.limit - (this.fileList?.length || 0)
if (count > 0) { if (count > 0) {
let params = { const params = {
count, count,
sizeType: ['compressed'], sizeType: ['compressed'],
sourceType: ['album', 'camera'], sourceType: ['album', 'camera'],
success: (res) => { success: res => {
let count = this.fileList?.length + (res.tempFiles?.length || res.tempFile ? 1 : 0) let count = this.fileList?.length + (res.tempFiles?.length || res.tempFile ? 1 : 0)
if (count > this.limit && this.limit !== 1) { if (count > this.limit && this.limit !== 1) {
return this.$u.toast(`不能超过${this.limit}`) return this.$u.toast(`不能超过${this.limit}`)
} }
if (res.tempFiles) { if (res.tempFiles?.length > 0) {
res.tempFiles?.map((item) => { res.tempFiles.map(this.uploadFile)
this.uploadFile(item)
})
} else if (res?.tempFile) { } else if (res?.tempFile) {
this.uploadFile(res.tempFile) this.uploadFile(res.tempFile)
} }
@@ -125,9 +129,9 @@ export default {
} }
typeof wait == 'function' && wait() typeof wait == 'function' && wait()
if (this.type == 'image') { if (this.type == 'image') {
uni.chooseImage(params) uni.chooseMedia({...params, mediaType: ['image']})
} else if (this.type == 'video') { } else if (this.type == 'video') {
uni.chooseMedia(params) uni.chooseMedia({...params, mediaType: ['video']})
} else { } else {
uni.chooseFile(params) uni.chooseFile(params)
} }
@@ -144,38 +148,43 @@ export default {
this.$emit('manual', img) this.$emit('manual', img)
uni.hideLoading() uni.hideLoading()
} else { } else {
const filePath = img.path || img.tempFilePath
uni.uploadFile({ uni.uploadFile({
url: this.$instance.defaults.baseURL + this.action, url: this.$instance.defaults.baseURL + this.api,
filePath: img.path, filePath,
name: 'file', name: 'file',
header: { header: {
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data',
Authorization: uni.getStorageSync('token'), Authorization: this.token,
}, },
success: response => { success: response => {
const res = JSON.parse(response.data) const res = JSON.parse(response.data)
if (res?.data) { if (res?.data) {
this.$emit('data', res.data) this.$emit('data', res.data)
this.$u.toast('上传成功!') this.$u.toast('上传成功!')
if (this.action.endsWith('/file/add')) { if (!this.action) {//默认组件接口
this.fileList.push({url: res.data?.[0]?.split(";")?.[0], id: res.data?.[0]?.split(";")?.[1]}) if (this.type == 'image') {
} else if (this.action == '/admin/file/add2') { 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 == '/admin/file/add2') {
let info = res.data let info = res.data
this.$emit('update:fileId', info?.id) this.$emit('update:fileId', info?.id)
this.fileList.push(res.data) 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.fileList.push({url: res.data?.split(";")?.[0], id: res.data?.split(";")?.[1]})
} }
this.$emit("update:def", this.fileList)
this.$emit("input", this.fileList) this.$emit("input", this.fileList)
this.$emit("update:def", this.fileList)
} else { } else {
this.$u.toast(res.msg) this.$u.toast(res.msg)
} }
}, },
fail: err => { fail: console.error,
console.error(err) complete: uni.hideLoading
},
complete: () => uni.hideLoading()
}) })
} }
@@ -212,9 +221,10 @@ export default {
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
height: 40px;
} }
image { image,video {
width: 29vw; width: 29vw;
height: 29vw; height: 29vw;
} }