116 lines
3.2 KiB
Vue
116 lines
3.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="">
|
|
<label>图片上传组件</label>
|
|
<view class="image-upload">
|
|
<image-upload v-model="images" :loop="true" />
|
|
</view>
|
|
</view>
|
|
<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>
|
|
<view class="video-upload">
|
|
<!-- <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 class="">
|
|
<label>轮播图组件</label>
|
|
<view class="branner-box">
|
|
<lxk-swiper :indicatorDots="true" />
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrcode" :options="{ margin: 10 }"></uqrcode>
|
|
</view>
|
|
<view>
|
|
<z-image
|
|
src="https://jidansc.oss-cn-hangzhou.aliyuncs.com/2023/05/06/b2149e0fb0fc49ad8a8137f175b6f45f.jpg"></z-image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/config';
|
|
import {
|
|
getToken
|
|
} from '@/utils/auth';
|
|
export default {
|
|
data() {
|
|
return {
|
|
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',
|
|
video: [],
|
|
video2: [],
|
|
upLoadUrl: config.fileUploadUrl,
|
|
headers: {
|
|
'Authorization': 'Bearer ' + getToken()
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
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>
|
|
|
|
<style lang="scss">
|
|
.image-upload {
|
|
padding: 22rpx;
|
|
}
|
|
|
|
.video-upload {}
|
|
|
|
.branner-box {
|
|
width: 750rpx;
|
|
height: 500rpx;
|
|
}
|
|
</style> |