Vue el-upload问题总结
一言不合上代码:vue文件
class=
"app-container">
ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
"承兑人" prop="acceptorId">
"queryParams.acceptor" placeholder="请输入承兑人" clearable size="small" @keyup.enter.native="handleQuery" />
"primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
"el-icon-refresh" size="mini" @click="resetQuery">重置
"10" class="mb8">
"1.5">
"['management:paymentRecord:add']" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增
"loading" :data="peymentRecordList" @selection-change="handleSelectionChange">
"承兑人" align="center" prop="acceptor" />
"承兑票据总金额" align="center" prop="acceptedAmount" />
"承兑票据总笔数" align="center" prop="acceptedNumber" />
"已结清票据总金额" align="center" prop="settleAmount" />
"已结清票据总笔数" align="center" prop="settleNumber" />
"未结清票据总金额" align="center" prop="notSettleAmount" />
"未结清票据总笔数" align="center" prop="notSettleNumber" />
"拒付票据总金额" align="center" prop="rejectAmount" />
"拒付票据总笔数" align="center" prop="rejectNumber" />
"去年以来拒付票据总金额" align="center" prop="lastYearRejectAmount" />
"去年以来拒付票据总笔数" align="center" prop="lastYearRejectNumber" />
"今年以来拒付票据总金额" align="center" prop="currYearRejectAmount" />
"今年以来拒付票据总笔数" align="center" prop="currYearRejectNumber" />
"查询时间" align="center" prop="paymentTime" width="100">
"scope">
{{ parseTime(scope.row.paymentTime, '{y}-{m}-{d}') }}
"笔数参考拒付率" align="center" prop="rejectPayPercent">
"scope">
{{ parsePercent(scope.row.rejectNumberPercent) }}
"金额参考拒付率" align="center" prop="rejectPayPercent">
"scope">
{{ parsePercent(scope.row.rejectPayPercent) }}
"操作" align="center" class-name="small-padding fixed-width">
"scope">
"['management:paymentRecord:query']" size="mini" type="text" icon="el-icon-edit" @click="initImgFile(scope.row)">生成图片
"['management:paymentRecord:edit']" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
"['management:paymentRecord:remove']" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
"total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
"title" :visible.sync="open" width="900px">
ref="form" :model="form" label-width="180px" :rules="rules">
"承兑人" prop="acceptor">
"form.acceptor" placeholder="请输入承兑人" :disabled="doUpdate" />
for="(domain, index) in dynamicValidateForm.domains" ref="dynamicValidateForm" :key="domain.key" label-width="180px" :model="dynamicValidateForm">
"12">
"查询时间" :prop="'domains.' + index + '.paymentTime'" :rules="moreRule.paymentTime">
"domain.paymentTime" clearable size="small" style="width: 200px" type="date" value-format="yyyy-MM-dd" placeholder="选择兑付时间">
if="showDelete" :span="12">
"removeDomain(domain)">删除
"12">
"承兑票据总金额" :prop="'domains.' + index + '.acceptedAmount'" :rules="moreRule.acceptedAmount">
"domain.acceptedAmount" placeholder="请输入承兑票据总金额" @input="calAmount(domain)" />
"12">
"承兑票据总笔数" :prop="'domains.' + index + '.acceptedNumber'" :rules="moreRule.acceptedNumber">
"domain.acceptedNumber" placeholder="请输入承兑票据总笔数" @input="calAmount(domain)" />
"12">
"已结清票据总金额" :prop="'domains.' + index + '.settleAmount'" :rules="moreRule.settleAmount">
"domain.settleAmount" placeholder="请输入已结清票据总金额" />
"12">
"已结清票据总笔数" :prop="'domains.' + index + '.settleNumber'" :rules="moreRule.settleNumber">
"domain.settleNumber" placeholder="请输入已结清票据总笔数" />
"12">
"未结清票据总金额" :prop="'domains.' + index + '.notSettleAmount'" :rules="moreRule.notSettleAmount">
"domain.notSettleAmount" placeholder="请输入未结清票据总金额" />
"12">
"未结清票据总笔数" :prop="'domains.' + index + '.notSettleNumber'" :rules="moreRule.notSettleNumber">
"domain.notSettleNumber" placeholder="请输入未结清票据总笔数" />
"12">
"拒付票据总金额" :prop="'domains.' + index + '.rejectAmount'" :rules="moreRule.rejectAmount">
"domain.rejectAmount" placeholder="请输入拒付票据总金额" @input="calAmount(domain)" />
"12">
"拒付票据总笔数" :prop="'domains.' + index + '.rejectNumber'" :rules="moreRule.rejectNumber">
"domain.rejectNumber" placeholder="请输入拒付票据总笔数" @input="calAmount(domain)" />
"12">
"去年以来拒付票据总金额" :prop="'domains.' + index + '.lastYearRejectAmount'" :rules="moreRule.lastYearRejectAmount">
"domain.lastYearRejectAmount" placeholder="请输入去年以来拒付票据总金额" />
"12">
"去年以来拒付票据总笔数" :prop="'domains.' + index + '.lastYearRejectNumber'" :rules="moreRule.lastYearRejectNumber">
"domain.lastYearRejectNumber" placeholder="请输入去年以来拒付票据总笔数" />
"12">
"今年以来拒付票据总金额" :prop="'domains.' + index + '.currYearRejectAmount'" :rules="moreRule.currYearRejectAmount">
"domain.currYearRejectAmount" placeholder="请输入今年以来拒付票据总金额" />
"12">
"今年以来拒付票据总笔数" :prop="'domains.' + index + '.currYearRejectNumber'" :rules="moreRule.currYearRejectNumber">
"domain.currYearRejectNumber" placeholder="请输入今年以来拒付票据总笔数" />
"12">
"拒绝金额参考率" :prop="'domains.' + index + '.amountPercent'" :rules="moreRule.amountPercent">
"domain.amountPercent" placeholder="请输入今年以来拒付票据总金额" />
"12">
"拒绝数量参考率" :prop="'domains.' + index + '.numberPercent'" :rules="moreRule.numberPercent">
"domain.numberPercent" placeholder="请输入今年以来拒付票据总笔数" />
"查询留证" :prop="'domains.' + index + '.paymentRecordImgs'">
"uploadImg" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
class="el-icon-plus">
"footer" class="dialog-footer">
"primary" @click="submitForm">确 定
"cancel">取 消
class="el-icon-plus" style="font-size:20px;margin-left:80px;margin-top:20px;" @click="addDomain">
"padding-left:20px;">
新增表单
"title" :visible.sync="openImg" width="950px">
ref="review" :model="review" label-width="100px" size="mini">
"24">
"width: 850px; height: 450px;" fit="contain" :src="review.url">
"title" :visible.sync="openUpdate" width="900px">
ref="updateForm" :model="form" :rules="updateRules" label-width="180px">
"查询时间" prop="paymentTime">
"form.paymentTime" clearable size="small" style="width: 200px" type="date" value-format="yyyy-MM-dd" placeholder="选择兑付时间">
"承兑人" prop="acceptor">
"form.acceptor" placeholder="请输入承兑人" :disabled="doUpdate" />
"12">
"承兑票据总金额" prop="acceptedAmount">
"form.acceptedAmount" placeholder="请输入承兑票据总金额" @change="changePercent(form)" />
"12">
"承兑票据总笔数" prop="acceptedNumber">
"form.acceptedNumber" placeholder="请输入承兑票据总笔数" @change="changePercent(form)" />
"12">
"已结清票据总金额" prop="settleAmount">
"form.settleAmount" placeholder="请输入已结清票据总金额" />
"12">
"已结清票据总笔数" prop="settleNumber">
"form.settleNumber" placeholder="请输入已结清票据总笔数" />
"12">
"未结清票据总金额" prop="notSettleAmount">
"form.notSettleAmount" placeholder="请输入未结清票据总金额" />
"12">
"未结清票据总笔数" prop="notSettleNumber">
"form.notSettleNumber" placeholder="请输入未结清票据总笔数" />
"12">
"拒付票据总金额" prop="rejectAmount">
"form.rejectAmount" placeholder="请输入拒付票据总金额" @change="changePercent(form)" />
"12">
"拒付票据总笔数" prop="rejectNumber">
"form.rejectNumber" placeholder="请输入拒付票据总笔数" @change="changePercent(form)" />
"12">
"去年以来拒付票据总金额" prop="lastYearRejectAmount">
"form.lastYearRejectAmount" placeholder="请输入去年以来拒付票据总金额" />
"12">
"去年以来拒付票据总笔数" prop="lastYearRejectNumber">
"form.lastYearRejectNumber" placeholder="请输入去年以来拒付票据总笔数" />
"12">
"今年以来拒付票据总金额" prop="currYearRejectAmount">
"form.currYearRejectAmount" placeholder="请输入今年以来拒付票据总金额" />
"12">
"今年以来拒付票据总笔数" prop="currYearRejectNumber">
"form.currYearRejectNumber" placeholder="请输入今年以来拒付票据总笔数" />
"12">
"拒绝金额参考率" prop="rejectPayPercent">
"form.rejectPayPercent" placeholder="请输入今年以来拒付票据总金额" />
"12">
"拒绝数量参考率" prop="rejectNumberPercent">
"form.rejectNumberPercent" placeholder="请输入今年以来拒付票据总笔数" />
"查询留证" prop="paymentRecordImgs">
upload
action="/management/cmsCategory/upload"
:file-list="form.paymentRecordImgs"
:on-remove="handleRemove"
:style="{ width: '' }"
:limit="3"
:on-exceed="contentImghandleExceed"
:on-preview="handlePictureCardPreview"
:disabled="false"
:http-request="uploadImg"
name="image"
accept="image/*"
list-type="picture-card"
>
class="el-icon-plus">
"tip" class="el-upload__tip">最多上传3张图片
"footer" class="dialog-footer">
"primary" @click="submitForm">确 定
"cancel">取 消
"dialogVisible">
"100%" :src="dialogImageUrl" alt="" />
//错误总结:
1. el-upload组件:
action:属性舍弃,因为action这种方式没有header设置的地方,所以用自定义的 http-request属性来定义自己请求出发。
file-list属性展示的是多图片上传里面的多图片,是个数组;
上传的时候,:limit用来设置上传的上限。
on-exceed在上传的图片数量超过上限的时候出发此属性绑定的方法;
还有一个比较易错的地方:
1.有的时候没有写导致,在方法的结束打印
this.form.paymentRecordImgs的值 没有在console展示。
导致回显的时候明明返回有多张图片,但是也页面不展示。
2.图片的 file-list绑定的值应该是数组,这样支持多图片。
3.关于前后端针对bigDecimal取值的结果不一致。这个问题一致都待发现
另外file-List这个属性绑定的值:
var imgUrls=[
{
id:11,
url: '**.jpg'
},
{
id:2,
url: "**.png"
}
];
积累的过程是枯燥的,但是好的习惯是靠保持的。。。
————————————————
版权声明:本文为CSDN博主「海到无边天作岸山登绝顶我为峰」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wangleisuiqiansuiyue/article/details/108893005