uniapp用户上传多张图片

效果图:

代码: 

<template>
	<view class="box">
		<view class="feedback-box">
			<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
				<uni-forms-item label="反馈类型" required name="type">
					<uni-data-checkbox v-model="customFormData.type" :localdata="types" />
				</uni-forms-item>
				<uni-forms-item label="反馈内容" required name="content">
					<!-- 用户反馈内容 -->
					<uni-easyinput type="textarea" v-model="customFormData.content" maxlength='100'
						placeholder="为您造成的任何不便之处，我们再次向您致以诚挚的歉意" />
					<!-- 用户上传图片 -->
					<view class="upload-file">
						<view class="file-item">
							<uni-file-picker v-model="imageValue" fileMediatype="image" @select="select"
								@delete="delIMG" limit="4" title="请选择图片: 最多选择4张图片"></uni-file-picker>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<!-- <view class="empty" style="height: 32rpx;">

			</view> -->
		</view>
		<view class="button-box">
			<button class="button" @click="submit">提交反馈</button>
		</view>

	</view>




</template>

<script>
	import {
		feedBack
	} from '../../api/home.js'
	import {version} from '../../utils/globalVariable.js'
	export default {
		data() {
			return {
				// 基础表单数据
				customFormData: {
					content: '',
					type: [4],
				},

				// 单选数据源
				types: [{
					text: '意见反馈',
					value: 0
				}, {
					text: '软件问题',
					value: 1
				}, {
					text: '业务相关',
					value: 2
				}, {
					text: '其他',
					value: 3
				}, ],

				//图片
				imageValue: [],

				// // 校验规则
				// customRules: {
				// 	content: {
				// 		rules: [{
				// 			required: true,
				// 			errorMessage: '反馈内容不能为空'
				// 		}]
				// 	},
				// 	type: {
				// 		rules: [{
				// 				format: 'type'
				// 			},
				// 			{
				// 				validateFunction: function(rule, value, data, callback) {
				// 					if (value.length < 1) {
				// 						callback('请至少勾选两个兴趣爱好')
				// 					}
				// 					return true
				// 				}
				// 			}
				// 		]
				// 	}
				// },
			}
		},
		computed: {
			image() {
				const ImageArray = this.imageValue.map((item) => {
					return item.imgRul
				})
				const ImageString = ImageArray.join()
				console.log(ImageString);
				return ImageString
			}
		},
		methods: {

			//图片上传
			async select(e) {
				let that = this
				console.log(e);
				const tempFilePaths = e.tempFilePaths;
				for (let i = 0; i < tempFilePaths.length; i++) {
					uni.uploadFile({
						// 	//图片上传地址
						url: 'https://ccb-api.znyzf.com/api/common/upload',
						filePath: tempFilePaths[i],
						// // 	//上传名字，注意与后台接收的参数名一致
						name: 'file',
						//设置请求头
						header: {
							"Content-Type": "multipart/form-data",
							'token': uni.getStorageSync('token')
						},
						//请求成功，后台返回自己服务器上的图片地址
						success: (uploadFileRes) => {
							console.log('uploadFileRes', JSON.parse(uploadFileRes.data));
							// //处理数据
							const path = JSON.parse(uploadFileRes.data)
							// //后端返回的地址，存入图片地址
							that.imageValue.push({
								url: getApp().globalData.cdnUrl + path.data.url,
								imgRul: path.data.url
							})

						}
					})
				}
			},
			//图片删除
			delIMG(e) {
				// console.log('456', e)
				const num = this.imageValue.findIndex(v => v.url === e.tempFilePath);
				// console.log(num, 999999);
				this.imageValue.splice(num, 1);
			},
			async submit() {
				// this.$refs.customForm.validate().then(res => {
				// 	uni.showToast({
				// 		title: `校验通过`
				// 	})
				// }).catch(err => {
				// 	console.log('err', err);
				// })
				if (this.customFormData.type == 4) {
					uni.showToast({
						title: `请选择反馈类型`
					})

				} else {
					if (this.customFormData.content == '') {
						uni.showToast({
							title: `请填写反馈内容`
						})
					} else {
						console.log(this.customFormData.content, '0000000');
						const typeIndex = this.customFormData.type
						const res = await feedBack({
							nickname: uni.getStorageSync('nickname') || '',
							phone: uni.getStorageSync('mobile') || '',
							type_text: this.types[typeIndex].text,
							content: this.customFormData.content,
							content_images: this.image,
							version: version,
							user_id: uni.getStorageSync('userId') || '',
						})
						if (res.code == 1) {
							// uni.navigateTo({
							// 	url: `/subpkg/feedSuccess/feedSuccess`
							// })
							uni.reLaunch({
								url: `/subpkg/feedSuccess/feedSuccess`
							})
						}
					}
				}
			},

		}
	}
