初始化代码
This commit is contained in:
326
uniapp/uni-app/components/upload.vue
Normal file
326
uniapp/uni-app/components/upload.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<view
|
||||
:class="[{'flex-warp':!imgTypeList.includes(imgclass) || !imgclass},{'flex-center flex-column':imgTypeList.includes(imgclass)}]">
|
||||
<block v-for="(item,index) in imagelist" :key="index">
|
||||
<view class="rel item-child radius-16" :class="[imgclass,{'margin border': imgsize > 1}]">
|
||||
<image mode="aspectFill" lazy-load @tap="previewImage(item,imagelist)" class="upload-img radius-16"
|
||||
:src="item.path" v-if="filetype == 'picture'"></image>
|
||||
<video :id="`video_${index}`" class="ipload-video radius-16" :loop="false" enable-play-gesture
|
||||
enable-progress-gesture :show-center-play-btn="true" :controls="true" :src="item.path"
|
||||
:data-id="item.id" objectFit="cover" :data-index="index" @play="onPlay" @pause="onPause"
|
||||
@ended="onEnded" @timeupdate="onTimeUpdate" @waiting="onWaiting" @progress="onProgress"
|
||||
@loadedmetadata="onLoadedMetaData" v-if="filetype == 'video'">
|
||||
</video>
|
||||
<block v-if="imgauth">
|
||||
<block v-if="imgsize>1">
|
||||
<view @tap="toDel(index)" class="guanbi abs flex-center" :class="[imgclass]"
|
||||
style="z-index: 1;"><i class="iconfont icon-add rotate-45 c-base"></i></view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view @tap="chooseImage"
|
||||
class="flex-center flex-column item-child border upload-item radius-16 abs"
|
||||
:class="[imgclass]" style="top:0;margin-top:0;background:rgba(0,0,0,0.5);">
|
||||
<view class="upload-icon flex-center c-base radius-16">
|
||||
<i class="iconfont icon-camera"></i>
|
||||
</view>
|
||||
<view class="f-caption c-base mt-sm">重新上传</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<view @tap="chooseImage" class="radius-16 flex-center flex-column item-child border rel upload-item fill-body"
|
||||
:class="[imgclass,{'margin': imgsize > 1}]" v-if="imgauth && imagelist.length < imgsize">
|
||||
<image mode="aspectFill" lazy-load class="item-child md bg-img abs radius-16"
|
||||
style="width: 292rpx;height: 200rpx;" :src="bgimg" v-if="bgimg">
|
||||
</image>
|
||||
<block v-else>
|
||||
<view class="upload-icon flex-center c-desc radius-16">
|
||||
<i class="iconfont icon-camera"></i>
|
||||
</view>
|
||||
<view class="f-caption c-caption mt-sm" v-if="text">{{text}}</view>
|
||||
<view class="cur-imgsize f-caption c-caption" v-if="imgsize>1">{{`${imagelist.length}/${imgsize}`}}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
} from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
// 图片列表
|
||||
imagelist: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 图片参数名
|
||||
imgtype: {
|
||||
type: String,
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
// 图片张数
|
||||
imgsize: {
|
||||
type: Number,
|
||||
default () {
|
||||
return 9
|
||||
}
|
||||
},
|
||||
// 上传类型
|
||||
filetype: {
|
||||
type: String,
|
||||
default () {
|
||||
return 'picture'
|
||||
}
|
||||
},
|
||||
// 图片样式
|
||||
imgclass: {
|
||||
type: String,
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
// 是否有权限
|
||||
imgauth: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
return true
|
||||
}
|
||||
},
|
||||
// 备注信息
|
||||
text: {
|
||||
type: String,
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
// 默认背景图
|
||||
bgimg: {
|
||||
type: String,
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgTypeList: ['md', 'lg'],
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
}),
|
||||
methods: {
|
||||
previewImage(current, urls) {
|
||||
let res_urls = [];
|
||||
urls = this.$util.deepCopy(urls);
|
||||
urls.forEach((item, index) => {
|
||||
res_urls.push(item.path)
|
||||
})
|
||||
uni.previewImage({
|
||||
current: current.path,
|
||||
urls: res_urls,
|
||||
})
|
||||
},
|
||||
async toDel(index) {
|
||||
let fileName = this.filetype == 'picture' ? '图片' : '视频'
|
||||
let [res_del, {
|
||||
confirm
|
||||
}] = await uni.showModal({
|
||||
content: `请确认是否要删除${fileName}`,
|
||||
})
|
||||
if (!confirm) return;
|
||||
this.imagelist.splice(index, 1);
|
||||
this.$emit('del', {
|
||||
imgtype: this.imgtype,
|
||||
imagelist: this.imagelist
|
||||
});
|
||||
},
|
||||
async chooseImage() {
|
||||
let {
|
||||
imgtype,
|
||||
imgsize,
|
||||
filetype
|
||||
} = this;
|
||||
let imagelist = this.$util.deepCopy(this.imagelist)
|
||||
let is_upload_img = filetype == 'picture'
|
||||
let chooseModel = is_upload_img ? 'chooseImage' : 'chooseVideo'
|
||||
let param = {
|
||||
count: imgsize - imagelist.length * 1,
|
||||
}
|
||||
if (is_upload_img) {
|
||||
param.sizeType = ['compressed']
|
||||
}
|
||||
let [res_upload, res_info] = await uni[chooseModel](param)
|
||||
if (res_upload) return
|
||||
let {
|
||||
size = 0,
|
||||
tempFiles,
|
||||
tempFilePath = ''
|
||||
} = res_info
|
||||
if (filetype == 'video' && size / 1024 / 1024 > 100) {
|
||||
this.$util.showToast({
|
||||
title: `上传视频大小超过限制100M`
|
||||
})
|
||||
return
|
||||
}
|
||||
let filePath = [];
|
||||
// 格式化图片参数
|
||||
this.$util.showLoading({
|
||||
title: "上传中"
|
||||
});
|
||||
if (is_upload_img) {
|
||||
for (let i = 0; i < tempFiles.length; i++) {
|
||||
let {
|
||||
attachment_path: path
|
||||
} = await this.$api.base.uploadFile({
|
||||
filePath: tempFiles[i].path,
|
||||
filetype
|
||||
})
|
||||
if (imgsize > 1) {
|
||||
imagelist.push({
|
||||
path
|
||||
})
|
||||
} else {
|
||||
imagelist = [{
|
||||
path
|
||||
}]
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let path = await this.$api.base.uploadVideo({
|
||||
filePath: tempFilePath,
|
||||
filetype
|
||||
})
|
||||
console.log(path, "=====video path");
|
||||
imagelist.push({
|
||||
path
|
||||
})
|
||||
}
|
||||
this.$util.hideAll()
|
||||
this.$emit('upload', {
|
||||
imgtype,
|
||||
imagelist
|
||||
});
|
||||
},
|
||||
onPlay(e) {},
|
||||
onPause(e) {},
|
||||
onEnded(e) {},
|
||||
onTimeUpdate(e) {},
|
||||
onWaiting(e) {},
|
||||
onProgress(e) {},
|
||||
onLoadedMetaData(e) {},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.item-child {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background: #fff;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1rpx dashed #ccc;
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
|
||||
.item-child.bg-img {
|
||||
top: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.margin {
|
||||
margin: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.item-child:nth-child(3n) {
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
|
||||
.item-child.sm {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.item-child.mini {
|
||||
width: 196rpx;
|
||||
height: 196rpx;
|
||||
}
|
||||
|
||||
.item-child.md {
|
||||
width: 294rpx;
|
||||
height: 202rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-child.lg {
|
||||
width: 690rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.upload-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.upload-item {
|
||||
|
||||
.upload-icon {
|
||||
// width: 80rpx;
|
||||
// height: 76rpx;
|
||||
// background: #FFFFFF;
|
||||
|
||||
.iconfont {
|
||||
font-size: 70rpx;
|
||||
display: block;
|
||||
// color: #BBBBBB;
|
||||
}
|
||||
}
|
||||
|
||||
.cur-imgsize {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.upload-item.margin {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.guanbi {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0 10rpx 0 0;
|
||||
top: 0rpx;
|
||||
right: 0rpx;
|
||||
z-index: 1;
|
||||
|
||||
.iconfont {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.guanbi.lg {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user