引言

在开发Vue项目时，我们经常需要处理文件上传、下载、预览等操作。由于网络环境的不稳定性，有时候这些操作会受到。为了提高用户体验和减少对网络的依赖，本文将介绍如何在Vue项目中接入本地文件管理，实现文件的上传、下载和预览功能。

技术选型

  1. Vue.js: 作为前端框架，用于构建用户界面和单页应用。
  2. Element UI: 一个基于 Vue 2.0 的桌面端组件库，用于简化UI组件的使用。
  3. Axios: 一个基于Promise的HTTP客户端，用于发送异步请求。
  4. FileSaver.js: 一个JavaScript库，用于在浏览器中保存文件。

文件上传

1. 准备工作

首先，在项目中安装Element UI和Axios：

npm install element-ui axios

然后，在Vue组件中引入所需的库和组件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import axios from 'axios';
import { Upload } from 'element-ui';

Vue.use(ElementUI);

2. 创建上传组件

在Vue组件中创建一个上传组件，用于上传文件：

<template>
  <el-upload
    action="#"
    :on-change="handleChange"
    :before-upload="beforeUpload"
  >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleChange(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJPG) {
        this.$message.error('上传文件只能是 JPG/PNG 格式!');
      }
      return isJPG;
    }
  }
};
</script>

3. 实现文件上传

在上传组件的beforeUpload方法中，我们可以使用Axios发送文件到服务器：

beforeUpload(file) {
  const formData = new FormData();
  formData.append('file', file);
  axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(response => {
    this.$message.success('文件上传成功!');
  }).catch(error => {
    this.$message.error('文件上传失败!');
  });
}

文件下载

1. 创建下载组件

在Vue组件中创建一个下载组件，用于下载文件：

<template>
  <el-button @click="handleDownload">下载文件</el-button>
</template>

<script>
export default {
  methods: {
    handleDownload() {
      const link = document.createElement('a');
      link.href = '/api/file/download';
      link.download = 'example.txt';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>

2. 实现文件下载

在服务器端，你需要提供一个API接口，用于生成下载链接：

app.get('/api/file/download', (req, res) => {
  const file = fs.createReadStream('path/to/file.txt');
  file.pipe(res);
});

文件预览

1. 创建预览组件

<template>
  <el-upload
    action="#"
    :on-change="handleChange"
    :before-upload="beforeUpload"
  >
    <el-button slot="trigger" size="small" type="primary">选择图片</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
  <img :src="fileUrl" v-if="fileUrl" alt="图片预览" />
</template>

<script>
export default {
  data() {
    return {
      fileUrl: ''
    };
  },
  methods: {
    handleChange(file, fileList) {
      if (file.raw.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = e => {
          this.fileUrl = e.target.result;
        };
        reader.readAsDataURL(file.raw);
      }
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJPG) {
        this.$message.error('上传文件只能是 JPG/PNG 格式!');
      }
      return isJPG;
    }
  }
};
</script>

2. 实现图片预览

handleChange(file, fileList) {
  if (file.raw.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.onload = e => {
      this.fileUrl = e.target.result;
    };
    reader.readAsDataURL(file.raw);
  }
}

总结

通过本文的介绍，我们可以轻松地在Vue项目中接入本地文件管理，实现文件的上传、下载和预览功能。这些功能可以帮助我们提高用户体验，减少对网络的依赖，使应用更加稳定和可靠。