add 视频上传组件
This commit is contained in:
heyi
110
.zsign_cache/53ee2fcc19c32ebe813720bf2af2683c47d6be54.json
Normal file
110
.zsign_cache/53ee2fcc19c32ebe813720bf2af2683c47d6be54.json
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"bid" : "i.Vecocraft.com",
|
||||||
|
"bver" : "130812",
|
||||||
|
"changed" :
|
||||||
|
[
|
||||||
|
"Frameworks/libswiftCoreImage.dylib",
|
||||||
|
"Frameworks/libswiftObjectiveC.dylib",
|
||||||
|
"Frameworks/libswiftCore.dylib",
|
||||||
|
"Frameworks/libswiftCoreGraphics.dylib",
|
||||||
|
"Frameworks/libswiftUIKit.dylib",
|
||||||
|
"Frameworks/libswiftMetal.dylib",
|
||||||
|
"Frameworks/libswiftDispatch.dylib",
|
||||||
|
"Frameworks/libswiftos.dylib",
|
||||||
|
"Frameworks/libswiftCoreFoundation.dylib",
|
||||||
|
"Frameworks/libswiftDarwin.dylib",
|
||||||
|
"Frameworks/libswiftQuartzCore.dylib",
|
||||||
|
"Frameworks/libswiftCoreAudio.dylib",
|
||||||
|
"Frameworks/libswiftAVFoundation.dylib",
|
||||||
|
"Frameworks/libswiftNetwork.dylib",
|
||||||
|
"Frameworks/libswiftFoundation.dylib",
|
||||||
|
"Frameworks/libswiftCoreMedia.dylib",
|
||||||
|
"Frameworks/libswiftsimd.dylib",
|
||||||
|
"Frameworks/DCloudUTSExtAPI.framework/_CodeSignature/CodeResources",
|
||||||
|
"Frameworks/DCloudUTSExtAPI.framework/DCloudUTSExtAPI",
|
||||||
|
"Frameworks/UPLiveSDKDll.framework/_CodeSignature/CodeResources",
|
||||||
|
"Frameworks/UPLiveSDKDll.framework/UPLiveSDKDll",
|
||||||
|
"Frameworks/KSAdSDK.framework/_CodeSignature/CodeResources",
|
||||||
|
"Frameworks/KSAdSDK.framework/KSAdSDK",
|
||||||
|
"Frameworks/DCUniBase.framework/_CodeSignature/CodeResources",
|
||||||
|
"Frameworks/DCUniBase.framework/DCUniBase",
|
||||||
|
"Frameworks/DCloudUTSFoundation.framework/_CodeSignature/CodeResources",
|
||||||
|
"Frameworks/DCloudUTSFoundation.framework/DCloudUTSFoundation",
|
||||||
|
"embedded.mobileprovision"
|
||||||
|
],
|
||||||
|
"exec" : "HBuilder",
|
||||||
|
"files" :
|
||||||
|
[
|
||||||
|
"Frameworks/libswiftCoreImage.dylib",
|
||||||
|
"Frameworks/libswiftObjectiveC.dylib",
|
||||||
|
"Frameworks/libswiftCore.dylib",
|
||||||
|
"Frameworks/libswiftCoreGraphics.dylib",
|
||||||
|
"Frameworks/libswiftUIKit.dylib",
|
||||||
|
"Frameworks/libswiftMetal.dylib",
|
||||||
|
"Frameworks/libswiftDispatch.dylib",
|
||||||
|
"Frameworks/libswiftos.dylib",
|
||||||
|
"Frameworks/libswiftCoreFoundation.dylib",
|
||||||
|
"Frameworks/libswiftDarwin.dylib",
|
||||||
|
"Frameworks/libswiftQuartzCore.dylib",
|
||||||
|
"Frameworks/libswiftCoreAudio.dylib",
|
||||||
|
"Frameworks/libswiftAVFoundation.dylib",
|
||||||
|
"Frameworks/libswiftNetwork.dylib",
|
||||||
|
"Frameworks/libswiftFoundation.dylib",
|
||||||
|
"Frameworks/libswiftCoreMedia.dylib",
|
||||||
|
"Frameworks/libswiftsimd.dylib"
|
||||||
|
],
|
||||||
|
"folders" :
|
||||||
|
[
|
||||||
|
|
||||||
|
{
|
||||||
|
"bid" : "io.dcloud.uts.extAPI",
|
||||||
|
"bver" : "1",
|
||||||
|
"exec" : "DCloudUTSExtAPI",
|
||||||
|
"path" : "Frameworks/DCloudUTSExtAPI.framework",
|
||||||
|
"sha1" : "JWUJHTplsbZkb/6Y+0/uU1rBH8Q=",
|
||||||
|
"sha2" : "8MJ4miTKOp7FVjxQoXK34vGzGwSJmfeU47eeo+iyqcE="
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"bid" : "upyun.UPLiveSDKDll",
|
||||||
|
"bver" : "1",
|
||||||
|
"exec" : "UPLiveSDKDll",
|
||||||
|
"path" : "Frameworks/UPLiveSDKDll.framework",
|
||||||
|
"sha1" : "9ptoKpCP6CY3FmnLi23Q+jvoi7c=",
|
||||||
|
"sha2" : "rFhl5jJHqlgZQGVpjM6Punk8/08j/bnaPAhh3+4Ydow="
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"bid" : "org.cocoapods.KSAdSDK",
|
||||||
|
"bver" : "1",
|
||||||
|
"exec" : "KSAdSDK",
|
||||||
|
"path" : "Frameworks/KSAdSDK.framework",
|
||||||
|
"sha1" : "mkr21+4EVEPKeHJe4dHCOu3Slz8=",
|
||||||
|
"sha2" : "Z9NplXKWcLK3b0qwE8NfkBUkoi65IzUvbPluwvOVtaA="
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"bid" : "io.dcloud.DCUniBaseUniMP",
|
||||||
|
"bver" : "1",
|
||||||
|
"exec" : "DCUniBase",
|
||||||
|
"path" : "Frameworks/DCUniBase.framework",
|
||||||
|
"sha1" : "2CM/fmT8mSnXc8qzB4PVTHGy07Y=",
|
||||||
|
"sha2" : "uCr2iDfDT8Uc8Exrs84CLfFXYLFes+RqG08ZocIX+D4="
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"bid" : "io.dcloud.DCloudUTSFoundationUniMP",
|
||||||
|
"bver" : "1",
|
||||||
|
"exec" : "DCloudUTSFoundation",
|
||||||
|
"path" : "Frameworks/DCloudUTSFoundation.framework",
|
||||||
|
"sha1" : "UewpPI8hlP1Xh/LykWNHYyCLODA=",
|
||||||
|
"sha2" : "+7a9Z+PWzxs289onTEciNRLxy1IKYHl/SMk9r/SX2pU="
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"name" : "HBuilder",
|
||||||
|
"path" : "/",
|
||||||
|
"root" : "/var/folders/sm/krxx7th91fvc1l5tn2hs2gf00000gn/T/HbuilderXSignture/Payload/HBuilder.app",
|
||||||
|
"sha1" : "NxkZw3S8J3//xaGqM7Wa1gzomgw=",
|
||||||
|
"sha2" : "/iYMeaDQc+dmAIt8WEtrJaKMKI1NL/MDkuwnXISQjFI="
|
||||||
|
}
|
||||||
845
components/htz-image-upload/htz-image-upload.vue
Normal file
845
components/htz-image-upload/htz-image-upload.vue
Normal file
@@ -0,0 +1,845 @@
|
|||||||
|
<template>
|
||||||
|
<view class="htz-image-upload-list">
|
||||||
|
<view class="htz-image-upload-Item" v-for="(item,index) in uploadLists" :key="index">
|
||||||
|
<view class="htz-image-upload-Item-video" v-if="isVideo(item)">
|
||||||
|
<!-- #ifndef APP-PLUS -->
|
||||||
|
<video :disabled="false" :controls="false" :src="getFileUrl(item)">
|
||||||
|
<cover-view class="htz-image-upload-Item-video-fixed" @click="previewVideo(getFileUrl(item))">
|
||||||
|
</cover-view>
|
||||||
|
|
||||||
|
<cover-view class="htz-image-upload-Item-del-cover" v-if="remove && previewVideoSrc==''" @click="imgDel(index)">×</cover-view>
|
||||||
|
|
||||||
|
</video>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-PLUS -->
|
||||||
|
<view class="htz-image-upload-Item-video-fixed" @click="previewVideo(getFileUrl(item))"></view>
|
||||||
|
<image v-if="dataType==1 && item.cover" class="htz-image-upload-Item-video-app-poster" mode="widthFix" :src="item.cover"></image>
|
||||||
|
<image v-else class="htz-image-upload-Item-video-app-poster" mode="widthFix" :src="appVideoPoster"></image>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<image v-else :src="getFileUrl(item)" @click="imgPreview(getFileUrl(item))"></image>
|
||||||
|
|
||||||
|
<view class="htz-image-upload-Item-del" v-if="remove" @click="imgDel(index)">×</view>
|
||||||
|
</view>
|
||||||
|
<view class="htz-image-upload-Item htz-image-upload-Item-add" v-if="uploadLists.length<max && add" @click="chooseFile">
|
||||||
|
+
|
||||||
|
</view>
|
||||||
|
<view class="preview-full" v-if="previewVideoSrc!=''">
|
||||||
|
<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
|
||||||
|
<cover-view class="preview-full-close" @click="previewVideoClose"> ×
|
||||||
|
</cover-view>
|
||||||
|
</video>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.ceshi {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
color: #2C405A;
|
||||||
|
opacity: 0.5;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'htz-image-upload',
|
||||||
|
props: {
|
||||||
|
max: { //展示图片最大值
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
chooseNum: { //选择图片数
|
||||||
|
type: Number,
|
||||||
|
default: 9,
|
||||||
|
},
|
||||||
|
name: { //发到后台的文件参数名
|
||||||
|
type: String,
|
||||||
|
default: 'file',
|
||||||
|
},
|
||||||
|
dataType: { //v-model的数据结构类型
|
||||||
|
type: Number,
|
||||||
|
default: 0, // 0: ['http://xxxx.jpg','http://xxxx.jpg'] 1:[{type:0,url:'http://xxxx.jpg'}] type 0 图片 1 视频 url 文件地址 此类型是为了给没有文件后缀的状况使用的
|
||||||
|
},
|
||||||
|
remove: { //是否展示删除按钮
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
add: { //是否展示添加按钮
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
disabled: { //是否禁用
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
sourceType: { //选择照片来源 【ps：H5就别费劲了，设置了也没用。不是我说的，官方文档就这样！！！】
|
||||||
|
type: Array,
|
||||||
|
default: () => ['album', 'camera'],
|
||||||
|
},
|
||||||
|
action: { //上传地址 如需使用uniCloud服务，设置为uniCloud即可
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
headers: { //上传的请求头部
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
formData: { //HTTP 请求中其他额外的 form data
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
compress: { //是否需要压缩
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
quality: { //压缩质量，范围0～100
|
||||||
|
type: Number,
|
||||||
|
default: 80,
|
||||||
|
},
|
||||||
|
// #ifndef VUE3
|
||||||
|
value: { //受控图片列表
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
modelValue: { //受控图片列表
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
uploadSuccess: {
|
||||||
|
default: (res) => {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
url: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mediaType: { //文件类型 image/video/all
|
||||||
|
type: String,
|
||||||
|
default: 'image',
|
||||||
|
},
|
||||||
|
maxDuration: { //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。 (只针对拍摄视频有用)
|
||||||
|
type: Number,
|
||||||
|
default: 60,
|
||||||
|
},
|
||||||
|
camera: { //'front'、'back'，默认'back'(只针对拍摄视频有用)
|
||||||
|
type: String,
|
||||||
|
default: 'back',
|
||||||
|
},
|
||||||
|
appVideoPoster: { //app端视频展示封面 只对app有效
|
||||||
|
type: String,
|
||||||
|
default: '/static/htz-image-upload/play.png',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
uploadLists: [],
|
||||||
|
mediaTypeData: ['image', 'video', 'all'],
|
||||||
|
previewVideoSrc: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function() {
|
||||||
|
this.$nextTick(function() {
|
||||||
|
// #ifndef VUE3
|
||||||
|
this.uploadLists = this.value;
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
this.uploadLists = this.modelValue;
|
||||||
|
// #endif
|
||||||
|
if (this.mediaTypeData.indexOf(this.mediaType) == -1) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: 'mediaType参数不正确',
|
||||||
|
showCancel: false,
|
||||||
|
success: function(res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
//console.log('用户点击确定');
|
||||||
|
} else if (res.cancel) {
|
||||||
|
//console.log('用户点击取消');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// #ifndef VUE3
|
||||||
|
value(val, oldVal) {
|
||||||
|
//console.log('value',val, oldVal)
|
||||||
|
this.uploadLists = val;
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
modelValue(val, oldVal) {
|
||||||
|
//console.log('value',val, oldVal)
|
||||||
|
this.uploadLists = val;
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isVideo(item) {
|
||||||
|
let isPass = false
|
||||||
|
if ((!/.(gif|jpg|jpeg|png|gif|jpg|png)$/i.test(item) && this.dataType == 0) || (this.dataType == 1 && item
|
||||||
|
.type == 1)) {
|
||||||
|
isPass = true
|
||||||
|
}
|
||||||
|
return isPass
|
||||||
|
},
|
||||||
|
getFileUrl(item) {
|
||||||
|
var url = item;
|
||||||
|
if (this.dataType == 1) {
|
||||||
|
url = item.url
|
||||||
|
}
|
||||||
|
//console.log('url', url)
|
||||||
|
return url
|
||||||
|
},
|
||||||
|
previewVideo(src) {
|
||||||
|
this.previewVideoSrc = src;
|
||||||
|
// this.previewVideoSrc =
|
||||||
|
// 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-fbd63a76-dc76-485c-b711-f79f2986daeb/ba804d82-860b-4d1a-a706-5a4c8ce137c3.mp4'
|
||||||
|
},
|
||||||
|
previewVideoClose() {
|
||||||
|
this.previewVideoSrc = ''
|
||||||
|
//console.log('previewVideoClose', this.previewVideoSrc)
|
||||||
|
},
|
||||||
|
imgDel(index) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '您确定要删除么?',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
// this.uploadLists.splice(index, 1)
|
||||||
|
// this.$emit("input", this.uploadLists);
|
||||||
|
// this.$emit("imgDelete", this.uploadLists);
|
||||||
|
let delUrl = this.uploadLists[index]
|
||||||
|
this.uploadLists.splice(index, 1)
|
||||||
|
// #ifndef VUE3
|
||||||
|
this.$emit("input", this.uploadLists);
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
this.$emit("update:modelValue", this.uploadLists);
|
||||||
|
// #endif
|
||||||
|
this.$emit("imgDelete", {
|
||||||
|
del: delUrl,
|
||||||
|
tempFilePaths: this.uploadLists
|
||||||
|
});
|
||||||
|
} else if (res.cancel) {}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
imgPreview(index) {
|
||||||
|
|
||||||
|
var imgData = []
|
||||||
|
|
||||||
|
this.uploadLists.forEach(item => {
|
||||||
|
if (!this.isVideo(item)) {
|
||||||
|
imgData.push(this.getFileUrl(item))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
//console.log('imgPreview', imgData)
|
||||||
|
uni.previewImage({
|
||||||
|
urls: imgData,
|
||||||
|
current: index,
|
||||||
|
loop: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
chooseFile() {
|
||||||
|
if (this.disabled) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
switch (this.mediaTypeData.indexOf(this.mediaType)) {
|
||||||
|
case 1: //视频
|
||||||
|
this.videoAdd();
|
||||||
|
break;
|
||||||
|
case 2: //全部
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: ['相册', '视频'],
|
||||||
|
success: (res) => {
|
||||||
|
if (res.tapIndex == 1) {
|
||||||
|
this.videoAdd();
|
||||||
|
} else if (res.tapIndex == 0) {
|
||||||
|
this.imgAdd();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
console.log(res.errMsg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default: //图片
|
||||||
|
this.imgAdd();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//if(this.mediaType=='image'){
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
videoAdd() {
|
||||||
|
//console.log('videoAdd')
|
||||||
|
let nowNum = Math.abs(this.uploadLists.length - this.max);
|
||||||
|
let thisNum = (this.chooseNum > nowNum ? nowNum : this.chooseNum) //可选数量
|
||||||
|
uni.chooseVideo({
|
||||||
|
compressed: false,
|
||||||
|
sourceType: this.sourceType,
|
||||||
|
camera: this.camera,
|
||||||
|
maxDuration: this.maxDuration,
|
||||||
|
success: (res) => {
|
||||||
|
console.log('videoAdd', res)
|
||||||
|
// console.log(res.tempFilePath)
|
||||||
|
this.chooseSuccessMethod([res.tempFilePath], 1);
|
||||||
|
//this.imgUpload([res.tempFilePath]);
|
||||||
|
//console.log('tempFiles', res)
|
||||||
|
// if (this.action == '') { //未配置上传路径
|
||||||
|
// this.$emit("chooseSuccess", res.tempFilePaths);
|
||||||
|
// } else {
|
||||||
|
// if (this.compress && (res.tempFiles[0].size / 1024 > 1025)) { //设置了需要压缩 并且 文件大于1M，进行压缩上传
|
||||||
|
// this.imgCompress(res.tempFilePaths);
|
||||||
|
// } else {
|
||||||
|
// this.imgUpload(res.tempFilePaths);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
imgAdd() {
|
||||||
|
//console.log('imgAdd')
|
||||||
|
let nowNum = Math.abs(this.uploadLists.length - this.max);
|
||||||
|
let thisNum = (this.chooseNum > nowNum ? nowNum : this.chooseNum) //可选数量
|
||||||
|
//console.log('nowNum', nowNum)
|
||||||
|
//console.log('thisNum', thisNum)
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
if (this.sourceType.length > 1) {
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: ['拍摄', '从手机相册选择'],
|
||||||
|
success: (res) => {
|
||||||
|
if (res.tapIndex == 1) {
|
||||||
|
this.appGallery(thisNum);
|
||||||
|
} else if (res.tapIndex == 0) {
|
||||||
|
this.appCamera();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
console.log(res.errMsg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (this.sourceType.length == 1 && this.sourceType.indexOf('album') > -1) {
|
||||||
|
this.appGallery(thisNum);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.sourceType.length == 1 && this.sourceType.indexOf('camera') > -1) {
|
||||||
|
this.appCamera();
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
//#ifndef APP-PLUS
|
||||||
|
uni.chooseImage({
|
||||||
|
count: thisNum,
|
||||||
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||||
|
sourceType: this.sourceType,
|
||||||
|
success: (res) => {
|
||||||
|
this.chooseSuccessMethod(res.tempFilePaths, 0)
|
||||||
|
//console.log('tempFiles', res)
|
||||||
|
// if (this.action == '') { //未配置上传路径
|
||||||
|
// this.$emit("chooseSuccess", res.tempFilePaths);
|
||||||
|
// } else {
|
||||||
|
// if (this.compress && (res.tempFiles[0].size / 1024 > 1025)) { //设置了需要压缩 并且 文件大于1M，进行压缩上传
|
||||||
|
// this.imgCompress(res.tempFilePaths);
|
||||||
|
// } else {
|
||||||
|
// this.imgUpload(res.tempFilePaths);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
appCamera() {
|
||||||
|
var cmr = plus.camera.getCamera();
|
||||||
|
var res = cmr.supportedImageResolutions[0];
|
||||||
|
var fmt = cmr.supportedImageFormats[0];
|
||||||
|
//console.log("Resolution: " + res + ", Format: " + fmt);
|
||||||
|
cmr.captureImage((path) => {
|
||||||
|
//alert("Capture image success: " + path);
|
||||||
|
this.chooseSuccessMethod([path], 0)
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
//alert("Capture image failed: " + error.message);
|
||||||
|
console.log("Capture image failed: " + error.message)
|
||||||
|
}, {
|
||||||
|
resolution: res,
|
||||||
|
format: fmt
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
appGallery(maxNum) {
|
||||||
|
plus.gallery.pick((res) => {
|
||||||
|
this.chooseSuccessMethod(res.files, 0)
|
||||||
|
}, function(e) {
|
||||||
|
//console.log("取消选择图片");
|
||||||
|
}, {
|
||||||
|
filter: "image",
|
||||||
|
multiple: true,
|
||||||
|
maximum: maxNum
|
||||||
|
});
|
||||||
|
},
|
||||||
|
chooseSuccessMethod(filePaths, type) {
|
||||||
|
if (this.action == '') { //未配置上传路径
|
||||||
|
this.$emit("chooseSuccess", filePaths, type); //filePaths 路径 type 0 为图片 1为视频
|
||||||
|
} else {
|
||||||
|
if (type == 1) {
|
||||||
|
this.imgUpload(filePaths, type);
|
||||||
|
} else {
|
||||||
|
if (this.compress) { //设置了需要压缩
|
||||||
|
this.imgCompress(filePaths, type);
|
||||||
|
} else {
|
||||||
|
this.imgUpload(filePaths, type);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
imgCompress(tempFilePaths, type) { //type 0 为图片 1为视频
|
||||||
|
uni.showLoading({
|
||||||
|
title: '压缩中...'
|
||||||
|
});
|
||||||
|
|
||||||
|
let compressImgs = [];
|
||||||
|
let results = [];
|
||||||
|
tempFilePaths.forEach((item, index) => {
|
||||||
|
compressImgs.push(new Promise((resolve, reject) => {
|
||||||
|
// #ifndef H5
|
||||||
|
uni.compressImage({
|
||||||
|
src: item,
|
||||||
|
quality: this.quality,
|
||||||
|
success: res => {
|
||||||
|
//console.log('compressImage', res.tempFilePath)
|
||||||
|
results.push(res.tempFilePath);
|
||||||
|
resolve(res.tempFilePath);
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
//console.log(err.errMsg);
|
||||||
|
reject(err);
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
//uni.hideLoading();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifdef H5
|
||||||
|
this.canvasDataURL(item, {
|
||||||
|
quality: this.quality / 100
|
||||||
|
}, (base64Codes) => {
|
||||||
|
//this.imgUpload(base64Codes);
|
||||||
|
results.push(base64Codes);
|
||||||
|
resolve(base64Codes);
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
Promise.all(compressImgs) //执行所有需请求的接口
|
||||||
|
.then((results) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
//console.log('imgCompress', type)
|
||||||
|
this.imgUpload(results, type);
|
||||||
|
})
|
||||||
|
.catch((res, object) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
imgUpload(tempFilePaths, type) { //type 0 为图片 1为视频
|
||||||
|
// if (this.action == '') {
|
||||||
|
// uni.showToast({
|
||||||
|
// title: '未配置上传地址',
|
||||||
|
// icon: 'none',
|
||||||
|
// duration: 2000
|
||||||
|
// });
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
if (this.action == 'uniCloud') {
|
||||||
|
this.uniCloudUpload(tempFilePaths, type)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
uni.showLoading({
|
||||||
|
title: '上传中'
|
||||||
|
});
|
||||||
|
//console.log('imgUpload', tempFilePaths)
|
||||||
|
let uploadImgs = [];
|
||||||
|
tempFilePaths.forEach((item, index) => {
|
||||||
|
uploadImgs.push(new Promise((resolve, reject) => {
|
||||||
|
//console.log(index, item)
|
||||||
|
const uploadTask = uni.uploadFile({
|
||||||
|
url: this.action, //仅为示例，非真实的接口地址
|
||||||
|
filePath: item,
|
||||||
|
name: this.name,
|
||||||
|
fileType: 'image',
|
||||||
|
formData: this.formData,
|
||||||
|
header: this.headers,
|
||||||
|
success: (uploadFileRes) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
//console.log(typeof this.uploadSuccess)
|
||||||
|
//console.log('')
|
||||||
|
uploadFileRes.fileType = type
|
||||||
|
if (typeof this.uploadSuccess == 'function') {
|
||||||
|
|
||||||
|
let thisUploadSuccess = this.uploadSuccess(
|
||||||
|
uploadFileRes)
|
||||||
|
if (thisUploadSuccess.success) {
|
||||||
|
let keyName = '';
|
||||||
|
// #ifndef VUE3
|
||||||
|
keyName = 'value'
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
keyName = 'modelValue'
|
||||||
|
// #endif
|
||||||
|
if (this.dataType == 0) {
|
||||||
|
this[keyName].push(thisUploadSuccess.url)
|
||||||
|
} else {
|
||||||
|
this[keyName].push({
|
||||||
|
type: type,
|
||||||
|
url: thisUploadSuccess.url,
|
||||||
|
...thisUploadSuccess
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.$emit("input", this.uploadLists);
|
||||||
|
// #ifndef VUE3
|
||||||
|
this.$emit("input", this.uploadLists);
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
this.$emit("update:modelValue", this.uploadLists);
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
resolve(uploadFileRes);
|
||||||
|
this.$emit("uploadSuccess", uploadFileRes);
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.log(err);
|
||||||
|
uni.hideLoading();
|
||||||
|
reject(err);
|
||||||
|
this.$emit("uploadFail", err);
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
uploadTask.onProgressUpdate((res) => {
|
||||||
|
console.log('上传进度' + res.progress);
|
||||||
|
console.log('已经上传的数据长度' + res.totalBytesSent);
|
||||||
|
console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
|
||||||
|
// 测试条件，取消上传任务。
|
||||||
|
// if (res.progress > 50) {
|
||||||
|
// uploadTask.abort();
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
Promise.all(uploadImgs) //执行所有需请求的接口
|
||||||
|
.then((results) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
})
|
||||||
|
.catch((res, object) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.$emit("uploadFail", res);
|
||||||
|
});
|
||||||
|
// uploadTask.onProgressUpdate((res) => {
|
||||||
|
// //console.log('',)
|
||||||
|
// uni.showLoading({
|
||||||
|
// title: '上传中' + res.progress + '%'
|
||||||
|
// });
|
||||||
|
// if (res.progress == 100) {
|
||||||
|
// uni.hideLoading();
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
uniCloudUpload(tempFilePaths, type) {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '上传中'
|
||||||
|
});
|
||||||
|
console.log('uniCloudUpload', tempFilePaths);
|
||||||
|
let uploadImgs = [];
|
||||||
|
tempFilePaths.forEach((item, index) => {
|
||||||
|
uploadImgs.push(new Promise((resolve, reject) => {
|
||||||
|
|
||||||
|
uniCloud.uploadFile({
|
||||||
|
filePath: item,
|
||||||
|
cloudPath: this.guid() + '.' + this.getFileType(item, type),
|
||||||
|
success(uploadFileRes) {
|
||||||
|
if (uploadFileRes.success) {
|
||||||
|
resolve(uploadFileRes.fileID);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail(err) {
|
||||||
|
console.log(err);
|
||||||
|
reject(err);
|
||||||
|
},
|
||||||
|
complete() {}
|
||||||
|
});
|
||||||
|
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
Promise.all(uploadImgs) //执行所有需请求的接口
|
||||||
|
.then((results) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
// console.log('then', results)
|
||||||
|
|
||||||
|
uniCloud.getTempFileURL({
|
||||||
|
fileList: results,
|
||||||
|
success: (res) => {
|
||||||
|
//console.log('success',res.fileList)
|
||||||
|
res.fileList.forEach(item => {
|
||||||
|
//console.log(item.tempFileURL)
|
||||||
|
//this.value.push(item.tempFileURL)
|
||||||
|
// #ifndef VUE3
|
||||||
|
this.value.push(item.tempFileURL)
|
||||||
|
this.$emit("input", this.value);
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
this.modelValue.push(item.tempFileURL)
|
||||||
|
this.$emit("update:modelValue", this.modelValue);
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail() {},
|
||||||
|
complete() {}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((res, object) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getFileType(path, type) { //手机端默认图片为jpg 视频为mp4
|
||||||
|
// #ifdef H5
|
||||||
|
var result = type == 0 ? 'jpg' : 'mp4';
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
var result = path.split('.').pop().toLowerCase();
|
||||||
|
// #ifdef MP
|
||||||
|
if (this.compress) { //微信小程序压缩完没有后缀
|
||||||
|
result = type == 0 ? 'jpg' : 'mp4';
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #endif
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
guid() {
|
||||||
|
return 'xxxxxxxx-date-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||||
|
var r = Math.random() * 16 | 0,
|
||||||
|
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||||||
|
return v.toString(16);
|
||||||
|
}).replace(/date/g, function(c) {
|
||||||
|
return Date.parse(new Date());
|
||||||
|
});
|
||||||
|
},
|
||||||
|
canvasDataURL(path, obj, callback) {
|
||||||
|
var img = new Image();
|
||||||
|
img.src = path;
|
||||||
|
img.onload = function() {
|
||||||
|
var that = this;
|
||||||
|
// 默认按比例压缩
|
||||||
|
var w = that.width,
|
||||||
|
h = that.height,
|
||||||
|
scale = w / h;
|
||||||
|
w = obj.width || w;
|
||||||
|
h = obj.height || (w / scale);
|
||||||
|
var quality = 0.8; // 默认图片质量为0.8
|
||||||
|
//生成canvas
|
||||||
|
var canvas = document.createElement('canvas');
|
||||||
|
var ctx = canvas.getContext('2d');
|
||||||
|
// 创建属性节点
|
||||||
|
var anw = document.createAttribute("width");
|
||||||
|
anw.nodeValue = w;
|
||||||
|
var anh = document.createAttribute("height");
|
||||||
|
anh.nodeValue = h;
|
||||||
|
canvas.setAttributeNode(anw);
|
||||||
|
canvas.setAttributeNode(anh);
|
||||||
|
ctx.drawImage(that, 0, 0, w, h);
|
||||||
|
// 图像质量
|
||||||
|
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
|
||||||
|
quality = obj.quality;
|
||||||
|
}
|
||||||
|
// quality值越小，所绘制出的图像越模糊
|
||||||
|
var base64 = canvas.toDataURL('image/jpeg', quality);
|
||||||
|
// 回调函数返回base64的值
|
||||||
|
callback(base64);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.preview-full {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1002;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-full video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1002;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-full-close {
|
||||||
|
position: fixed;
|
||||||
|
right: 32rpx;
|
||||||
|
top: 25rpx;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1003;
|
||||||
|
/* background-color: #808080; */
|
||||||
|
color: #fff;
|
||||||
|
font-size: 65rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 1px 2px 5px rgb(0 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* .preview-full-close-before,
|
||||||
|
.preview-full-close-after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
content: '';
|
||||||
|
height: 60rpx;
|
||||||
|
margin-top: -30rpx;
|
||||||
|
width: 6rpx;
|
||||||
|
margin-left: -3rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
z-index: 20000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-full-close-before {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-full-close-after {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
|
||||||
|
} */
|
||||||
|
|
||||||
|
.htz-image-upload-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.htz-image-upload-Item {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
margin: 13rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.htz-image-upload-Item image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.htz-image-upload-Item-video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.htz-image-upload-Item-video-fixed {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
z-index: 996;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.htz-image-upload-Item video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.htz-image-upload-Item-add {
|
||||||
|
font-size: 105rpx;
|
||||||
|
/* line-height: 160rpx; */
|
||||||
|
text-align: center;
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
color: #d9d9d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.htz-image-upload-Item-del {
|
||||||
|
background-color: #f5222d;
|
||||||
|
font-size: 24rpx;
|
||||||
|
position: absolute;
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
line-height: 35rpx;
|
||||||
|
text-align: center;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 997;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.htz-image-upload-Item-del-cover {
|
||||||
|
background-color: #f5222d;
|
||||||
|
font-size: 24rpx;
|
||||||
|
position: absolute;
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
text-align: center;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
color: #fff;
|
||||||
|
/* #ifdef APP-PLUS */
|
||||||
|
line-height: 25rpx;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-PLUS */
|
||||||
|
line-height: 35rpx;
|
||||||
|
/* #endif */
|
||||||
|
z-index: 997;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.htz-image-upload-Item-video-app-poster {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
// 应用全局配置
|
// 应用全局配置
|
||||||
module.exports = {
|
module.exports = {
|
||||||
baseUrl: 'http://localhost:8080',
|
baseUrl: 'http://localhost:8080',
|
||||||
fileUploadUrl: 'http://192.168.1.135:8080/prod-api/uploadImage',
|
fileUploadUrl: 'http://192.168.1.118:8080/lxk/uploadImage',
|
||||||
WebSocketUrl: 'ws://121.199.24.205:9107/lxk/websocket',
|
WebSocketUrl: 'ws://121.199.24.205:9107/lxk/websocket',
|
||||||
WebSocketOpen: true,
|
WebSocketOpen: true,
|
||||||
// 应用信息
|
// 应用信息
|
||||||
|
|||||||
20
package.json
Normal file
20
package.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"id": "htz-image-upload",
|
||||||
|
"name": "图片 视频上传 预览 支持uniCloud上传 支持vue3【简单好上手】",
|
||||||
|
"displayName": "图片 视频上传 预览 支持uniCloud上传 支持vue3【简单好上手】",
|
||||||
|
"version": "0.2.3",
|
||||||
|
"description": "可选择添加/删除图片/视频，可以预览，可以压缩（包括H5压缩）(解决了安卓10问题)，支持上传到服务器后台，也支持uniCloud，可以在vue3使用，能满足大部分场景",
|
||||||
|
"keywords": [
|
||||||
|
"上传",
|
||||||
|
"预览图片",
|
||||||
|
"视频上传",
|
||||||
|
"uniCloud",
|
||||||
|
"vue3"
|
||||||
|
],
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -7,9 +7,19 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="">
|
<view class="">
|
||||||
|
<label for="">图片上传组件</label>
|
||||||
|
<view class="video-upload">
|
||||||
|
<!-- <video-upload v-model="video" /> -->
|
||||||
|
<htz-image-upload :max="3" v-model="video" :uploadSuccess="ceshiUploadSuccess"
|
||||||
|
:action="upLoadUrl" :headers="headers">
|
||||||
|
</htz-image-upload>
|
||||||
|
</view>
|
||||||
<label for="">视频上传组件</label>
|
<label for="">视频上传组件</label>
|
||||||
<view class="video-upload">
|
<view class="video-upload">
|
||||||
<video-upload v-model="video" />
|
<!-- <video-upload v-model="video" /> -->
|
||||||
|
<htz-image-upload :max="3" v-model="video2" :compress="false" mediaType="video" :uploadSuccess="ceshiUploadSuccess2"
|
||||||
|
:action="upLoadUrl" :headers="headers">
|
||||||
|
</htz-image-upload>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="">
|
<view class="">
|
||||||
@@ -22,25 +32,72 @@
|
|||||||
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrcode" :options="{ margin: 10 }"></uqrcode>
|
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrcode" :options="{ margin: 10 }"></uqrcode>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
<z-image src="https://jidansc.oss-cn-hangzhou.aliyuncs.com/2023/05/06/b2149e0fb0fc49ad8a8137f175b6f45f.jpg"></z-image>
|
<z-image
|
||||||
|
src="https://jidansc.oss-cn-hangzhou.aliyuncs.com/2023/05/06/b2149e0fb0fc49ad8a8137f175b6f45f.jpg"></z-image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import config from '@/config';
|
||||||
|
import {
|
||||||
|
getToken
|
||||||
|
} from '@/utils/auth';
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
qrcode: 'https://uqrcode.cn/doc',
|
qrcode: 'https://uqrcode.cn/doc',
|
||||||
images: 'https://jidansc.oss-cn-hangzhou.aliyuncs.com/2023/05/06/b2149e0fb0fc49ad8a8137f175b6f45f.jpg,https://jidansc.oss-cn-hangzhou.aliyuncs.com/2023/05/06/ce6a0adece6f461c9c2b50933adf8d62.jpg,https://jidansc.oss-cn-hangzhou.aliyuncs.com/2023/05/06/cca1213a9be0402788d32035a39acbb5.jpg,https://jidansc.oss-cn-hangzhou.aliyuncs.com/2023/05/06/f882c188b16a41daa86e550fa6213cf2.jpg',
|
images: 'https://jidansc.oss-cn-hangzhou.aliyuncs.com/2023/05/06/b2149e0fb0fc49ad8a8137f175b6f45f.jpg,https://jidansc.oss-cn-hangzhou.aliyuncs.com/2023/05/06/ce6a0adece6f461c9c2b50933adf8d62.jpg,https://jidansc.oss-cn-hangzhou.aliyuncs.com/2023/05/06/cca1213a9be0402788d32035a39acbb5.jpg,https://jidansc.oss-cn-hangzhou.aliyuncs.com/2023/05/06/f882c188b16a41daa86e550fa6213cf2.jpg',
|
||||||
video: 'https://cdn.uviewui.com/uview/resources/video.mp4'
|
video: [],
|
||||||
|
video2: [],
|
||||||
|
upLoadUrl: config.fileUploadUrl,
|
||||||
|
headers: {
|
||||||
|
'Authorization': 'Bearer ' + getToken()
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
ceshiUploadSuccess(res) { //上传成功
|
||||||
|
/****************
|
||||||
|
因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
|
||||||
|
***************/
|
||||||
|
var _res = JSON.parse(res.data);
|
||||||
|
console.log("上传成功", _res);
|
||||||
|
if (_res.code == 200) {
|
||||||
|
// this.video.push(_res.data.url);
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
url: _res.data.url
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
url: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ceshiUploadSuccess2(res) { //上传成功
|
||||||
|
/****************
|
||||||
|
因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
|
||||||
|
***************/
|
||||||
|
var _res = JSON.parse(res.data);
|
||||||
|
console.log("上传成功", _res);
|
||||||
|
if (_res.code == 200) {
|
||||||
|
// this.video.push(_res.data.url);
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
url: _res.data.url
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
url: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -49,11 +106,11 @@
|
|||||||
.image-upload {
|
.image-upload {
|
||||||
padding: 22rpx;
|
padding: 22rpx;
|
||||||
}
|
}
|
||||||
.video-upload {
|
|
||||||
|
.video-upload {}
|
||||||
}
|
|
||||||
.branner-box {
|
.branner-box {
|
||||||
width: 750rpx;
|
width: 750rpx;
|
||||||
height: 500rpx;
|
height: 500rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
BIN
static/htz-image-upload/play.png
Normal file
BIN
static/htz-image-upload/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Reference in New Issue
Block a user