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

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

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

表单绑定复选框的值和图片上传相关推荐

html表单的复选框的值,关于表单：HTML复选框的checked属性的正确值是什么？
我们都知道如何在HTML中形成一个复选框输入: 我不知道 - 复选复选框的技术正确值是什么? 我看到这些都有效: 答案是无关紧要的吗? 我没有看到证据证明答案在规范中标记为正确: Checkboxes ...
html 勾选框整体勾选,html勾选框_html5实现表单的复选框验证
摘要腾兴网为您分享:html5实现表单的复选框验证,中日翻译,携程,悟空识字,天气预报等软件知识,以及寻仙答题器,山东省民生警务平台,买车168,关键词优化精灵,文件拷贝工具,自动壁纸,语音播报软件 ...
struts2 标签单选框_Struts 2 UI标签–表单，复选框，单选，选择，提交
struts2 标签单选框 Struts2 UI tags are used to generate HTML form elements in result pages. Earlier we lo ...
Django获取多个复选框的值，并插入对应表底下
1.实现的功能类似于,多个复选框,后面还有一个备注,之后要把复选框的值和备注一一对应插入数据库表中,主要提供一个思路,代码不全. 2.首先,html页面先设计好,多个复选框还有一个个备注,代码如下: ...
支付宝小程序获取复选框选中值id，使其显示且可编辑
问题概述在做支付宝小程序编辑表单时,需要将用户之前填.选的信息显示出来后再编辑.这里针对复选框选中值的获取显示,通过服务端发送请求后拿到的选中id,显示选中值并且可编辑. axml代码片段 < ...
什么标签用于在表单中构建复选框_目前艾滋病主要的传播方式是（）。
[单选题]在 HTML5 中,哪个元素用于组合标题元素? [简答题] [简答题]1.html [单选题]以下( )标签用于在表单中构建复选框 [多选题]下列关于跳线的选用原则,正确的是( ) [判断题 ...
layui复选框怎么取值_layui如何获取checkbox复选框的值
layui如何获取checkbox复选框的值发布时间:2020-10-21 17:07:09 来源:亿速云阅读:164 作者:Leah 本篇文章给大家分享的是有关layui如何获取checkbox ...
jQuery 循环获取checkbox复选框的值，checkbox全选、全不选、反选
前端页面html <tr v-for="(log,index) in logList"><td>& ...
什么标签用于在表单中构建复选框_以下 ( ) 标签用于在表单中构建复选框。_学小易找答案...
[单选题]不属于有齿轮曳引机的部件 ( ) [简答题]使用素材 1101.rar ,设计一个如下图所示的页面,要求在中小型屏幕下将12幅图片分两行显示 [名词解释]什么是组件? [单选题]某个物种同时 ...

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

表单绑定复选框的值和图片上传相关推荐

最新文章

热门文章