uniapp:上传图片/视频/二维码扫码（含css样式）

_木棠

已于 2023-07-31 14:31:47 修改

阅读量487

点赞数

文章标签： uni-app

于 2023-01-18 19:00:00 首次发布

本文链接：https://blog.csdn.net/Ygaidi/article/details/128685052

版权

该代码段展示了在uni-app框架下如何实现图片和视频的上传功能，包括选择图片、预览图片、删除图片、上传视频等操作。用户可以上传最多5张图片，点击图片进行预览，删除已上传的图片。视频上传也类似，选择视频后进行上传。

摘要由CSDN通过智能技术生成

1.上传图片

<view class="ui-sub-h ui-sub-h2">
	<view class="ui-text1">
			上传图片：
	</view>
	<view class="uploads">
	     <!-- 图片上传 -->
	     <view class="upload-image-view">
		      <block v-for="(image,index) in imageListShow" :key="index">
			       <view class="image-view">
			        	<image :src="image" :data-src="image" @tap="previewImage"></image>
				        <view class="del-btn" :data-index="index" @click="deleteImage(index)">
					         <view class="baicha"></view>
				        </view>
			        </view>
		     </block>
	         <view class="add-view" v-if="imageListShow.length < 5" @tap="chooseImageClick">
		        <view class="cross">
			         <view class="transverse-line"></view>
			         <view class="vertical-line"></view>
		        </view>
	         </view>
	    </view>
	</view>
</view>


<view class="ui-cnt-li">
	<view class="ui-cnt-li-h">上传视频：</view>
	<view class="uploads">
	<!-- 图片上传 -->
		<view class="upload-image-view">
			<block >
			    <view class="image-view" v-if="videolin">
				<video class="ui-video" v-if="videolin" :src="videolin" controls></video>
			    <view class="del-btn" :data-index="index" @click="deleteImage(index)">
					<view class="baicha"></view>
				</view>
				</view>
		    </block>
			<view class="add-view" v-if="!videolin" @tap="chooseVideo">
				<view class="cross">
					<view class="transverse-line"></view>
						<view class="vertical-line"></view>
				</view>
			</view>
		</view>
	</view>
</view>

export default {
		data(){
			return {
				imageList: [], //保存图片路径集合
				imageListShow:[],
				videolin:'',
				video:'',
			}
		},
}

// 选择图片
			chooseImageClick() {
				uni.chooseImage({
					count: 5,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showToast({
							title: tempFilePaths,
							icon: "none",
							duration: 10000,
						})
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url:'',// 上传图片接口
								filePath: tempFilePaths[i],
								// header: {
								// 	'Authorization': this.token
								// },
								name: 'file',
								success: (uploadFileRes) => {
									var data = JSON.parse(uploadFileRes.data);
									console.log('+++++++++++++', data.Data)		
                                    可自定义拼接图片链接							                    
                                 this.imageListShow=this.imageListShow.concat(data.Data);
									this.imageList = this.imageList.concat(data.Data);
									console.log(this.imageList)
									this.projectPicture = this.imageList.join(';')
									console.log(this.projectPicture )
								},
							});
						}
			
					}
				})
			},
			// 预览图片
			previewImage: function(e) {
				var current = e.target.dataset.src
				console.log(current)
				uni.previewImage({
					current: current,
					urls: this.imageListShow
				})
			},
			// 删除图片
			deleteImage: function(index) {
				/* console.log(e) */
				/* var index = e.target.dataset.index; */
				console.log(index)
				var that = this;
				var images = that.imageListShow;
				var images2 = that.imageList;
				images.splice(index, 1);
				images2.splice(index, 1);
				//var eventImages = that.eventImages
				// that.eventImages = (that.eventImages).splice(index, 1);
				that.imageListShow = images;
				that.imageList = images2;
				console.log('==' + that.imageList)
				that.projectPicture = that.imageList.join(',')
				that.videolin = ''
				that.video = ''
			},
			//上传视频
			chooseVideo() {
				uni.chooseVideo({
					maxDuration: 15, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						uni.showLoading({
							mask: true,
							title: '上传中...'
						})
						uni.uploadFile({
							url: '',// 上传视频接口
							filePath: res.tempFilePath,
							header: {
								'Authorization': this.token
							},
							name: 'file',
							success: (uploadFileRes) => {
								var data = JSON.parse(uploadFileRes.data);
								console.log(data.Data,'================================')
								uni.hideLoading()
								this.videolin = data.Data // 可自定义拼接视频链接
								this.video = data.Data
							},
						});
					}
				})
			},

css

    .uploads {
		width: 100%;
		padding-left: 20rpx;
		height: 200rpx;
	}
	
	.upload-image-view {
		width: 100%;
		margin: 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		float: left;
	}
	
	.upload-image-view .add-view {
		height: 142rpx;
		width: 154rpx;
		margin: 15rpx 15rpx 15rpx 0upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.00);
		border: 3rpx dashed #979797;
		border-radius: 8rpx;
	}
	
	.upload-image-view .add-view .cross {
		height: 80rpx;
		width: 80rpx;
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}
	
	.upload-image-view .add-view .cross .transverse-line {
		height: 100%;
		width: 48%;
		position: absolute;
		border-right: 3rpx solid #D4D4D5;
		top: 0;
		left: 0;
	}
	
	.upload-image-view .add-view .cross .vertical-line {
		height: 48%;
		width: 100%;
		position: absolute;
		border-bottom: 3rpx solid #D4D4D5;
		top: 0;
		left: 0;
	}
	
	.upload-image-view .image-view {
		height: 142rpx;
		width: 154rpx;
		position: relative;
		margin: 15rpx 15rpx 15rpx 0rpx;
		border-radius: 8rpx;
	}
	
	.upload-image-view .image-view image {
		height: 100%;
		width: 100%;
		border-radius: 8rpx;
	}
	
	.upload-image-view .image-view .del-btn {
		background-color: #f67371;
		border-radius: 50%;
		width: 25rpx;
		height: 25rpx;
		position: absolute;
		top: -12rpx;
		right: -12rpx;
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.upload-image-view .image-view .del-btn .baicha {
		display: inline-block;
		width: 20rpx;
		height: 5rpx;
		background: #fff;
		line-height: 0;
		font-size: 0;
		vertical-align: middle;
		-webkit-transform: rotate(45deg);
	}
	
	.upload-image-view .image-view .del-btn .baicha:after {
		content: '/';
		display: block;
		width: 20rpx;
		height: 5rpx;
		background: #fff;
		-webkit-transform: rotate(-90deg);
	}

------------------扫码-----------------------

// 扫码出入
scanCode(){
	var that = this;
	uni.scanCode({ //扫描API
		onlyFromCamera: true,
		success(res) { //扫描成功
			console.log(res) //输出回调信息
			var result = res.result
			console.log('result',result);
			uni.setStorageSync('result',result) // 存储数据
			wx.navigateTo({
				url:'../scanCode/scanCode?q=q&scanCode='+result
			})
		},
		fail: (res) => {//接口调用失败的回调函数
			uni.showToast({
			    title: '扫码失败',
				icon: 'none',
				duration: 1000
			})
		}
     })
}