一、需求：在用户信息中增加一个附件配置的功能，发送邮件给客户时一起发送附件。本文主要记录次案例的前端模块。
效果：点击上传文件，选择文件后，ui-li列表动态产生数据（v-for）。点击删除可删除对应列表。
二、思路：
模态框出现的时候发请求查询数据库中的字段并渲染到页面上，点击上传文件出现选择页面，监听input的change事件，触发后调用文件上传接口上传文件到后端，同时前端ui li 绑定的fileList数组新增元素，点击保存按钮调接口存储数据到数据库中。实际上数据库中存储的字段是文件名（xxx.zip,xxx.pdf）,点击删除后只是删除前端中data中对应的数组元素，点击保存后才真正生效。
三、实现：
1、先引入vue和elementUI,提升下开发速度，这个看个人需求。
<link href="../../static/css/element.css" rel="stylesheet"/>
<script src="../../static/js/vue.min.js"></script>
<script src="../../static/js/element.js"></script>js部分：由于django框架的原因，{{}}的模板语法会和django自带的产生冲突，故改成[[]]。
var vm = new Vue({
delimiters: ['[[', ']]'],
el: '#app',
data() {
return {
}
},
methods: {
}
})2、html代码：
<div style="height: 35px;display: flex;justify-content: center;" class="form-group">
<label class="col-sm-3 control-label">客户编号：</label>
<div class="col-sm-7">
<input type="text" class="form-control" v-model="customer.customerSysId" disabled>
</div>
</div>
<div style="height: 35px;display: flex;justify-content: center;" class="form-group">
<label class="col-sm-3 control-label">客户公司：</label>
<div class="col-sm-7">
<input type="text" class="form-control" v-model="customer.customerCompany" disabled>
</div>
</div>
<div style="padding: 0 15px;" class="">
<input style="left:-9999px;position:absolute;" id="file" class="" ref="fileRef"
type="file" placeholder="" @change='change'
multiple=true name='file'>
<ul style="padding-left: 65px" v-for="(item, index) in customer.fileList" :key="index">
<li style="width: 428px">
<div style="display: flex;justify-content:space-between;">
<span>[[item.name]]</span>
<el-button size="mini" type="danger" @click="deleteFile(index)">删除
</el-button>
</div>
</li>
</ul>
</div>3、js代码
data部分：
data() {
return {
mainText: '',
customer: {
files: [],
fileList: [],
customerSysId: '',
customerCompany: '',
}
}
},methods部分：
deleteFile(e) {
this.customer.fileList.splice(e, 1)
},
change() {
if (this.$refs.fileRef.files.length == 0) {
} else {
for (let i = 0; i < this.$refs.fileRef.files.length; i++) {
console.log(this.$refs.fileRef.files[i])
this.customer.fileList.push(this.$refs.fileRef.files[i])
}
let fd = new FormData()
for (let i = 0; i < this.customer.fileList.length; i++) {
fd.append('file', this.customer.fileList[i])
}
$.ajax({
cache: false,
type: "POST",
url: "/withExpProgram/upload/",
//traditional: true, //加上此项可以传数组
// dataType: 'json',
contentType: false,
processData: false,
async: true,
data: fd,
success: (res) => {
},
error: (err) => {
}
})
}
console.log('this.$refs.fileRef.files', this.$refs.fileRef.files.length);
console.log('this.customer.fileList', this.customer.fileList)
},
customer_files() {
let filesName = []
for (let i = 0; i < this.customer.fileList.length; i++) {
filesName.push(this.customer.fileList[i].name)
}
let data = {
customerSysId: this.customer.customerSysId,
filesName: filesName
}
$.ajax({
cache: false,
type: "POST",
url: "/withExpProgram/customer_files/",
traditional: true, //加上此项可以传数组
dataType: 'json',
async: true,
data: data,
success: (res) => {
this.$message({
message: '保存成功！',
type: 'success'
});
console.log(res);
},
error: (err) => {
console.log(err);
}
})
}vue实例之外的部分：这个方法不写到methods里面的原因是使用了bootstrap-table插件，有些不兼容的地方，索性就写到外面。反正也不影响。
//点击修改弹出模态框并调接口查询用户附件配置
function files_setting(customerSysId, customerCompany) {
$("#customerFiles").modal("show");
vm.customer.customerSysId = customerSysId
vm.customer.customerCompany = customerCompany
$.ajax({
cache: false,
type: "POST",
url: "/withExpProgram/query_customer_files/",
//traditional: true, //加上此项可以传数组
dataType: 'json',
data: {customerSysId},
success: (res) => {
if (res.errno == 0) {
for (let i = 0; i < res.data.files.length; i++) {
vm.customer.fileList.push({'name': res.data.files[i]})
}
}
console.log('fileList:', vm.customer.fileList);
console.log(res);
},
error: (err) => {
console.log(err);
}
});
}
{#监听模态框关闭，关闭后清除数组#}
$('#customerFiles').on('hidden.bs.modal', function () {
vm.customer.fileList = []
})