uniapp实现原生方式上传图片,视频(可直接进行拍照,录取视频)

template模板 

<template>
	<view class="home">
		<!-- 上传图片视频 -->
		<view class="msgbox" prop="problemDescr">
			<view class="inputSuggestionBox-file" v-if="imageList.length >0||srcVideo.length >0">
				<view class="pre-box">
					<!-- 准备上传的图片列表 -->
					<view class="pre-item" v-for="(item, index) in imageList" :key="index"
						:style="{marginRight: (index + 1) % 5 == 0 ? '0' : '35rpx'}">
						<image ref="uUpload" class="pre-item-image" :src="item" mode="aspectFill"
							@tap="previewImage(item)"></image>
						<view class="u-delete-icon" @tap="delect(index)">
							<u-icon name="close" size="20" color="#ffffff"></u-icon>
						</view>
						<u-line-progress v-if="item.progress > 0 && !item.error && item.progress != 100"
							:show-percent="false" height="16" class="u-progress" :percent="item.progress">
						</u-line-progress>
					</view>
					<!-- 准备上传的视频列表 -->
					<view class="pre-item" v-for="(item, index) in srcVideo" :key="index"
						:style="{marginLeft: (index + 1) % 5 == 0 ? '0' : '35rpx'}">
						<video class="pre-item-image" ref="uUpload" :src="item" @click="previewVideo(item)"
							style="width: 200rpx;height: 200rpx;"></video>
						<view class="u-delete-icon" @tap="delectVideo(index)">
							<u-icon name="close" size="20" color="#ffffff"></u-icon>
						</view>
						<u-line-progress :show-percent="false" height="16" class="u-progress" :percent="item.progress">
						</u-line-progress>
					</view>
				</view>
			</view>
			<!--图片上传-->
			<view style="height: 200rpx;">
				<view @tap="chooseVideoImage" style="display: flex;align-items: center;width: 200rpx; height: 200rpx;">
					<u-icon name="photo" size="48" color="#666666"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

javaScript:

<script>
	import {
		baseUrl
	} from "@/api/conf/common";
	import {
		uploadCommonImage,
		saveMaintenanceOrder,
		getMaintenanceOrderDeviceTypeList
	} from '@/api/business/business.js';

	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]

	const form = {
		pictures: '', //图片
		video: '', //视频
	}

	export default {
		name: "upload",
		data() {
			return {
				form,
				fileList: [], // 预置上传列表
				action: baseUrl + '/common/uploadImage', // 图片上传地址（最多3张，每张10MB以下）
				actionVideo: baseUrl + '/common/uploadVideo', //上传视频(100Mb以下)
				imageList: [], //图片列表
				srcVideo: [], //视频存放列表
				sourceTypeIndex: 2,
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				cameraIndex: 0,
			};
		},
		onReady() {},
		mounted() {},
		computed: {
			btnStyle() {
				return {
					width: '100%',
					height: '98rpx',
					background: '#3c9cff',
					borderradius: '8rpx',
					color: '#FFFFFF'
				}
			},
			btnStyleNot() {
				return {
					width: '100%',
					height: '98rpx',
					background: '#909399',
					borderradius: '8rpx',
					color: '#FFFFFF'
				}
			}
		},
		onShow() {
			this.src = '';
			this.sourceTypeIndex = 2;
			this.sourceType = ['拍摄', '相册', '拍摄或相册'];
		},
		methods: {
			// 设备类型选中事件
			clickItemEquipment(valid) {
				valid.forEach(item => {
					this.form.equipmentType = this.equipmentTypeList[item].name;
					this.form.deviceTypeId = this.equipmentTypeList[item].id;
				})
			},
			// 点击上传图片或视频
			chooseVideoImage() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						if (res.tapIndex == 0) {
							this.chooseImages(); //选择上传图片
						} else {
							this.chooseVideo(); //选择上传视频
						}
					}
				});
			},
			// 上传图片
			chooseImages() {
				uni.chooseImage({
					count: 5  //总限制5张
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						res.tempFilePaths.forEach(element => {
							this.imageList.push(element)
						})
						let arr = res.tempFilePaths.map((item, index) => {
							return this.uploadAction(res.tempFilePaths[index])
						})
					},
				})

			},
			// 上传图片接口
			uploadAction(file, index) {
				uni.showLoading({
					title: '图片上传中...',
					mask: true
				})
				new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.action,
						filePath: file,
						headers: {
							"Content-Type": "multipart/form-data",
						},
						name: 'files', // 后端接收的文件名
						complete: (res) => {
							let dataRes = JSON.parse(res.data);
							if (dataRes.code === 1) {
								this.form.pictures = this.form.pictures.concat(dataRes.data + ',');
								console.log('上传成功图片结合', this.form.pictures)
							} else {
								uni.$cu.toast(dataRes.message);
								this.imageList.splice(this.imageList.length - 1, 1); //删除图片列表最后一张图片
								let a = this.form.pictures.split(); //字符串转字符串数组
								a.splice(a.length - 1, 1); //删除上传图片集合的最后一张图片
								this.form.pictures = a.toString();
							}
							uni.hideLoading();
							resolve(res)
						}
					})
				})
			},
			// 上传视频
			chooseVideo(index) {
				uni.chooseVideo({
					maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: 1,
					camera: this.cameraList[this.cameraIndex].value, //'front'、'back'，默认'back'
					sourceType: sourceType[this.sourceTypeIndex],
					success: res => {
						this.srcVideo.push(res.tempFilePath)
						if (this.srcVideo.length > 1) {
							this.srcVideo.splice(0, 1)
							this.form.video = '';
						}
						let arr = this.srcVideo.map((item, index) => {
							return this.uploadActionVideo(this.srcVideo[index])
						})
					},
					fail: (error) => {
						uni.hideLoading();
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},
			// 上传视频接口
			uploadActionVideo(file) {
				uni.showLoading({
					title: '视频上传中...',
					mask: true
				})
				new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.actionVideo,
						filePath: file,
						headers: {
							"Content-Type": "multipart/form-data",
						},
						name: 'file', // 后端接收的文件名
						complete: (res) => {
							let dataRes = JSON.parse(res.data);
							if (dataRes.code === 1) {
								this.form.video = JSON.parse(res.data).data;
							} else {
								this.srcVideo = [];
								uni.$cu.toast(dataRes.message);
							}
							uni.hideLoading();
							resolve(res)
						}
					})
				})
			},
			// 预览图片
			previewImage(e) {
				console.log('预览图片', e)
				var current = e;
				uni.previewImage({
					current: current,
					urls: this.imageList
				});
			},
			// 删除图片
			delect(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
							let a = this.form.pictures.split(","); //字符串转字符串数组
							a.splice(index, 1); //删除上传图片集合的最后一张图片
							this.form.pictures = a.toString();

						}
					}
				});
			},
			// 预览视频
			previewVideo(e) {
				console.log(e)
				var current = e;
				uni.previewImage({
					current: current,
					urls: this.srcVideo
				});
			},
			// 删除视频
			delectVideo(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该视频',
					success: res => {
						if (res.confirm) {
							this.srcVideo.splice(index, 1);
							this.form.video = '';
						}
					}
				});
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading({
							title: '信息保存中...',
							mask: true
						})
						return new Promise((resolve, reject) => {
							saveMaintenanceOrder(this.form).then(res => {
								uni.hideLoading();
								console.log(res)
								if (res.code === 1) {
									uni.$cu.toast('信息提交成功,我们会尽快联系您!');
									this.$refs.uForm.resetFields(); //重置表单
									this.form.problemDescr = '';
									this.imageList = [];
									this.srcVideo = [];
								}
								resolve();
							}).catch(() => {
								uni.hideLoading();
								reject();
							})
						})
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

css:

<style lang="scss" scoped>
	.u-progress {
		position: absolute;
		bottom: 10rpx;
		left: 8rpx;
		right: 8rpx;
		z-index: 9;
		width: auto;
	}

	.u-delete-icon {
		position: absolute;
		top: 4rpx;
		right: 4rpx;
		z-index: 10;
		background-color: #CCCCCC;
		border-radius: 100rpx;
		width: 36rpx;
		height: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress {
		position: absolute;
		bottom: 10rpx;
		left: 8rpx;
		right: 8rpx;
		z-index: 9;
		width: auto;
	}
</style>