表单绑定复选框的值和图片上传

表单如何实现与复选框的值绑定一致

<u-form-item :label-position="labelPosition" label="提供服务" prop="provideServices" :label-width="labelWidth" :required="true">
				<u-popup v-model="provideServicesShow" mode="bottom">
					<view class="multi-check">
						<u-checkbox-group shape="square" class="group" @change="provideServicesCheckbox">
							<u-checkbox v-for="(item,index) in provideServicesList" :key="index" v-model="item.checked" :name="item.code"
							 class="checkbox">{{item.name}}</u-checkbox>
						</u-checkbox-group>
						<u-button @click="provideServicesConfirm">确定</u-button>
					</view>
				</u-popup>
				<u-input :border="border" :placeholder="rules.provideServices[0].message" v-model="model.provideServicesName" type="select"
				 :select-open="provideServicesShow" @click="provideServicesShow = true"></u-input>
			</u-form-item>

这是表单的代码，没什么好记录的

provideServicesCheckbox(e) {
			console.log('confirm', e);
			this.model.provideServices = e.join(',');
			this.provideServices
			// this.$set(this.model,'provideServicesName',_.includes(this.))
		},

provideServicesConfirm(e) {
			this.provideServicesShow = false;
			let list = this.model.provideServices.split(',');
			let str = '';
			console.log('themeList', list);
			for (var i = 0; i < list.length; i++) {
				for (var j = 0; j < this.provideServicesList.length; j++) {
					if (list[i] === this.provideServicesList[j].code) {
						if(i === list.length-1){
							str += this.provideServicesList[j].name;
						}else{
							str += this.provideServicesList[j].name + "、";
						}
					}
				}
			};
			console.log('str', str);
			this.model.provideServicesName = str;

		},

js方法代码其实也没什么难点，就是当时开发的时候，后端要求传code过去，那么input输入框绑定的数据只能显示为code，所以我们要写一个双重循环，将code与list中的<key，value> 一 一对应找出来，并赋值给input的v-model
其实这个表单重点、难点在于图片上传，我在这大概讲下 ！代码如下

<u-form-item :label-position="labelPosition" label="书店照片" prop="storePhoto" :label-width="labelWidth" :required="true">
				<u-upload ref="uUpload" width="160" height="160" max-count="3" :action="uploadAction" :file-list="image.bookImgPathList"
				 :before-upload="beforeUpload(bizType.bookImgPath1,)" :form-data="uploadFormData" :header="uploadHeader"
				 :auto-upload="true" @on-success="onUploadSuccess" @on-error="onUploadError"></u-upload>
			</u-form-item>

uploadAction: this.$ajax.getUploadUrl(),
uploadFormData: {},
uploadHeader: {},
bizType: {
					bookImgPath1: Constants.fileBizType._71,
					bookImgPath2: Constants.fileBizType._71,
					bookImgPath3: Constants.fileBizType._71,
					imgPath1: Constants.fileBizType._61,
					imgPath2: Constants.fileBizType._62,
				},
				image: {
					bookImgPathList: [],
					// bookImgPath1: [],
					// bookImgPath2: [],
					// bookImgPath3: [],
					imgPath1: [],
					imgPath2: [],
				},

loadImagePath() {
				_.each(this.model, (val, key) => {
					if (key.includes('imgPath')  && !_.isEmpty(val)) {
						this.image[key] = [{
							url: $ajax.getThumbnailUrl(val)
						}]
					}
				}),
				_.each(this.model, (val, key) => {
					if (key.includes('bookImgPath')  && !_.isEmpty(val)) {
						this.image.bookImgPathList.push({
							url: $ajax.getThumbnailUrl(val)});
					}
				})
			},
beforeUpload(bizType) {
				return function(index, lists) {
					if (bizType === '71'){
						_.each({
							"bizId": this.model.id,
							"bizType": bizType,
							"seqNo": index+1,
							"delete": true
						}, (val, key) => this.$set(this.uploadFormData, key, val));
						_.each(this.$ajax.getHeader(this.uploadFormData), (val, key) => this.$set(this.uploadHeader, key, val));
						return true;
					}
					_.each({
						"bizId": this.model.id,
						"bizType": bizType,
						"delete": true
					}, (val, key) => this.$set(this.uploadFormData, key, val));
					_.each(this.$ajax.getHeader(this.uploadFormData), (val, key) => this.$set(this.uploadHeader, key, val));
					return true;
				}
			},
onUploadSuccess(resp) {
				this.$refs.uToast.show({
					title: resp.message,
					position: 'top',
					type: resp.success ? 'success' : 'error'
				});
			},

onUploadError(resp, index, lists) {
				this.$refs.uToast.show({
					title: resp.message,
					position: 'top',
					type: 'error'
				});
			},

loadImagePath方法要写在onLoad生命周期中，页面一加载，图片就开始渲染。可能有些方法我没贴出来，那些事图片上传之前给请求设置请求头的方法，不是我写的，我也写不出来，也不是每个公司都需要这个，所以就没打算贴出来。
希望我下次来完善博客的时候，能贴出完整的代码把，这也代表我是有进步的。