uniapp vue 2 上传视频和图片的封装

通过这个uploadType传参来 来实现显示你是要上传视频还是图片或者，默认不传可上传视频和图片两种。

<template>
	<view>

		<!-- 未上传文件之前的样式 -->
		<view class="mlr-2 b-radius-5 bg-color-w" v-if="photoList.length==0">
			<view class="ptb-5 plr-3 text-center flex ai-center jc-center flex-wrap " @tap="showAction()">
				<view>
					<u--image :showLoading="true" src="/static/images/upload/upload.png" width="50px"
						height="50px"></u--image>
				</view>
				<text class="flex-100 mt-3 f34 c-theme">点击上传{{viewText}}</text>
			</view>
		</view>
		<!-- 已上传的文件显示区 -->
		<view class="flex flex-wrap plr-2 ptb-2" v-else>
			<view class="imgBoxR mb-2" v-for="(item,index) in photoList" :key="index">

				<u-icon name="close-circle-fill" class="del" color="#333" size="30" @click="delImgUrl(index)"></u-icon>
				<u--image :showLoading="true" :src="baseURL+item.url" :width="widthHeight" :height="widthHeight"
					@tap="$util.previewImgOne(baseURL+item.url)" radius="10rpx" v-if="item.type==1"></u--image>

				<video class="video" :src="baseURL+item.url" v-if="item.type==2"></video>

			</view>
			<view class="imgBoxBtn bg-color-w  text-center flex ai-center jc-center flex-wrap b-radius-5 mb-2"
				v-if="photoList.length<count">
				<view>

					<u--image class="ai-center" :showLoading="true" src="/static/images/upload/upload.png" width="80rpx"
						height="80rpx" @tap="showAction()"></u--image>

					<text class="flex-100 f30 c-theme">继续上传</text>
				</view>
			</view>


		</view>




	</view>
</template>

<script>
	export default {
		props: {
			count: {
				type: [Number, String],
				default: 9, //默认最多上传多少个
			},
			uploadType: {
				type: [Number],
				default: 1, //1只上传照片 2只上传视频 3上传图片和视频
			},
			textVal: {
				type: [Number, String],
				default: ''
			},
			//父级传过来的图片列表
			dataPicList: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				photoList: [],
				baseURL: "",
				widthHeight: "150rpx",
				uploadText: ['照片', '视频'],
				viewText: '照片或视频'
			}
		},
		created() {
			this.isStart();
		},

		methods: {

			isStart() {
				if (this.uploadType == 1) {
					this.uploadText = ['照片'];
					this.viewText = "照片";
				} else if (this.uploadType == 2) {
					this.uploadText = ['视频'];
					this.viewText = "视频";
				}
			},

			//弹出选择
			showAction() {

				if (this.photoList.length >= this.count) {
					return this.$util.showMsg(`最多只能上传${this.count}张`);
				}
				if (this.uploadType == 3) {
					let that = this;
					uni.showActionSheet({
						itemList: this.uploadText,
						success: function(res) {
							console.log("res:", res)
							console.log(`选中了第${res.tapIndex + 1}个菜单`);



							if (res.tapIndex == 0) {
								that.uploadImg();
							} else if (res.tapIndex == 1) {
								that.uploadVideo();
							}


						},
						fail: function(res) {
							console.log(res.errMsg);
						}
					});

				} else if (this.uploadType == 1) {
					this.uploadImg();
				} else if (this.uploadType == 2) {
					this.uploadVideo();
				}
			},

			//上传视频
			uploadVideo() {
				let that = this;

				uni.chooseVideo({
					count: this.count, //默认9
					//	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						// console.log(JSON.stringify(res.tempFilePath));
						if ((1 + that.photoList.length) > that.count) {
							return this.$util.showMsg(`最多只能上传${that.count}张`);
						}

						// that.photoList.push(res.tempFilePath);
						// 将选择的视频路径和类型存入 photoList
						that.photoList.push({
							type: 2, // 2为视频类型
							url: res.tempFilePath // 视频路径
						});


						console.log("所选视频传给父组件：", that.photoList);

						that.$emit("setPhotoList", that.photoList)

						// console.log("this.photoList", that.photoList)
					}
				});
			},

			//删除
			delImgUrl(index) {
				this.photoList.splice(index, 1); //index 当前元素索引；1：需要删除的元素个数

			},
			uploadImg() {
				let that = this;
				uni.chooseImage({
					count: this.count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						const selectedCount = res.tempFilePaths.length; // 获取选择的图片数量
						if ((selectedCount + that.photoList.length) > that.count) {
							return this.$util.showMsg(`最多只能上传${that.count}张`);
						}

						// 将选择的图片路径和类型存入 photoList
						res.tempFilePaths.forEach(filePath => {
							that.photoList.push({
								type: 1, // 1为图片类型
								url: filePath // 图片路径
							});
						});

						console.log("tempFilePaths2：", that.photoList);
						that.$emit("setPhotoList", that.photoList);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgBoxR {
		position: relative;
		margin-right: 19rpx;

		// width: 33.33333%;
		.uploadImage {
			margin-right: 20rpx;
		}

		.del {
			position: absolute;
			top: -26rpx;
			right: -26rpx;

			line-height: 44rpx;
			padding-top: 4rpx;
			z-index: 1;
		}
	}

	.imgBoxBtn {
		width: 150rpx;
		height: 150rpx;
	}

	.video {
		width: 150rpx;
		height: 150rpx;
	}
</style>