input上传文件的实际应用-526互联

'Content-Type': 'multipart/form-data'类型

使用场景：在vue2.0中，有统一的请求封装文件，下面文件为请求封装的使用，因项目不同可以忽略（vue-element-admin架构）

html部分

<div class='public_normal_btn' @click='$refs.file_item.click()'>导入</div>
<input style="display: none;" type="file" ref='file_item' multiple @input="file_change">

api.js接口声明文件

 1 /**
 2  * 导入
 3  * @param {Object} data
 4  */
 5 export function upload(data) {
 6   return request({
 7     url: '/zbfp/api/v1/iden/echeck/check_upload',
 8     method: 'post',
 9     data,
10     headers: {
11         'Content-Type': 'multipart/form-data'
12     },
13   })
14 }

upload为上面的接口调用，文件数据传输需要以下几个步骤

1.声明 FormData 对象

2.将文件 append 到对象内部

3.将 formdata 对象当成参数传给参数

4.清除input的文件信息

5.刷新数据，查看更改后的数据

file_change() { //上传服务文件的逻辑
    let files = this.$refs.file_item.files;
    let length = files.length;
    let index = 0;
    files.forEach(file => {　　//自定义的检测类型逻辑
        if(file.name && file.name.split('.')[1] != 'xlsx'){
            this.$message({
                type:'error',
                message:'文件格式错误，请重新选择.xlsx的文件'
            })
            return;
        }
    })
    files.forEach(file => {
        // formdata形式上传时,必须使用FormData对象才可以
        let formdata = new FormData();
        formdata.append('file',file);
        upload(formdata).then(res => {
            index++;
            if(index == length) {
                this.$alert(length + '个服务包已上传，详情请查看服务日志', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$refs.file_item.value = ''
                        this.page_render();
                    }
                });
                index = 0;
            }
        })
    })
},