</script>


<style lang="scss">
	.box {
		padding-bottom: 250rpx;
	}

	.feedback-box {

		width: 100%;
		background: #f7f7f7;
	}



	// 表单公共的样式

	/deep/ .uni-forms-item {
		flex-direction: column !important;
		margin-bottom: 32rpx !important;
	}

	/deep/.uni-forms-item__label {
		position: relative;
		margin-top: 20rpx;
		width: 280rpx !important;
		font-size: 32rpx;
		color: #333333;
		box-sizing: border-box;
		padding-left: 21rpx;
		margin-left: 32rpx;

		&::before {
			content: '';
			display: block;
			width: 4rpx;
			height: 30rpx;
			background: #DF3535;
		}

		&::after {
			content: '*';
			display: block;
			width: 12rpx;
			height: 11rpx;
			font-size: 34rpx;
			color: #DF3535;
			margin-left: 16rpx;
			margin-bottom: 26rpx;
		}

		text {
			display: block;
			box-sizing: border-box;
			padding-left: 21rpx;
		}
	}


	// 反馈类型盒子的样式

	/deep/.uni-forms-item:nth-child(1) {
		background: #FFFFFF;
		font-size: 32rpx;
		color: #333333;
		height: 299rpx;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #ededed;

		// 表单每一项的样式
		.uni-forms-item__content {
			margin-top: 23rpx;
			box-sizing: border-box;
			padding-left: 32rpx;
			padding-right: 32rpx;
		}

		// 校验星星的样式
		.is-required {
			display: none;
		}

		// 被选中的颜色

		.is-checked {
			.checklist-content {
				background: #DF3535;

				.checklist-text {
					color: #FEFEFE !important;
				}
			}
		}

		// 隐藏单选框
		.radio__inner {
			visibility: hidden !important;
			position: absolute !important;
		}

		// 反馈类型列表的样式
		.checklist-content {
			display: none;
			width: 208rpx;
			height: 59rpx;
			background: #F7F7F7;
			border-radius: 30rpx;
			justify-content: center !important;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		// 反馈类型列表的样式
		.checklist-group {
			justify-content: space-between;
			padding-left: 0rpx;
			padding-right: 0rpx;

		}

		// 反馈类型列表的文本样式
		.checklist-text {
			margin-left: 0rpx !important;
		}

		// 反馈类型列表的样式
		.checklist-box {
			margin-right: -0px !important;
		}

	}




	// 反馈内容的样式
	/deep/.uni-forms-item:nth-child(2) {
		background: #FFFFFF;
		font-size: 32rpx;
		color: #333333;
		// height: 578rpx;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #ededed;

		// 表单每一项的样式
		.uni-forms-item__content {
			margin-top: 35rpx;
			box-sizing: border-box;
			padding-left: 32rpx;
			padding-right: 32rpx;

		}

		// 校验星星的样式
		.is-required {
			display: none;
		}

		.uni-easyinput__content {
			width: 686rpx;
			height: 255rpx;
			background: #F7F7F7;
			border-radius: 10rpx;
		}

		// 输入框的样式
		.uni-easyinput__content-textarea {
			height: 255rpx;
			background: #F7F7F7;
			border-radius: 10rpx;
		}

		.input-padding {
			padding: 0;
		}

		.uni-easyinput__content-textarea {
			height: 100%;
			padding: 22rpx 25rpx 22rpx 26rpx;
			margin: 0;
			padding-top: 22rpx;
			background: #F7F7F7;
		}

		// 去掉框架自带的样式
		.is-input-border {
			display: flex;
			box-sizing: border-box;
			flex-direction: row;
			align-items: center;
			border: none;
			border-radius: 0px;
		}

		// 反馈内容为空的校验提示文字
		.uni-forms-item__error {
			top: 110%;
			left: 35%;
			// transfrom:translateX(-50%);
			font-size: 28rpx;
		}


		// 用户上传图片
		.upload-file {
			margin-top: 62rpx;
			margin-bottom: 42rpx;


		}
	}


	.button-box {
		position: fixed;
		bottom: 100rpx;
		width: 100%;

		.button {
			margin: a auto;
			width: 690rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #DF3535;
			border-radius: 10rpx;
			color: #FFFFFF;
		}
	}


	// 图片尺寸
	/deep/ .file-picker__box {
		// width: 150rpx!important;
		// flex: 0 0 150rpx!important;
		// height: 150rpx!important;

	}

	/deep/.file-title {
		font-size: 14px !important;

		color: #606266 !important;
	}

	/deep/.file-count {
		font-size: 14px !important;

		color: #606266 !important;
	}
</style>