新建formData上传单以及多文件 layui组件记录

周大胖子 · 发表于 2019-10-29 15:41:13

先复制所有的代码

<title> 添加商标信息 </title>
<div class="layui-form" lay-filter="lm-sb-old">
<table class="layui-table">
<colgroup>
<col width="150">
<col>
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>项目</th>
<th>内容</th>
<th>项目</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>档案号</td>
<td><input type="text" name="cid" lay-verify="required" placeholder="请输入档案号" autocomplete="off"
class="layui-input"></td>
<td>公司名称</td>
<td> <input type="text" id="lm-companyId" name="companyName" lay-verify="required" placeholder="请输入公司名称"
autocomplete="off" class="layui-input">
<input type="hidden" name="companyId">
</td>
</tr>
<tr>
<td>商标名称</td>
<td><input type="text" name="name" lay-verify="required" placeholder="请输入商标名称" autocomplete="off"
class="layui-input"></td>
<td>商标注册号</td>
<td> <input type="text" name="registerNumber" autocomplete="off" class="layui-input"></td>
</tr>
<tr>
<td>申请日期</td>
<td> <input type="text" name="applyDate" id="applyDate" lay-verify="applyDate" placeholder="yyyy-MM-dd"
autocomplete="off" class="layui-input"></td>
<td>注册日期</td>
<td> <input type="text" name="registerDate" id="registerDate" lay-verify="registerDate"
placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></td>
</tr>
<tr>
<td>到期日期</td>
<td> <input type="text" name="expiredDate" id="expiredDate" placeholder="yyyy-MM-dd" autocomplete="off"
class="layui-input"></td>
<td>商标有效期</td>
<td><input type="text" name="periodOfValidity" placeholder="" autocomplete="off" class="layui-input">
</td>
</tr>
<tr>
<td>代理费用</td>
<td><input type="text" name="price" autocomplete="off" class="layui-input"></td>
<td>商标备注</td>
<td><input type="text" name="remark" autocomplete="off" class="layui-input"></td>
</tr>
<tr>
<td>商标类别</td>
<td>
<select name="tradmarkCategoryId" id="tradmarkCategoryId">
<option></option>
</select>
</td>
<td>商标价值</td>
<td>
<select name="tradmarkValueId" id="tradmarkValueId">
<option></option>
</select>
</td>
</tr>
<tr>
<td>添加人</td>
<td><input type="text" name="addName" placeholder="" autocomplete="off" class="layui-input"></td>
<td>更新人</td>
<td><input type="text" name="updateName" placeholder="" autocomplete="off" class="layui-input"></td>
</tr>
<tr>
<td>商标类型</td>
<td>
<select name="typeId" id="typeIds">
<option></option>
</select>
</td>
<td>业务类型</td>
<td>
<select name="serviceTypeId" id="serviceTypeIds">
<option></option>
</select>
</td>
</tr>
<tr>
<td>商标图样</td>
<td colspan="3">
<button type="button" class="layui-btn layui-btn-normal" id="choose-img">选择文件</button>
<input type="hidden" name="image" class="layui-input" id="image">
<span id="img-name-span"> </span>
</td>
</tr>
<tr>
<td>相关附件</td>
<td colspan="3">
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="lm-m-c">选择多文件</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>操作</th>
</tr>
</thead>
<tbody id="lm-tm-a-f-t"></tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="4" class="lm-text-center">
<input type="button" lay-submit lay-filter="lm-sb-old-submit" id="lm-sb-old-submit" value="确认"
class="layui-btn">
</td>
</tr>
</tbody>
</table>
<script>
layui.use(['index', 'table', 'laomo', 'form', 'laydate', 'upload', 'admin', 'layer'], function () {
var $ = layui.$,
table = layui.table,
form = layui.form,
admin = layui.admin,
element = layui.element,
layer = layui.layer,
laydate = layui.laydate,
upload = layui.upload,
view = layui.view,
laomo = layui.laomo,
index = parent.layer.getFrameIndex(window.name); //获取窗口索引
// 关于文件问题
// 10.25
// 1。商品自己传的与统一导入的 OSS的路径未能统一自己传的图标目前不显示
// 2. 多附件没有一个说法，说法就是先放着 -- 不处理也不展示，且上传的名称为 attachedFileList ，但是详细的接受的名称为 attachedList
var companyId_temp = '';//公司id中间量
form.render();//刷新select选择框渲染
laydate.render({
elem: '#applyDate'
});
laydate.render({
elem: '#registerDate'
});
laydate.render({
elem: "#expiredDate"
});
let lmImage ; // 上传的图标
let uplodatList ; // 上传的文件
//商标图样上传
upload.render({
elem: '#choose-img'
, url: layui.setter.linqiangurl + 'myFile/addAttachedFile'
, auto: false
, bindAction: '#t'
, choose: function (obj) {
obj.preview(function (index, file, result) {
$('#img-name-span').html(file.name);
lmImage = file;
});
}
});
// 相关附件
let uploadListIns = upload.render({
elem: '#lm-m-c'
, url: layui.setter.linqiangurl + 'myFile/addAttachedFile'
, accept: 'file'
, multiple: true
, auto: false
, bindAction: '#tr'
, choose: function (obj) {
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">'
, '<td>' + file.name + '</td>'
, '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
, '<td><button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete">删除</button></td>'
, '</tr>'].join(''));
//删除
tr.find('.test-upload-demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
uplodatList = files; // 丢过去
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
$('#lm-tm-a-f-t').append(tr);
uplodatList = files; // 丢过去
});
}
});
laomo.s("config/name/tradmark_type", "typeIds"); //商标类型
laomo.s("config/name/tradmark_state", "serviceTypeIds"); //商标状态
laomo.s("config/name/tradmark_value", "tradmarkValueId"); //商标价值
laomo.s("config/name/tradmark_category", "tradmarkCategoryId"); //商标类别
// 选择公司
$('#lm-companyId').on('click', function () {
admin.popup({
title: "选择公司",
area: ["1000px", "700px"],
btn: ['关闭']
, success: function (index, layero) {
view(this.id).render("lay/companyinfo");
},
end: function () {
var data_temp = '';
if (localStorage.getItem('trademark_company_add_return')) {
var data = localStorage.getItem('trademark_company_add_return');
data_temp = JSON.parse(data);
localStorage.removeItem('trademark_company_add_return');
}
if (data_temp) {
companyId_temp = data_temp.id;//公司id
form.val('lm-sb-old', {
'companyId': data_temp.id, //公司名称
'companyName': data_temp.appCnName
});
form.render();
}
}
});
});
//监听提交
form.on("submit(lm-sb-old-submit)", function (data) {
var field = data.field; //获取提交的字段
var subForm = new FormData();
// 循环放入key值
for (var i in field) {
subForm.append(i, field[i]);
}
if(lmImage){
subForm.append('imageFile',lmImage);
}
let attachFileList =[];
// 依据后台要求更改为数组
if(uplodatList){
// 先判断这个对象是不是空
let t3 = Object.keys(uplodatList);
if(t3.length > 0){
let t = 0;
for(var i in uplodatList)
{
subForm.append('attachFileList'+'['+t+']', uplodatList[i]);
t ++
}
}
}
console.log( subForm.get('attachFileList[0]') )
$.ajax({
url: layui.setter.linqiangurl + "trademark/add",
type: "post",
data: subForm,
headers: {
token:
layui.data(layui.setter.tableName)[
layui.setter.request.tokenName
] || ""
},
processData: false,
contentType: false,
dataType: "json",
success: function (e) {
if(e.code !== -1){
layer.closeAll(); //执行关闭
}else{
layer.msg(e.message,{icon:2});
}
}
});
return false
});
})
</script>
</div>

复制代码

这是当时做商标的，添加一个商标信息页面；
这个页面的要求是所有的图片、多附件都以formData的形式去提交；

遇到坑1： formData 的获取值的方式？
一开始我用console.log 发现打印出来的数据不对是个空对象，后来才想起来formData 的取值方式是这么写的

subForm.get('attachFileList[0]')

复制代码

遇到坑2：多文件添加进formData 必须用一个循环，不能直接赋值键值对；