解决问题：一些APP框架的upload组件每次选择完成后立马上传入库，不符合开发逻辑，此组件可以通过触发事件将多次选择后的图片视频一起上传，不会每次选择后立马上传。
功能支持：相册上传，预览文件，删除文件，前后摄像头调用，重复文件过滤，防止同时提交覆盖
自己为每个文件单独命名避免两个用户同时提交文件会覆盖问题
css样式可能不足，自己解决一下。
<template>
<view class="burst-wrap">
<view class="burst-wrap-bg">
<view>
<view class="burst-info">
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<!-- 图片 -->
<view v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file">
<view class="delect" @tap="delect(index)">
<image src="../../static/dele.png"
style="height: 8px;width: 8px;z-index: 1001;margin: 1px 1px;"></image>
</view>
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage">
</image>
</view>
</view>
<!-- 视频 -->
<block v-for="(src,index) in videoList" :key="index">
<view class="uni-uploader__file">
<view class="delect" @tap="delectVideo(index)">
<image src="../../static/dele.png"
style="height: 8px;width: 8px;z-index: 1001;margin: 1px 1px;"></image>
</view>
<!-- <video class="uni-uploader__img" :src="src"></video> -->
<image src="../../img/video.png" style="height: 80px;width: 80px;margin-right: 5px;" @click="openVideo(src)"></image>
</view>
</block>
<view class="uni-uploader__input-box" @tap="chooseVideoImage">
<image src="../../img/photo.png" style="width: 20px;height: 20px;z-index: 1000;">
</image>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imageList: [], //图片
src: "", //视频存放
sourceTypeIndex: 2,
checkedValue: true,
checkedIndex: 0,
sourceType: ['拍摄', '相册', '拍摄或相册'],
cameraList: [{
value: 'back',
name: '后置摄像头',
checked: 'true'
},
{
value: 'front',
name: '前置摄像头'
},
],
cameraIndex: 0,
VideoOfImagesShow: true,
igmFile: [],
videoList: [],
videoFile: [],
joinUser: '', //登录人员信息
}
},
props: ['choosevideoimage'],//根据接收choosevideoimage的值判断调用视频还是
图片
mounted() {
uni.getStorage({
key: 'userinfo',
success: res => {
this.joinUser = res.data
}
})
Date.prototype.Format = function(format) {
var args = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
};
if (/(y+)/.test(format))
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var i in args) {
var n = args[i];
if (new RegExp("(" + i + ")").test(format))
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n)
.length));
}
return format;
}
},
methods: {
//上传多媒体文件
submit() {
let caseCheckSubmitModel = this.$store.state.caseCheckSubmitModel
if(this.igmFile){
uni.uploadFile({
url: '此处填写你的存储地址接口',
method: "POST",
files: this.igmFile,
header: {
'content-type': 'application/x-www-form-urlencoded'
},//header根据接口需要写
formData: caseCheckSubmitModel,//formData类似于接口的data
success: (res1) => {
console.log('图片上传成功！！！')
},
fail: (err) => {
console.log(err)
},
complete: res => {
console.log(res)
}
})
}
if(this.videoFile){
uni.uploadFile({
url: '此处填写你的存储地址',
method: "POST",
files: this.videoFile,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
formData: caseCheckSubmitModel,
success: (res1) => {
console.log('图片上传成功！！！')
},
fail: (err) => {
console.log(err)
},
complete: res => {
console.log(res)
}
})
}
},
//打开视频
openVideo(src){
uni.navigateTo({
url:'/pages/zf/zf_video_autoplay?src=' + src
})
},
//选择相机类型
chooseVideoImage() {
if (this.choosevideoimage == 1) {
this.chooseImages()
} else {
this.chooseVideo()
}
},
chooseImages() {
// 上传图片
uni.chooseImage({
count: 9, //默认9
sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: (result) => {
result.tempFilePaths.forEach((res, index) => {
if (!this.imageList.includes(res)) {
this.imageList = this.imageList.concat(res)
let strDate = new Date().Format("yyyyMMddHHmmss");
if (result.tempFilePaths.length > 1) {
let photoName = "cl_" + this.joinUser.userID + "_" + strDate +
index + ".jpg";
let info = {
uri: res,
name: photoName
}
this.igmFile.push(info);
} else {
let photoName = "cl_" + this.joinUser.userID + "_" + strDate +
".jpg";
let info = {
uri: res,
name: photoName
}
this.igmFile.push(info);
}
}
})
}
});
},
chooseVideo() {
// 上传视频
uni.chooseVideo({
maxDuration: 60,
count: 1,
compressed: false,
success: (res) => {
let videoFile = res.tempFilePath;
if (!this.videoList.includes(videoFile)) {
this.videoList = this.videoList.concat(videoFile)
let strDate = new Date().Format("yyyyMMddHHmmss");
let photoName = "cl_" + this.joinUser.userID + "_" + strDate +
".jpg";
let info = {
uri: videoFile,
name: photoName
}
this.videoFile.push(info);
}
// this.src = responent.tempFilePath; //头条
}
})
},
previewImage: function(e) {
//预览图片
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
},
delect(index) {
uni.showModal({
title: "提示",
content: "是否要删除该图片？",
success: (res) => {
if (res.confirm) {
this.imageList.splice(index, 1)
this.igmFile.splice(index, 1)
}
}
})
},
delectVideo(index) {
uni.showModal({
title: "提示",
content: "是否要删除此视频？",
success: (res) => {
if (res.confirm) {
this.videoList.splice(index, 1)
this.videoFile.splice(index, 1)
}
}
})
}
},
}
</script>
<style scoped>
.uni-uploader__input-box {
width: 80px;
height: 80px;
background-color: #fcfafa;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
}
.burst-wrap .burst-wrap-bg>view {
width: 100%;
margin: 0 auto;
}
.form-item {
width: 100%;
}
.form-item textarea {
display: block;
height: 220upx;
width: 100%;
color: #AAAAAA;
font-size: 28upx;
}
.uni-uploader__file {
height: 80px;
display: flex;
position: relative;
}
.delect {
position: absolute;
right: 0px;
top: 0px;
background-color: #403737;
width: 13px;
display: flex;
align-items: flex-start;
justify-content: flex-end;
height: 13px;
border-bottom-left-radius: 13px;
z-index: 10;
margin-right: 5px;
}
.uni-uploader__files {
width: 100%;
display: flex;
}
.uploader_video {
width: 80px;
height: 80px;
}
.uni-uploader__img {
width: 80px;
height: 80px;
margin-right: 5px;
margin-bottom: 5px;
}
</style>不懂的问题建议多看看uniapp官网，对个人帮助还是很大的。
再有问题的小伙伴欢迎在下方交流！！！