vue实现文件上传读取及下载功能

下面是“vue实现文件上传读取及下载功能”的完整攻略：

1. 文件上传功能实现

1.1. 简介

文件上传功能是指用户可以将文件选择或者拖拽到页面中的一个指定区域内，然后通过ajax上传给服务器。在vue中，可以使用 vue-upload-component 来实现文件上传。

1.2. 示例代码

安装vue-upload-component：

npm install vue-upload-component --save

在vue组件中使用：

<template>
  <div>
    <file-upload
      ref="fileUpload"
      @input-file="uploadFile"
      @start="startUpload"
      @abort="abortUpload"
      @progress="uploadProgress"
      @end="endUpload"
      accept=".jpg, .jpeg, .png"
    ></file-upload>
    <button @click="upload">上传</button>
  </div>
</template>

<script>
  import FileUpload from 'vue-upload-component';

  export default {
    components: {
      FileUpload,
    },
    methods: {
      upload() {
        this.$refs.fileUpload.getPendingFiles().forEach((file) => {
          file.upload();
        });
      },

      uploadFile(file) {
        console.log(`文件名：${file.name}，大小：${file.size}字节`);
      },

      startUpload() {
        console.log('开始上传');
      },

      abortUpload() {
        console.log('上传已取消');
      },

      uploadProgress(progress) {
        console.log(`上传进度：${Math.floor(progress * 100)}%`);
      },

      endUpload() {
        console.log('上传结束');
      },
    },
  };
</script>

1.3. 代码分析

上面的示例代码中，我们使用了vue-upload-component，向组件传入了一些事件监听器，即：

• @input-file：在选中文件后执行；
• @start：在开始上传之前执行；
• @abort：在手动取消上传时执行；
• @progress：上传进度更新时执行；
• @end：上传完成时执行。

组件提供的方法有：

• getPendingFiles()：获取尚未上传的文件列表。
• upload()：上传文件。

1.4. 注意事项

在上传图片的时候，我们需要对图片的格式和大小进行限制。在vue-upload-component中，可以通过accept参数进行格式限制，通过before-upload参数进行大小限制。

例如，要求上传的图片必须是jpg、jpeg或png格式，且不能超过5MB：

<file-upload
  ...
  accept=".jpg, .jpeg, .png"
  :before-upload="beforeUpload"
></file-upload>

...

methods: {
  beforeUpload(file) {
    if (file.size > 5 * 1024 * 1024) {
      alert('图片大小不能超过5MB');
      return false;
    }

    if (!/\/(?:jpg|jpeg|png)/i.test(file.type)) {
      alert('只能上传jpg、jpeg或png格式的图片');
      return false;
    }

    return true;
  },
}

2. 文件下载功能实现

2.1. 简介

文件下载功能是指用户可以通过点击页面上的某个元素（如按钮），从服务器下载文件。在vue中，可以使用 FileSaver.js 来实现文件下载。

2.2. 示例代码

安装FileSaver.js：

npm install file-saver --save

在vue组件中使用：

<template>
  <div>
    <button @click="downloadFile('example.jpg')">下载文件</button>
  </div>
</template>

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

  export default {
    methods: {
      downloadFile(filename) {
        const url = 'http://example.com/files/' + filename;

        fetch(url)
          .then(res => res.blob())
          .then(blob => {
            saveAs(blob, filename);
          })
          .catch(err => {
            console.error(err);
          });
      },
    },
  };
</script>

2.3. 代码分析

上面的示例代码中，我们使用了FileSaver.js库，通过import { saveAs } from 'file-saver'引入其saveAs()方法，用于将从服务器下载的文件保存到本地。

首先，在点击下载按钮时，我们发送一个fetch请求到服务器，获取需要下载的文件。由于fetch返回的是一个promise对象，我们可以使用then()方法来处理响应结果。在then()方法中，我们将响应数据转换成一个Blob对象，然后调用saveAs()方法保存到本地。

2.4. 注意事项

在下载文件时，我们需要确保返回的文件格式是可下载的。常见的可下载文件格式有：txt、csv、doc、pdf、jpg、png等。

此外，FileSaver.js的兼容性问题也需要注意。较老的浏览器可能不支持该库。