熟人的uniapp上传图片

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 283 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文详细介绍了在小程序中实现单图片和多图片上传的方法，包括HTML结构、数据绑定、图片预览、删除功能及样式设置。同时，展示了如何将上传的图片路径存储为数组，并在提交时转换为逗号分隔的字符串，以及如何在页面上渲染这些图片。

单图片上传

html

<view class="f_c_img">
	<image :src=imgs mode="" @click="addPic" class="tiao"></image>
	<image src='../../../static/image/face_img.png' mode="" @click="addPic"></image>
	<view class="fan">
		<view class="huadong"></view>
		<view class="on">
			<view class="beijing"></view>
		</view>
	</view>
</view>

data

data() {
	return {
			imgs: ""
		}
},

方法

addPic: function() {
	let that = this
	var _this = this
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['camera'], //从相册选择
		success: function(res) {
			let file = res.tempFilePaths
			var images = ''
			var img = ''
			for (var i = 0; i < res.tempFilePaths.length; i++) {
				uni.uploadFile({
					url: 'http://suhua.suzhanxue.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
					//这是上传图片的路径，需要问后台拿
					filePath: file[i],
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						images = JSON.parse(res.data).url
						_this.imgs = images
						console.log(_this.imgs)
					}
				});
			}
		}
	});
},

样式

.f_c_img {
	margin-top: 100upx;
	margin-left: 202upx;
	position: relative;
	width: 268upx;
	height: 270upx;
}

.f_c_img image {
	width: 100%;
	height: 100%;
	z-index: 11;
}

.huadong {
	position: absolute;
	width: 100%;
	height: 4upx;
	background: rgba(75, 113, 214, 0.6);
	animation: dong 6s linear infinite alternate;
	z-index: 13;
}

@keyframes dong {
	from {
		top: 100%;
	}

	to {
		top: 0upx;
	}
}

多图片上传

html

<view class="complain_content upload">
	<view class="complaint_content_top">
		<view class="complaint_content_top_left">
			<text>上传图片</text>
		</view>
		<view class="complaint_content_top_right">
			<text>{{imageList.length}}</text>/<text>4</text>
		</view>
	</view>
	<view class="Photo">
		<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(index)'>
							<view class='baicha'></view>
						</view>
					</view>
				</block>
				<view class='add-view' v-if="imageList.length < imageLength" @tap="chooseImage">
					<image src="../../../static/image/camera.png" mode=""></image>//自己找一张图片
				</view>
			</view>
		</view>	
	</view>
</view>

data

data() {
	return {
		imageList: [], //保存图片路径集合
		imageLength: 4, //限制图片张数
	}
}

方法

chooseImage: function() {
	var _this = this
	uni.chooseImage({
	    count: 4, //默认9
	    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	    sourceType: ['camera', 'album'] //拍照或相册
	    success: function (res) {
			let file = res.tempFilePaths
			var images = []
			var img = ''
			for(var i = 0; i<res.tempFilePaths.length; i++) {
				uni.uploadFile({
						 url: 'http://suhua.suzhanxue.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
						 //后台给的路径
						 filePath: file[i],
						 name: 'file',
						 formData: {
						  'user': 'test'
						 },
						 success: (res) => {
							 _this.imageList.push(JSON.parse(res.data).url);
							 console.log(res.data)
						 }
				});
		   }
	    }
	});
},
//预览图片
previewImage: function(e) {
	let current = e.target.dataset.src
	uni.previewImage({
		current: current,
		urls: this.imageList,
	})
},
//删除图片
deleteImage: function(e) {
	// let index = e.target.dataset.index;
	console.log(e)
	let that = this;
	let images = that.imageList;
	images.splice(e, 1);
	that.imageList = images;
},

//这个是多张图片用逗号隔开的字符串（后台所需）
//在提交的时候在转化为字符串
that.submits.pictures=that.imageList.join(",")

css

.complain_content{
		margin-top: 30upx;
		width: 100%;
		padding: 16upx 20upx;
		box-sizing: border-box;
		background: white;
		font-size: 32upx;
		border-radius: 18upx;
		box-shadow: 1upx 1upx 10upx #F7F7F7;
	}
	.complaint_content_top{
		width: 100%;
		height: 82upx;
		border-bottom: 2upx solid #F0F0F0;
		line-height: 80upx;
	}
	.complaint_content_bottom{
		margin-top: 19upx;
		height: 268upx;
	}
	.complaint_content_bottom textarea{
		width: 100%;
		height: 268upx;
		font-size: 28upx;
	}
	.upload .complaint_content_top{
		display: flex;
		justify-content: space-between;
	}
	.upload .complaint_content_top .complaint_content_top_right{
		font-size: 26upx;
		color: #999999;
	}
	.Photo{
		width: 100%;
		margin-top: 19upx;
	}	
	.upload-image-view {
		width: 100%;
		margin: 20upx 0 20upx 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.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: #f6737;
		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 .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 .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: 2upx dashed #e6e6e6;
		border-radius: 12upx;
	}
	 
	/* 相机 */
	.add-view image{
		width: 70upx;
		height: 60upx;
	}

多图片渲染

html不多写自己领会

<view class="Description_img" v-show="item.value!=''">
	<image :src=items v-for="items in item.value" mode=""></image>
</view>

调用

//这个是我封装的调用接口的
request.httppost('api/word/order/getOrderList?b=' + _self.submits.b, _self.submits, 'JSON', function(res) {
	if(res.data.code==200){
		//下拉刷新需要如果不需要下拉请忽略下面ifelse
		if(res.data.data.length>5){
			_self.status = 'loading'
		}else{
			_self.status = 'noMore'
		}
		console.log(res.data.data)
		_self.upLoadList = res.data.data
		res.data.data.forEach(function(item) {
			// console.log(item)
			// console.log(Array.from(item.pictures.split(",")))
			let datas = [];
			datas.push(item)
			// console.log(datas)
			datas.forEach(function(items) {
				items.value = items.pictures.split(",")
				_self.repair.push(items)
			})
			// console.log(_self.repair)
		})
		uni.hideLoading()
	}
})