uniapp封装上传视频或图片-上传视频-上传图片

实现效果：

1、图片＆视频只能上传其一

2、图片最大上传9张

3、视频只能上传一个

// 上传视频通过uni.chooseVideo(）方法 ，详细使用方法请看uni.chooseVideo(OBJECT) | uni-app官网

// 上传图片通过uni.chooseImage(）方法，详细使用方法请看uni.chooseImage(OBJECT) | uni-app官网。

// 判断是否是视频（因为这里上传服务器之后地址链接统一为.mp4后缀）

this.fileName = url.substring(url.lastIndexOf(".") + 1);

 //通过import引入组件，使用组件@clickFile=”“ 为回调方法

// 引入组件

import uploadImageAudio from '@/components/uploadImageAudio/uploadImageAudio.vue'

// 注册组件

components: { uploadImageAudio  },

// 使用组件

<uploadImageAudio @clickFile="clickAlbumImg"></uploadImageAudio>

// 方法(file,为上传的数据，这里为数组格式

clickAlbumImg(file) {this.img_list = file},

// 组件完整代码

<template>
	<view class="flex-row flex-wrap">
		<view class="uploadList margin-right flex-center" v-for="(item,index) in imgList" :key="index">
			<view v-if="fileName == 'mp4' && fileIndex === index" class="flex-column-center">
				<image  class="icon" src="../../static/img/video.png" mode=""></image>
				<text>视频</text>
			</view>
			<image v-else :src="item" mode=""></image>
			<!-- <view v-if="fileName == 'jpg'">
				<image :src="item" mode=""></image>
			</view> -->
			<view class="deletable flex-center" @click="delVideoImage(index)">
				<view class="deletable__icon">
					<u-icon name="close" color="#fff" size="10"></u-icon>
				</view>
			</view>
			<view class="success">
				<!-- #ifdef APP-NVUE -->
				<image :src="successIcon" class="success__icon"></image>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<view class="success__icon">
					<u-icon name="checkmark" color="#ffffff" size="12"></u-icon>
				</view>
				<!-- #endif -->
			</view>

		</view>
		<view class="upload flex-center"  @click="chooseVideoImage">
			<!-- <image src="../../static/icon_btn_more.png" mode=""></image> -->
			<u-icon name="plus" size="28" color="#333" bold	></u-icon>
		</view>
	</view>
</template>

