uni-app 图片上传 demo

其他 2019-03-07 15:46:34 阅读次数: 0

upload-imgs.css

/* 第一套图片上传样式（内部图标相机） */
.upload-image-view {
	width: 100%;
	margin: 20upx 0 20upx 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.upload-image-view .title {
	width: 100%;
	font-family: PingFang-SC-Regular;
	font-size: 24upx;
	color: #4a4a4a;
	margin-bottom: 15upx;
	line-height: 100%;
}

.upload-image-view .info {
	width: 100%;
	font-family: PingFang-SC-Regular;
	font-size: 24upx;
	color: #ff4259;
	height: 24upx;
	margin-top: 15upx;
	line-height: 24upx;
}

.upload-image-view .image-view {
	height: 130upx;
	width: 130upx;
	position: relative;
	margin: 15upx 15upx 15upx 0upx;
	border-radius: 8upx;
}

.upload-image-view .image-view image {
	height: 100%;
	width: 100%;
	border-radius: 8upx;
}

.upload-image-view .image-view .del-btn {
	background-color: #f67371;
	border-radius: 50%;
	width: 25upx;
	height: 25upx;
	position: absolute;
	top: -12upx;
	right: -12upx;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
}

.upload-image-view .image-view .del-btn .baicha {
	display: inline-block;
	width: 20upx;
	height: 5upx;
	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: 20upx;
	height: 5upx;
	background: #fff;
	-webkit-transform: rotate(-90deg);
}

.upload-image-view .add-view {
	height: 115upx;
	width: 115upx;
	margin: 15upx 15upx 15upx 0upx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.00);
	border: 3upx dashed #979797;
	border-radius: 8upx;
}

/* 相机 */

