下面是“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>