<script>
	import config from '@/utils/config.js'
	export default {
		name: "uploadImageAudio",
		props: {
			imgList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				list: [],
				fileName: '',
				fileIndex: 0,
				file: '',
				isUpload: false,
				successIcon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAACP0lEQVRYCc3YXygsURwH8K/dpcWyG3LF5u/6/+dKVylSypuUl6uUPMifKMWL8oKEB1EUT1KeUPdR3uTNUsSLxb2udG/cbvInNuvf2rVnazZ/ZndmZ87snjM1Z+Z3zpzfp9+Z5mEAhlvjRtZgCKs+gnPAOcAkkMOR4jEHfItjDvgRxxSQD8cM0BuOCaAvXNCBQrigAsXgggYUiwsK0B9cwIH+4gIKlIILGFAqLiBAOTjFgXJxigJp4BQD0sIpAqSJow6kjSNAFTnRaHJwLenD6Mud52VQAcrBfTd2oyq+HtGaGGWAcnAVcXWoM3bCZrdi+ncPfaAcXE5UKVpdW/vitGPqqAtn98d0gXJwX7Qp6MmegUYVhvmTIezdmHlxJCjpHRTCFerLkRRu4k0aqdajN3sWOo0BK//msHa+xDuPC/oNFMKRhTtM4xjIX0SCNpXL4+7VIaHuyiWEp2L7ahWLf8fejfPdqPmC3mJicORZUp1CQzm+GiphvljGk+PBvWRbxii+xVTj5M6CiZ/tsDufvaXyxEUDxeLIyvu3m0iOyEFWVAkydcVYdyFrE9tQk9iMq6f/GNlvwt3LjQfh60LUrw9/cFyyMJUW/XkLSNMV4Mi6C5ML+ui4x5ClAX9sB9w0wV6wglJwJCv5fOxcr6EstgbGiEw4XcfUry4cWrcEUW8n+ARKxXEJHhw2WG43UKSvwI/TSZgvl7kh0b3XLZaLEy0QmMgLZAVH7J+ALOE+AVnDvQOyiPMAWcW5gSzjCPAV+78S5WE0GrQAAAAASUVORK5CYII='
			};
		},
		methods: {

			chooseVideoImage() {
				let that = this
				uni.showActionSheet({
					itemList: ['图片', '视频'],
					success: async (res) => {
						// console.log(res);
						if (res.tapIndex == 0) {
							if (this.imgList.length == 0) {
								await this.chooseImages()
							} else {
								await this.clickImageGiveVideo(res.tapIndex) ? null : this.chooseImages()
							}
						} else {
							if (this.imgList.length == 0) {
								await this.chooseVideo()
							} else {
								await this.clickImageGiveVideo(res.tapIndex) ? this.chooseVideo() : null
							}
						}
						
					}
				});
			},

			clickImageGiveVideo(tapIndex) {
				if (this.imgList.length != 0) {
					let isVideo = false
					this.imgList.forEach((item, index) => {
						let url = item
						this.fileName = url.substring(url.lastIndexOf(".") + 1);
						console.log('this.fileName____________>', this.fileName)
						if (this.fileName == 'mp4') {
							isVideo = true
							if(tapIndex==0){
								uni.showToast({
									title: '只能选择图片或视频',
									icon: 'none'
								})
							}else {
								uni.showToast({
									title: '只能上传一个视频',
									icon: 'none'
								})
								isVideo = false
							}
						} else {
							isVideo = false
							if (tapIndex === 1) {
								uni.showToast({
									title: '只能选择图片或视频',
									icon: 'none'
								})
							}

						}
					})
					return isVideo
				}
			},

			delVideoImage(index) {
				this.imgList.splice(index, 1)
			},

			chooseImages() {
				uni.chooseImage({
					count: 9,
					sizeType: ['original'],
					sourceType: ['album', 'camera'],
					success: res => {
						var that1 = this;
						uni.showLoading({
							title: '加载中'
						})
						res.tempFilePaths.forEach(item => {
							// this.imgList.push(item);
							uni.uploadFile({
								// 需要上传的地址
								url: config.baseUrl + '/api/QCloud/upload',
								// filePath  需要上传的文件
								filePath: item,
								name: 'file',
								header: {
									'Authorization': uni.getStorageSync("authorization"),
								},
								success(res) {
									uni.hideLoading()
									that1.imgList.push(res.data);
									that1.$emit('clickFile', that1.imgList)
								}
							});
						})

					}
				});
			},

			chooseVideo() {
				
				// 上传视频
				uni.chooseVideo({
					maxDuration: 15,
					count: 1,
					// camera: this.cameraList[this.cameraIndex].value,
					sourceType: ['album', 'camera'],
					success: res => {
						this.res_url2 = res.tempFilePath;
						uni.showLoading({
							title: '加载中'
						})
						var that2 = this;
						uni.uploadFile({
							// 需要上传的地址
							url: config.baseUrl + '/api/QCloud/upload',
							// filePath  需要上传的文件
							filePath: that2.res_url2,
							name: 'file',
							header: {
								'Authorization': uni.getStorageSync("authorization"),
							},
							success(res) {
								uni.hideLoading()
								if (res.errMsg == 'uploadFile:ok') {
									that2.imgList.push(res.data);
									that2.$emit('clickFile', that2.imgList)
								}
								that2.imgList.forEach((item, index) => {
									let url = item
									that2.fileName = url.substring(url.lastIndexOf(".") + 1);
									that2.fileIndex = index
								})
							},
							fail(res) {
								console.log(res)
							}
						});
					}
				});
				this.fileName = ''
			},
		}
	}
</script>

<style lang="scss">
	.uploadList {
		width: 200rpx;
		height: 200rpx;
		position: relative;
		background-color: #f4f5f7;
		margin-right: 10rpx;
		border-radius: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.icon {
			width: 60rpx;
			height: 60rpx;
		}

		text {
			color: #333;
			font-size: 24rpx;
		}
	}

	.upload {
		width: 200rpx;
		height: 200rpx;
		background-color: #f4f5f7;
		border-radius: 20rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.deletable {
		position: absolute;
		width: 28rpx;
		height: 28rpx;
		top: 0;
		right: 0;
		background-color: rgb(55, 55, 55);
		border-bottom-left-radius: 200rpx;
		z-index: 3;

		&__icon {
			position: absolute;
			transform: scale(0.7);
			top: 0;
			right: 0;
			/* #ifdef H5 */
			top: 1;
			right: 0;
			/* #endif */
		}
	}

	.success {
		position: absolute;
		bottom: 0rpx;
		right: 0rpx;
		display: flex;
		/* #ifndef APP-NVUE */
		border-style: solid;
		border-top-color: transparent;
		border-left-color: transparent;
		border-bottom-color: #5ac725;
		border-right-color: #5ac725;
		border-width: 18rpx;
		align-items: center;
		justify-content: center;
		/* #endif */

		&__icon {
			/* #ifndef APP-NVUE */
			position: absolute;
			transform: scale(0.7);
			bottom: -20rpx;
			right: -20rpx;
			/* #endif */
			/* #ifdef APP-NVUE */
			width: 32rpx;
			height: 32rpx;
			/* #endif */
		}
	}
</style>