html文件上传前端模板，开箱即用

一、需求：在用户信息中增加一个附件配置的功能，发送邮件给客户时一起发送附件。本文主要记录次案例的前端模块。

效果：点击上传文件，选择文件后，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 = []
        })