1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：另一个自己IT 分类：Toy博客 阅读(37) 违法举报

这篇具有很好参考价值的文章主要介绍了uniApp 封装Upload组件实现图片和视频上传，解决官方api单一上传问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、话不多下先看成果

u-upload上传视频,Web,前端开发,uniapp,uni-app,微信小程序,前端

 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>

js

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

//调用组件内的上传方法 并传入服务器上传地址
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>

拿走可直接使用！文章来源地址https://www.toymoban.com/news/detail-625533.html

到了这里，关于uniApp 封装Upload组件实现图片和视频上传，解决官方api单一上传问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包