前端 操作文件流实现上传下载

工作中遇到的需求 和大家分享下

• 以下代码实现文件的上传下载功能
• 为了方便演示 DOM操作通过VUE实现 例子中保存为EXCEL文件

原始地址

HTML部分

<input 
    type="file" 
    style="display: none;"
    v-if="fileState"
    v-el:input  
    @change="checkFile"
>

<a href="javascript:;" class="btn"  @click="fileClick">点击选择</a>
<a href="javascript:;" class="btn"  @click="downLoad">点击下载</a>

• 注意 file文件的值只能写一次 第二次选择文件后不能触发 onchange事件 通过 v-if 从下生成 input 节点
• 隐藏 input 通过 a标签 触发input的点击事件 => 美化按钮

JS部分

data(){
    fileState:true, // v-if="fileState"  重复生成 input 节点
},
methods:{
    fileClick(){
        let DOM = this.$els.input
        DOM.click() // checkFile
    },
    checkFile(){
        let DOM  = this.$els.input,
            file = DOM.files[0]              
            
            this.sendFile(file)    // 发送文件
            
            //重新生成 input 节点
            this.fileState = false
            window.setTimeout(()=>{
                this.fileState = true
            },200)
            
           
    },
    sendFile(file,id){  // 通过 XMLHttpRequest 发送  注意FormData
        let xhr = new XMLHttpRequest()
        let data = new FormData()  
        
        data.append("excel", file)
        data.append("fileID", id)
        
        xhr.onload = function () {
            if (xhr.status === 200 && xhr.status < 300 || xhr.status === 304) {
                try {
                    const data = JSON.parse(xhr.responseText)
                    callback(data)
                } catch(error) {
                    console.log(`errMsg:${error}`)
                }
            }
        }
        xhr.open("post",  true)
        xhr.send(data)
    },
    downLoad(){
        let fileDate = this.getFile(`fileID=1`),
            blob     = new Blob([fileDate],{'type':'application/msexcel'}),  // [文件]{类型}
            a        = this.$els.download
        
        a.download = 'excel.xls'  // 下载的文件名
        a.href     = window.URL.createObjectURL(blob)
    },
    async getFile(params){  // 通过 fetch 接收  注意.blob()
        let response = await  {
            method: "POST",
            credentials: "include",
            headers: {
              "Content-Type": 
            },
            body: params
        }).catch((error) => {
            console.error(error)
        })
        return await response.blob().catch((error) => {
            console.error(error)
        })
    },
}

参考