uniapp上传图片封装

上传图片组件 upload.vue

<template>
	<view></view>
</template>

<script>
	export default {
		data() {
			return {
				/*需要返回的图片*/
				imageList: [],
			};
		},
		mounted() {
			this.chooseImageFunc();
		},
		methods: {
			// 打开相机或者相册，选择图片
			chooseImageFunc() {
				let _this = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择，相机拍摄
					success: function(res) {
						// console.log(res)
						_this.uploadFile(res.tempFilePaths);
					},
					fail: function(res) {
						_this.$emit('getImgs', null);
					},
					complete: function(res) {

					}
				});
			},

			// 上传图片
			uploadFile: function(tempList) {
				let _this = this;
				let i = 0;
				let img_length = tempList.length;
				uni.showLoading({
					title: '图片上传中'
				});

				tempList.forEach(function(filePath, fileKey) {
					uni.uploadFile({
						url: _this.base_url + '/zapi_user/Commonapi/uploadfile',
						filePath: filePath,
						name: 'file',
						formData: {},
						header: {
							'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
							'token': uni.getStorageSync('token'),
						},
						success: function(res) {
							// console.log(res);
							if (res.statusCode == 200) {
								let result = JSON.parse(res.data);
								// console.log(result)
								_this.imageList.push(result.data);
							} else {
								uni.showToast({
									title: '图片上传失败',
									icon: 'none',
									duration: 2000
								});
							}
						},
						complete: function(res) {
							// console.log(res)
							i++;
							if (img_length === i) {
								uni.hideLoading();
								// 所有文件上传完成
								_this.$emit('getImgs', _this.imageList);
							}
						}
					});
				});
			},

		}
	};
</script>

表单demo

<template>
	<view>

		<form @submit="formSubmit">
			<view class="templetForm_box">
				<view class="templetForm_con">
					<view class="templetItem">
						<view class="templetLabel">
							<text>*</text>标题
						</view>
						<view class="templetControls">
							<input class="input" type="text" name="title" placeholder="要求34个字以内"
								placeholder-class="placeholderColor" maxlength="34" />
						</view>
					</view>
					<view class="templetWrap">
						<view class="templetHead">
							<view class="headLeft"><text>*</text>图片上传</view>
							<view class="headRight"></view>
						</view>
						<view class="templetBody">
							<view class="uploadList">
								<view class="uploadItem" v-for="(item, index) in imgList" :key="index"
									v-if="imgList.length>0">
									<image :src="item.url" mode="aspectFill" @click="previewImg(item.url)"></image>
									<view class="delPic" @click="deleteImg(index)">
										<u-icon name="close-circle" color="#fa3534" size="50"></u-icon>
									</view>
								</view>
								<view class="uploadItem uploadBtn" @click="openUpload()">
									<u-icon name="plus" color="#BCBCBC" size="60"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="templetWrap">
						<view class="templetHead">
							<view class="headLeft"><text>*</text>详细描述</view>
						</view>
						<view class="templetBody">
							<textarea class="textarea" name="content" placeholder="要求500个字以内"
								placeholder-class="placeholderColor" maxlength="500" />
						</view>
					</view>
				</view>
			</view>

			<view class="templetPost_con">
				<button form-type="submit" hover-class="none" class="templetBtn">发 布</button>
			</view>
		</form>

		<!--上传图片-->
		<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>

	</view>
</template>

<script>
	import Upload from '@/components/upload/upload.vue';
	export default {
		data() {
			return {
				// 上传图片
				isUpload: false, //是否打开上传图片
				imgList: [],
				imgIds: [],
			}
		},
		components: {
			Upload
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
		},
		onShow() {

		},
		onReady() {

		},
		methods: {
			/**
			 * 上传图片 start
			 */
			// 打开上传图片
			openUpload() {
				this.isUpload = true;
			},

			// 获取上传的图片
			getImgsFunc(e) {
				console.log("==获取上传的图片==");
				console.log(e);
				let _this = this;
				if (e && typeof(e) != 'undefined') {
					_this.imgList = _this.imgList.concat(e);
				}
				_this.isUpload = false;
			},

			// 预览图片
			previewImg(src) {
				let _this = this;
				// console.log(_this.imgList);
				var current = src;
				var imgList = _this.imgList;
				var imagesUrl = [];
				for (var i = 0; i < imgList.length; i++) {
					imagesUrl[i] = imgList[i].url;
				}
				// console.log(imagesUrl)

				uni.previewImage({
					current: current,
					urls: imagesUrl
				})
			},

			// 图片删除
			deleteImg(index) {
				// console.log(index);
				let _this = this;
				_this.imgList.splice(index, 1);
			},
			/**
			 * 上传图片 end
			 */

			// 提交
			formSubmit: function(e) {
				let _this = this;
				var formData = e.detail.value;

				if (!formData.title) {
					uni.showModal({
						content: '标题不能为空',
						showCancel: false,
					})
					return;
				}

				// 上传图片
				let imgList = _this.imgList;
				let imgIds = _this.imgIds;
				for (var i = 0; i < imgList.length; i++) {
					imgIds.push(imgList[i].path)
				}
				console.log("==图片id数组==");
				console.log(imgIds);
				if (imgIds.length == 0) {
					uni.showModal({
						content: '请上传图片',
						showCancel: false,
					})
					return;
				}

				if (!formData.content) {
					uni.showModal({
						content: '详细描述信息不能为空',
						showCancel: false,
					})
					return;
				}

				_this.$u.post('/zapi_user/shop.Giftgoods/add_data', {
					title: formData.title,
					imglist: _this.imgIds,
					content: formData.content,
				}).then(res => {
					console.log("==发布==");
					console.log(res);

					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

		}
	}
</script>

<style scoped>
	.templetForm_box {
		padding-bottom: 120rpx;
		overflow: hidden;
	}

	.templetForm_con {
		padding: 0 20rpx;
		background-color: #fff;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.templetItem {
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.templetItem:last-child {
		border-bottom: 0;
	}

	.templetItem .templetLabel {
		width: 190rpx;
		font-weight: bold;
	}

	.templetItem .templetLabel text {
		font-size: 24rpx;
		color: #F85431;
		margin-right: 5rpx;
	}

	.templetItem .templetControls {
		width: 520rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.templetControls .input {
		flex: 2;
		text-align: left;
		font-size: 28rpx;
		overflow: hidden;
	}

	.templetWrap {
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
	}

	.templetHead {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.headLeft {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.headLeft text {
		font-size: 24rpx;
		color: #F85431;
		margin-right: 5rpx;
	}

	.headRight {
		display: flex;
		justify-content: flex-end;
	}

	.templetBody {
		padding-top: 20rpx;
		overflow: hidden;
	}

	.templetBody .textarea {
		width: 100%;
		height: 200rpx;
		overflow: hidden;
	}

	.templetBtm {
		padding-top: 20rpx;
		overflow: hidden;
	}

	.templetTips {
		font-size: 24rpx;
		color: #4560CD;
	}

	/* 上传 */
	.uploadItem {
		width: 120rpx;
		height: 120rpx;
		background-color: #fff;
		border: 2rpx solid #eee;
	}

	.uploadItem:nth-child(5n) {
		margin-left: 0;
	}

	.uploadBtn {
		flex-wrap: wrap;
		align-content: center;
	}

	/* 底部 */
	.templetPost_con {
		width: 100%;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
	}

	.templetBtn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background: #F85431;
		border-radius: 0;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		overflow: hidden;
	}
</style>