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

• 以下代碼實現(xiàn)文件的上傳下載功能
• 為了方便演示 DOM操作通過VUE實現(xiàn) 例子中保存為EXCEL文件

原始地址

詳細內(nèi)容 地址
作者 MaBond

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文件的值只能寫一次 第二次選擇文件后不能觸發(fā) onchange事件 通過 v-if 從下生成 input 節(jié)點
• 隱藏 input 通過 a標簽 觸發(fā)input的點擊事件 => 美化按鈕

JS部分

data(){
    fileState:true, // v-if="fileState"  重復生成 input 節(jié)點
},
methods:{
    fileClick(){
        let DOM = this.$els.input
        DOM.click() // checkFile
    },
    checkFile(){
        let DOM  = this.$els.input,
            file = DOM.files[0]              
            
            this.sendFile(file)    // 發(fā)送文件
            
            //重新生成 input 節(jié)點
            this.fileState = false
            window.setTimeout(()=>{
                this.fileState = true
            },200)
            
           
    },
    sendFile(file,id){  // 通過 XMLHttpRequest 發(fā)送  注意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", "www.sendFile.com", 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 fetch("www.getFile.com", {
            method: "POST",
            credentials: "include",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            body: params
        }).catch((error) => {
            console.error(error)
        })
        return await response.blob().catch((error) => {
            console.error(error)
        })
    },
}

參考

Fetch
Blob