vue中实现文件上传和下载功能

文件上传：

1. 在 template 中添加一个 input 标签，设置 type 为 file，用于选择要上传的文件。

<template>
  <div>
    <input type="file" @change="handleUpload">
  </div>
</template>

2. 在 methods 中添加 handleUpload 方法，获取选中的文件，使用 FormData 将其传递给后端。

methods: {
  handleUpload(event) {
    const file = event.target.files[0]
    const formData = new FormData()
    formData.append('file', file)
    axios.post('/upload', formData)
      .then(response => {
        console.log(response)
      })
      .catch(error => {
        console.log(error)
      })
  }
}

3. 后端接收到文件后进行处理，返回上传成功的信息。

文件下载：

1. 在 template 中添加一个 button 标签，用于触发下载操作。

<template>
  <div>
    <button @click="handleDownload">下载文件</button>
  </div>
</template>

2. 在 methods 中添加 handleDownload 方法，使用 axios 发送 GET 请求，将文件流返回给前端，使用 blob 对象将其下载到本地。

methods: {
  handleDownload() {
    axios({
      method: 'get',
      url: '/download',
      responseType: 'blob'
    })
      .then(response => {
        const blob = new Blob([response.data])
        const fileName = response.headers['content-disposition'].split('filename=')[1]
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = fileName
        link.click()
      })
      .catch(error => {
        console.log(error)
      })
  }
}

3. 后端接收到下载请求后返回文件流，使用 Content-Disposition 响应头指定文件名。

app.get('/download', (req, res) => {
  const filePath = path.join(__dirname, 'file.txt')
  const fileName = 'file.txt'
  res.setHeader('Content-Disposition', 'attachment; filename=' + fileName)
  const fileStream = fs.createReadStream(filePath)
  fileStream.pipe(res)
})