uniApp 封装Upload组件实现图片和视频上传，解决官方api单一上传问题

最新推荐文章于 2024-05-31 17:16:28 发布

另一个自己IT

最新推荐文章于 2024-05-31 17:16:28 发布

阅读量2.9k

点赞数 4

分类专栏： Web 前端开发 uniapp 文章标签： uni-app 微信小程序前端

本文链接：https://blog.csdn.net/weixin_46408500/article/details/126405484

版权

前端开发同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

Web

9 篇文章 0 订阅

订阅专栏

uniapp

2 篇文章 0 订阅

订阅专栏

一、话不多下先看成果

uniapp 官方api没有同时上传图片和视频的组件，所以就只能自己做了，在此记录下！

二、结构部分

<view class="Upload">
		<view class="list-box">
			<view class="item" v-show="imageList.length" v-for="(src,i) in imageList" :key="i">
				<image :src="src"></image>

				<u-icon class="icon" @click="deleteFile('img',i)" name="close-circle-fill" color="#f34241" size="28">
				</u-icon>
			</view>
			<view class="item" v-show="videoList.length" v-for="(src,i) in videoList" :key="i">
				<video :src="src"></video>

				<u-icon class="icon" @click="deleteFile('video',i)" name="close-circle-fill" color="#f34241" size="28">
				</u-icon>
			</view>
			<view class="box-s" @click="Upload">
				<image src="../static/ca.png"></image>
				<view class="txt">
					照片/视频
				</view>
			</view>
		</view>
		<u-action-sheet :list="list" @click="clickIndex" v-model="show"></u-action-sheet>
	</view>

二、css部分

.box-s {
		width: 160rpx;
		height: 160rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 12rpx;

		.txt {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 49rpx;
		}

		image {
			width: 55rpx;
			height: 46rpx;
		}
	}

	.item {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 12rpx;
		margin-top: 12rpx;
		position: relative;

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

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

		.icon {
			display: inline-block;
			width: 28rpx;
			height: 28rpx;
			position: absolute;
			right: 0;
			top: -28rpx;
			margin: auto;
		}
	}

	.list-box {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

三、js部分

这里之所以循环一个一个上传是因为，我是用于小程序端的，目前uniapp不支持微信小程序以文件列表形式上传，

filePath: item, //改为files可实现一次上传多个文件，仅App、H5（ 2.6.15+）支持

具体请参考官方文档

export default {
		name: "Upload",
		data() {
			return {
				//上传
				list: [{
					text: '图片'
				}, {
					text: '视频'
				}],
				show: false,
				imageList: [], //上传图片列表
				videoList: [], //视频列表
			};
		},
		methods: {
			//上传触发 选择
			Upload() {
				//上传
				this.show = true;
			},
			//视频/图片选择
			clickIndex(index) {
				if (this.list[index].text == '视频') {
					this.changeVideo();
				} else {
					this.changeImg()
				}
			},
			//选择视频
			changeVideo() {
				var that = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						that.videoList.push(res.tempFilePath);
					}
				});
			},
			//选择图片
			changeImg() {
				let that = this;
				// 从相册选择9张图
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						// console.log(res.tempFilePaths)
						let arr = res.tempFilePaths;
						arr.forEach(item => {
							that.imageList.push(item);
						})
					}
				});
			},
			//删除
			deleteFile(type, index) {
				if (type == 'img') {
					this.imageList.splice(index, 1);
				} else {
					this.videoList.splice(index, 1);
				}
			},
			//提交
			btnClick(url) {
				this.addUpload(this.imageList,url);
				this.addUpload(this.videoList,url);
			},
			//文件提交上传
			addUpload(list, url) {
				if (list.length) {
					list.forEach(item => { //这里之所以循环一个一个上传是因为，我是用于小程序端的，目前uniapp不支持微信小程序以文件列表形式上传，
						uni.uploadFile({
							url: url, //仅为示例，非真实的接口地址
							filePath: item, //改为files可实现一次上传多个文件，仅App、H5（ 2.6.15+）支持
							name: 'file',
							header: {
								'Content-Type': 'multipart/form-data'
							},
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								console.log(uploadFileRes)
							}
						});
					})
				}
			}
		}
	}

四、使用

html

  
						<!-- 上传组件 -->
						<Upload ref="upload"></Upload>

调用传入的是服务器上传地址，

//调用组件内的上传方法 并传入服务器上传地址
this.$refs.upload.btnClick('https://www.example.com/upload');

五、组件封装的完整内容

使用：参考目录四

<template>
	<view class="Upload">
		<view class="list-box">
			<view class="item" v-show="imageList.length" v-for="(src,i) in imageList" :key="i">
				<image :src="src"></image>

				<u-icon class="icon" @click="deleteFile('img',i)" name="close-circle-fill" color="#f34241" size="28">
				</u-icon>
			</view>
			<view class="item" v-show="videoList.length" v-for="(src,i) in videoList" :key="i">
				<video :src="src"></video>

				<u-icon class="icon" @click="deleteFile('video',i)" name="close-circle-fill" color="#f34241" size="28">
				</u-icon>
			</view>
			<view class="box-s" @click="Upload">
				<image src="../static/ca.png"></image>
				<view class="txt">
					照片/视频
				</view>
			</view>
		</view>
		<u-action-sheet :list="list" @click="clickIndex" v-model="show"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		name: "Upload",
		data() {
			return {
				//上传
				list: [{
					text: '图片'
				}, {
					text: '视频'
				}],
				show: false,
				imageList: [], //上传图片列表
				videoList: [], //视频列表
			};
		},
		methods: {
			//上传触发 选择
			Upload() {
				//上传
				this.show = true;
			},
			//视频/图片选择
			clickIndex(index) {
				if (this.list[index].text == '视频') {
					this.changeVideo();
				} else {
					this.changeImg()
				}
			},
			//选择视频
			changeVideo() {
				var that = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						that.videoList.push(res.tempFilePath);
					}
				});
			},
			//选择图片
			changeImg() {
				let that = this;
				// 从相册选择9张图
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						// console.log(res.tempFilePaths)
						let arr = res.tempFilePaths;
						arr.forEach(item => {
							that.imageList.push(item);
						})
					}
				});
			},
			//删除
			deleteFile(type, index) {
				if (type == 'img') {
					this.imageList.splice(index, 1);
				} else {
					this.videoList.splice(index, 1);
				}
			},
			//提交
			btnClick(url) {
				this.addUpload(this.imageList,url);
				this.addUpload(this.videoList,url);
			},
			//文件提交上传
			addUpload(list, url) {
				if (list.length) {
					list.forEach(item => { //这里之所以循环一个一个上传是因为，我是用于小程序端的，目前uniapp不支持微信小程序以文件列表形式上传，
						uni.uploadFile({
							url: url, //仅为示例，非真实的接口地址
							filePath: item, //改为files可实现一次上传多个文件，仅App、H5（ 2.6.15+）支持
							name: 'file',
							header: {
								'Content-Type': 'multipart/form-data'
							},
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								console.log(uploadFileRes)
							}
						});
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.box-s {
		width: 160rpx;
		height: 160rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 12rpx;

		.txt {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 49rpx;
		}

		image {
			width: 55rpx;
			height: 46rpx;
		}
	}

	.item {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 12rpx;
		margin-top: 12rpx;
		position: relative;

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

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

		.icon {
			display: inline-block;
			width: 28rpx;
			height: 28rpx;
			position: absolute;
			right: 0;
			top: -28rpx;
			margin: auto;
		}
	}

	.list-box {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
</style>

拿走可直接使用！