Vue实现文件上传和下载功能

实现文件上传和下载功能是Web应用开发中经常需要涉及的功能之一，Vue作为一款流行的前端框架也能够提供方便灵活的实现方式。下面是详细的攻略过程。

实现文件上传

1. 创建上传组件

首先，我们需要创建一个上传组件。这个组件需要包含一个可以选择文件的按钮和实际上传文件的功能。我们可以使用axios库来发送HTTP请求，从而上传文件。

<template>
  <div>
    <input type="file" @change="handleUpload">
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleUpload(event) {
      this.file = event.target.files[0]
    },
    uploadFile() {
      const formData = new FormData()
      formData.append('file', this.file)
      axios.post('/api/upload', formData).then(response => {
        console.log(response.data)
        // 文件上传成功的处理逻辑
      }).catch(error => {
        console.error(error)
        // 文件上传失败的处理逻辑
      })
    }
  }
}
</script>

2. 处理上传请求

在服务器端，我们需要编写一个处理上传请求的接口。这个接口主要负责接收POST请求，并将上传的文件保存到服务器本地的文件系统中。

const express = require('express')
const app = express()
const multer = require('multer')

const upload = multer({ dest: 'uploads/' })

app.post('/api/upload', upload.single('file'), function (req, res) {
  // 文件上传成功的处理逻辑
  res.send('File uploaded successfully!')
})

app.listen(3000, function () {
  console.log('Server running on http://localhost:3000')
})

关于文件上传的详细信息，可以参考multer库的官方文档。

实现文件下载

1. 创建下载组件

下载组件需要包含一个可以选择要下载的文件的按钮和实际将文件从服务端下载的功能。我们可以使用axios库来发送HTTP请求，从而下载文件。

<template>
  <div>
    <button @click="downloadFile">下载</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    downloadFile() {
      axios({
        url: '/api/download',
        method: 'GET',
        responseType: 'blob'
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'file.txt')
        document.body.appendChild(link)
        link.click()
      }).catch(error => {
        console.error(error)
        // 文件下载失败的处理逻辑
      })
    }
  }
}
</script>

2. 处理下载请求

在服务器端，我们需要编写一个处理下载请求的接口。这个接口主要负责接收GET请求，并将要下载的文件从服务器本地的文件系统中读取，然后将文件以流的形式返回给客户端。

const fs = require('fs')
const express = require('express')
const app = express()

app.get('/api/download', function (req, res) {
  const file = `${__dirname}/uploads/file.txt`
  const fileInfo = fs.statSync(file)

  res.writeHead(200, {
    'Content-Type': 'application/octet-stream',
    'Content-Disposition': `attachment; filename=file.txt`,
    'Content-Length': fileInfo.size
  })

  const readStream = fs.createReadStream(file)

  readStream.pipe(res)
})

app.listen(3000, function () {
  console.log('Server running on http://localhost:3000')
})

关于文件下载的详细信息，可以参考Node.js官方文档。