笔记：nodejs 原生js实现文件上传下载

文件上传、下载 client

<templete>

<input type="file" id="file" style="width:50%;height:50px;" placeholder="请选择上传文件" @change="uploadFile" />

<button style="width:40%;height:50px;" @click="loadFile" > 下载文件</button>

</templete>

<script>

methods:{

uploadFile(){  //上传文件

            var file = document.querySelector("#file").files[0]; //获取上传文件

            var formdata = new FormData();

            formdata.append("file",file);

            var xhr = new XMLHttpRequest();

            xhr.open("post","http://xxx/fileInfo/");

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4 && xhr.status==200){

                         console.log('上传结束')

                }

            }

            xhr.upload.onprogress = function (event) {

                if(event.lengthComputable){

                    console.log('------>'+event.loaded/event.total *100+'%')  //显示上传进度

                }

            }

            xhr.send(formdata);

        },

loadFile(){ //下载文件

            var xhr = new XMLHttpRequest();

            xhr.open("post","http://xxx/fileInfo/fileInfo/load");

            xhr.send({});

            xhr.onreadystatechange = function () { //获取下载结果

                console.log('onreadystatechange --------')

                if (xhr.readyState === 4 && xhr.status==200){

                    let response = xhr.response

                    response = JSON.parse(response)

                    console.log(response.file)

                    let file = response.file //文件数据

                    let filename = response.name //文件名称

                    let filetype = response.type //文件类型

                    console.log(`文件名：${filename} --- 文件类型：${filetype}  --- 下载中...`)

                    let loadBuffer = Buffer.from(file)

                    let blob = new Blob([loadBuffer], {type: filetype}) //表示一个不可变、原始数据的类文件对象,想仔细了解可以自行搜索

                    //生成临时元素自动下载

                    let a = document.createElement('a')

                    a.download = filename

                    a.href = URL.createObjectURL(blob)

                    document.body.appendChild(a)

                    a.click()

                    document.body.removeChild(a)

                }

            }

        },

}

</script>

文件上传下载  API

koa 使用插件koa-body进行转换，影响文件流获取

文件流根据各自的方式获取

import koaBody from 'koa-body'

app.use(koaBody({multipart:true}))

//上传接口

router.post('/', async (ctx) => {

  try{

  let files = ctx.request.body.files  //获取文件流

  let file = files.file //获取上传文件

  let filetype = file.type //获取上传文件类型

  let filename= file.name //获取上传文件名称

  let fileReader = fs.createReadStream(file.path) //fs读取文件流

  //读取数据内置的事件监听

  let str = ''

  fileReader.on('data',(chunk) => { //fs获取读取的文件流

     //chunk 是 Buffer 

    str += chunk.toString('binary') //将文件流转换为二进制数据

  })

  fileReader.on('end',() => { //文件流读取完成

    //将读取完成的文件数据保存数据库或者其他

   let body = {

   file: str,

type: filetype,

name: filename

}

  })

  ctx.body = {msg:'上传成功'}

}catch(err){

  console.log(err)

  ctx.body = err

}

})

//下载接口

router.post('/fileInfo/load', async (ctx) => {

//查询文件数据

let body = {

   file: file,

type: filetype,

name: filename

}

  let buffer = Buffer.from(body.file ,'binary')  //将文件数据转换为二进制

  ctx.body =  {

    file: buffer ,

    name: body.name,

    type: body.type

  }

})