上传组件新增视频支持
This commit is contained in:
@@ -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']),
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user