Vue.js 中使用 axios 实现文件上传下载详解

随着 Web 应用程序的发展，文件上传和下载已经成为了一个必不可少的功能。在前端开发中，Vue.js 是一个非常流行的框架，而 axios 是一个常用的 HTTP 库，可以帮助我们实现文件上传和下载。本文将介绍如何在 Vue.js 中使用 axios 实现文件上传和下载。

文件上传

文件上传是指将本地文件上传到服务器。在 Vue.js 中，我们可以使用 axios 发送一个 POST 请求来实现文件上传。以下是一个简单的示例：

// javascriptcn.com 代码示例
<template>
  <div>
    <input type="file" ref="fileInput" @change="uploadFile">
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    uploadFile() {
      const file = this.$refs.fileInput.files[0]
      const formData = new FormData()
      formData.append('file', 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> 元素来让用户选择文件。当用户选择完文件后，我们可以通过 this.$refs.fileInput.files[0] 获取到选中的文件，然后创建一个 FormData 对象，并将文件添加到其中。最后，我们使用 axios 发送一个 POST 请求，将文件上传到服务器。

需要注意的是，在发送 POST 请求时，我们需要设置 Content-Type 为 multipart/form-data，以告诉服务器这是一个文件上传请求。

文件下载

文件下载是指将服务器上的文件下载到本地。在 Vue.js 中，我们同样可以使用 axios 发送一个 GET 请求来实现文件下载。以下是一个简单的示例：

// javascriptcn.com 代码示例
<template>
  <div>
    <button @click="downloadFile">Download</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    downloadFile() {
      axios.get('/api/download', {
        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.pdf')
        document.body.appendChild(link)
        link.click()
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

在这个示例中，我们使用了一个 <button> 元素来触发文件下载。当用户点击按钮后，我们使用 axios 发送一个 GET 请求，将服务器上的文件下载到本地。

需要注意的是，在发送 GET 请求时，我们需要设置 responseType 为 blob，以告诉 axios 返回的数据为二进制数据。接着，我们使用 window.URL.createObjectURL 创建一个 URL，然后创建一个 <a> 元素，并将 URL 和文件名设置为其属性。最后，我们将 <a> 元素添加到页面上，并触发其点击事件，即可将文件下载到本地。

总结

文件上传和下载是 Web 应用程序中常见的功能。在 Vue.js 中，我们可以使用 axios 来实现文件上传和下载。本文介绍了如何使用 axios 发送 POST 和 GET 请求来实现文件上传和下载，并提供了示例代码。希望本文能够帮助你实现文件上传和下载功能。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65696aadd2f5e1655d1f7c31