vue实现文件上传和下载

下面就是 Vue 实现文件上传和下载的完整攻略。

文件上传

实现方式

文件上传可以采用传统的表单上传方式，也可以使用 Ajax 实现无刷新上传。这里我们以使用表单的方式为例进行讲解。

Vue.js 并没有提供直接上传文件的方法，需要借助第三方插件来实现。目前比较常用的插件有 vue-file-upload、vue-simple-upload、vue-upload-component 等，这里我们以 vue-upload-component 插件为例进行讲解。

安装依赖

首先在项目中安装 vue-upload-component 依赖：

npm install vue-upload-component --save

配置上传组件

在需要使用上传功能的组件中，引入 vue-upload-component：

import VueUploadComponent from 'vue-upload-component'

export default {
  components: {
    VueUploadComponent
  },
  // ...
}

接着在模板中配置上传组件：

<template>
  <div>
    <vue-upload-component
      :post-action="postUrl"
      @complete="onComplete"
      @input="onInput"
      :name="fileFieldName"
    ></vue-upload-component>
  </div>
</template>

post-action 属性指定上传的接口地址，complete 事件在上传完成时触发，可以在回调函数中对上传结果进行处理。input 事件在选择文件时触发，可以在回调函数中对文件进行一些特殊处理。name 属性指定文件上传字段名，和后端接口定义的字段名一致。

处理上传请求

根据 post-action 属性指定的上传接口地址，后端需要对上传请求进行处理，接收上传的文件。不同的后端框架处理方式不同，在此不再赘述。

文件下载

实现方式

文件下载可通过两种方式实现：前端直接访问文件路径进行下载，或是通过 Ajax 调用后台接口进行下载。这里我们以第二种方式为例进行说明。

安装依赖

文件下载需要用到文件流的方式进行，需要借助 stream 模块。可以通过 Node.js 的原生 http 模块自己实现文件下载接口，也可以使用 koa、express 等框架来实现。这里我们以 koa 为例进行讲解。

首先需要安装 koa 和 koa-router 依赖：

npm install koa koa-router --save

实现文件下载接口

在服务端代码中，我们需要定义一个文件下载接口，在该接口中处理文件下载请求。以下是一个简单的示例：

const Koa = require('koa')
const Router = require('koa-router')
const fs = require('fs')
const path = require('path')

const app = new Koa()

const router = new Router()

router.get('/download', async (ctx) => {
  const filePath = path.join(__dirname, 'file.txt')
  if (fs.existsSync(filePath)) {
    const fileStream = fs.createReadStream(filePath)
    ctx.response.type = 'audio/mp3'
    ctx.body = fileStream
  } else {
    ctx.body = 'File not found'
  }
})

app.use(router.routes())

app.listen(3000, () => console.log('Server running on port 3000'))

该代码实现了一个文件下载接口，接口地址为 http://localhost:3000/download，下载的文件地址为 ./file.txt，在返回响应时设置了响应头的 Content-Type 为 audio/mp3。

调用下载接口

在 Vue.js 中，我们可以通过 AJAX 调用文件下载接口来实现文件的下载。以下是一个简单的示例：

export default {
  methods: {
    downloadFile() {
      window.location.href = 'http://localhost:3000/download'
    }
  }
}

该代码通过访问文件下载接口来实现文件的下载。可以根据实际需求设置下载文件名、下载目录等参数。

以上就是 Vue 实现文件上传和下载的完整攻略，希望能对您有所帮助。