vue大文件上传下载

Vue.js 可以通过 axios 库来实现大文件上传和下载。

1. 大文件上传

在 Vue.js 中，我们可以使用 axios 和 FormData 对象来实现大文件上传：

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

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        file: null
      }
    },
    methods: {
      handleFileChange(event) {
        this.file = event.target.files[0]
      },
      uploadFile() {
        const formData = new FormData()
        formData.append('file', this.file)

        axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          console.log(response.data)
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>

在上面的代码中，我们首先定义了一个 `<input>` 元素，然后在 `handleFileChange` 方法中获取用户选择的文件，并将其保存在 `file` 数据属性中。在 `uploadFile` 方法中，我们将 `file` 对象添加到一个 FormData 对象中，并使用 axios 发送 POST 请求到服务器。

2. 大文件下载

在 Vue.js 中，我们可以使用 axios 和 FileSaver.js 库来实现大文件下载：

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

<script>
  import axios from 'axios'
  import { saveAs } from 'file-saver'

  export default {
    methods: {
      downloadFile() {
        axios.get('/api/download', {
          responseType: 'blob'
        }).then(response => {
          const blob = new Blob([response.data])
          saveAs(blob, 'file.txt')
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>

在上面的代码中，我们使用 axios 发送 GET 请求到服务器，指定 `responseType` 为 `blob`，表示服务器返回的是一个二进制文件。然后在响应成功的回调中，我们将返回的二进制文件保存为一个 Blob 对象，并使用 FileSaver.js 库将其保存为一个文件。