.upload-image-view .add-view .xiangji {
	height: 40upx;
	width: 48upx;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.upload-image-view .add-view .xiangji .tixing {
	width: 10upx;
	height: 7upx;
	background-color: #fff;
	border-right: 10upx solid #fff;
	border-bottom: 7upx solid #b2b2b2;
	border-left: 10upx solid #fff;
}

.upload-image-view .add-view .xiangji .changfx {
	height: 32upx;
	width: 48upx;
	border-radius: 5%;
	background-color: #b2b2b2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.upload-image-view .add-view .xiangji .changfx .yuan1 {
	height: 20upx;
	width: 20upx;
	border-radius: 50%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.upload-image-view .add-view .xiangji .changfx .yuan2 {
	height: 10upx;
	width: 10upx;
	border-radius: 50%;
	background-color: #b2b2b2;
}

/* 第二套图片上传样式（内部图标 十字架）*/

/* 十字架 */
.upload-image-view .add-view .cross {
	height: 48upx;
	width: 48upx;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

.upload-image-view .add-view .cross .transverse-line {
	height: 100%;
	width: 48%;
	position: absolute;
	border-right: 3upx solid #5A5A5A;
	top: 0;
	left: 0;
}

.upload-image-view .add-view .cross .vertical-line {
	height: 48%;
	width: 100%;
	position: absolute;
	border-bottom: 3upx solid #5A5A5A;
	top: 0;
	left: 0;
}

my-proskill-edit.vue

<template>
	<view class="body-view">
		<view class="info-table">
			<view class="info-table-row">
				<view class="table-row-left">技能名称</view>
				<view class="table-row-right">
					<input type="text" />
				</view>
			</view>
			<view class="info-table-row">
				<view class="table-row-left">熟练程度</view>
				<view class="table-row-right">
					<image src="../../static/imgs/system/leftjt.svg"></image>
				</view>
			</view>
		</view>
		<view class="uploads">
		<!-- 图片上传 -->
		<view class='upload-image-view'>
			<!-- 标题已经省略 -->
			<!-- <view class='title'>上传xxxx图片</view> -->
			<block v-for="(image,index) in imageList" :key="index">
				<view class='image-view'>
					<image :src="image" :data-src="image" @tap="previewImage"></image>
					<view class='del-btn' :data-index="index" @tap='deleteImage'>
						<view class='baicha'></view>
					</view>
				</view>
			</block>
			<view class='add-view' v-if="imageList.length < imageLength" @tap="chooseImage">

				<!-- 相机 -->
				<!-- <view class="xiangji">
							<view class="tixing"></view>
							<view class='changfx'>
								<view class='yuan1'>
									<view class='yuan2'></view>
								</view>
							</view>
						</view> -->

				<!-- 十字架 -->
				<view class="cross">
					<view class="transverse-line"></view>
					<view class="vertical-line"></view>
				</view>

			</view>
			<view class='info'>上传证书/证件，不超过{{imageLength}}张。(非必填)</view>
		</view>
		<!-- 图片上传 -->
		</view>
		<view class="table-btn-view">
			<button class="save-btn">保存</button>
		</view>
	</view>
</template>

<script>
	var sourceType = [
		['camera'], //拍照
		['album'], //相册
		['camera', 'album'] //拍照或相册
	]
	var sizeType = [
		['compressed'], //压缩
		['original'], //原图
		['compressed', 'original'] //压缩或原图
	]
	export default {
		data() {
			return {
				imageList: [], //保存图片路径集合
				imageLength: 3, //限制图片张数
				sourceTypeIndex: 2, //添加方式限制
				sizeTypeIndex: 2, //图片尺寸限制
			}
		},
		onUnload() {

		},
		methods: {
			//选择图片
			chooseImage: async function() {
					uni.chooseImage({
						sourceType: sourceType[this.sourceTypeIndex],
						// #ifdef MP-WEIXIN
						sizeType: sizeType[this.sizeTypeIndex],
						// #endif
						count: this.imageLength - this.imageList.length,
						success: (res) => {
							this.imageList = this.imageList.concat(res.tempFilePaths);
						}
					})
				},
				//预览图片
				previewImage: function(e) {
					var current = e.target.dataset.src
					uni.previewImage({
						current: current,
						urls: this.imageList
					})
				},
				//删除图片
				deleteImage: function(e) {
					var index = e.target.dataset.index;
					var that = this;
					var images = that.imageList;
					images.splice(index, 1);
					that.imageList = images;
				}
		}
	}
</script>

<style>
	@import "../../static/css/upload-imgs.css";

	page {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		background-color: #FFFFFF;
	}

	.body-view {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}

	.info-table {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		background-color: #FFFFFF;
	}

	.info-table .info-table-row {
		height: 120upx;
		width: 92%;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1upx solid rgba(204, 204, 204, 1);
	}

	.info-table .info-table-row .table-row-left {
		height: 40upx;
		font-size: 28upx;
		font-weight: 400;
		color: rgba(28, 28, 28, 1);
		line-height: 40upx;
	}

	.info-table .info-table-row .table-row-right {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.info-table .info-table-row .table-row-right image {
		width: 13upx;
		height: 24upx;
	}

	.info-table .info-table-row .table-row-right input {
		width: 560upx;
		height: 40upx;
		font-size: 28upx;
		font-weight: 400;
		color: rgba(28, 28, 28, 1);
		line-height: 40upx;
	}

	.table-btn-view {
		position: fixed;
		bottom: 27upx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.table-btn-view .save-btn {
		width: 92%;
		height: 90upx;
		background: rgba(0, 170, 255, 1);
		border-radius: 10upx;
		color: #FFFFFF;
	}
	
	.uploads{
		width: 92%;
	}
</style>

图片上传核心样式

<!-- 图片上传 -->
		<view class='upload-image-view'>
			<!-- 标题已经省略 -->
			<!-- <view class='title'>上传xxxx图片</view> -->
			<block v-for="(image,index) in imageList" :key="index">
				<view class='image-view'>
					<image :src="image" :data-src="image" @tap="previewImage"></image>
					<view class='del-btn' :data-index="index" @tap='deleteImage'>
						<view class='baicha'></view>
					</view>
				</view>
			</block>
			<view class='add-view' v-if="imageList.length < imageLength" @tap="chooseImage">

				<!-- 相机 -->
				<!-- <view class="xiangji">
							<view class="tixing"></view>
							<view class='changfx'>
								<view class='yuan1'>
									<view class='yuan2'></view>
								</view>
							</view>
						</view> -->

				<!-- 十字架 -->
				<view class="cross">
					<view class="transverse-line"></view>
					<view class="vertical-line"></view>
				</view>

			</view>
			<view class='info'>上传证书/证件，不超过{{imageLength}}张。(非必填)</view>
		</view>
		<!-- 图片上传 -->

核心方法

var sourceType = [
		['camera'], //拍照
		['album'], //相册
		['camera', 'album'] //拍照或相册
	]
	var sizeType = [
		['compressed'], //压缩
		['original'], //原图
		['compressed', 'original'] //压缩或原图
	]
	export default {
		data() {
			return {
				imageList: [], //保存图片路径集合
				imageLength: 3, //限制图片张数
				sourceTypeIndex: 2, //添加方式限制
				sizeTypeIndex: 2, //图片尺寸限制
			}
		},
		onUnload() {

		},
		methods: {
			//选择图片
			chooseImage: async function() {
					uni.chooseImage({
						sourceType: sourceType[this.sourceTypeIndex],
						// #ifdef MP-WEIXIN
						sizeType: sizeType[this.sizeTypeIndex],
						// #endif
						count: this.imageLength - this.imageList.length,
						success: (res) => {
							this.imageList = this.imageList.concat(res.tempFilePaths);
						}
					})
				},
				//预览图片
				previewImage: function(e) {
					var current = e.target.dataset.src
					uni.previewImage({
						current: current,
						urls: this.imageList
					})
				},
				//删除图片
				deleteImage: function(e) {
					var index = e.target.dataset.index;
					var that = this;
					var images = that.imageList;
					images.splice(index, 1);
					that.imageList = images;
				}
		}
	}

猜你喜欢

转载自blog.csdn.net/ZkD953/article/details/82865834
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022