简单文件上传下载

WWWWWDDDDD

文件下载

 1.form

let tempform= document.createElement("form")
//encodeURI(encodeURI(""))  // 转码用
tempform.setAttribute("action",`url`)
tempform.setAttribute("method","post")

const requestData = document.createElement('input')
requestData.type = 'hidden'
requestData.value = JSON.stringify({ id:'',name:''...... })

tempform.appendChild(requestData)
document.body.appendChild(tempform)
tempform.submit();

document.body.removeChild(tempform)

2.blob   存在浏览器兼容性问题ie等

api(requireBody,params)
api( Obj, { responseType: 'arraybuffer' }).then(res => {
   const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
   const objectUrl = URL.createObjectURL(blob)
   window.location.href = objectUrl
})

3.blob流   js-file-download  插件    兼容Chrome  IE10+

import fileDownload from 'js-file-download'

api({ dataList: data }, { responseType: 'arraybuffer' })
.then(res => {
  fileDownload(res, '重命名')
})

文件上传

1.FormData

// input文件上传 (vue)
<template>
    <input type="file" calss="importFile" value="" accept=".xlsx,.xls" @change="change"/>
</template>
<script>
    export default {
        methods:{
            change(){

                const files= document.querySelector('.importFile').files
                if(!files.length){
                    return
                }
                    
                const reg = /\.(xlsx|xls)$/
                const filesName = files[0].name
                if(!reg.test(filesName)){
                    return
                }
                
                const formData = new FormData()
                formData.append("file",files[0])
                
                // api(src,formData)
                ...

            }
        }
    }
</script>

                                                                                                                                    --笔记--