vue 实现上传组件

当我们需要在 Vue 项目中添加文件上传功能时，我们可以使用 vue 组件来实现。下面是实现上传组件的基本流程：

1. 安装依赖

首先，你需要在你的项目中安装以下依赖：

npm install vue axios element-ui --save

• Vue: 一个用于构建用户界面的渐进式框架。
• Axios: 一个基于 Promise 的 HTTP 库，用于向服务器发送请求数据。
• Element UI: 一个 Vue.js 2.0 的 UI 组件库。

2. 构建上传组件

在组件中使用 HTML、CSS 和 JavaScript 构建一个上传组件。下面是一个示例：

<template>
  <div class="upload">
    <el-upload
      class="upload-demo"
      action="/api/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :limit="3"
      :on-exceed="handleExceed"
      multiple>
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
    </el-upload>
  </div>
</template>

<script>
  export default {
    name: 'UploadComponent',
    methods: {
      handlePreview(file) {
        console.log(file);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handleSuccess(response, file, fileList) {
        console.log(response, file, fileList);
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG || !isLt2M) {
          this.$message.error('只能上传 jpg/png 文件，且不超过 2MB');
        }

        return isJPG && isLt2M;
      },
      handleExceed(files, fileList) {
        this.$message.warning(`只能上传 ${this.limit} 个文件`);
      }
    }
  }
</script>

<style scoped>
  .upload {
    margin-top: 20px;
  }
</style>

在上面的示例中，我们使用了 Element UI 中提供的 el-upload 组件来构建上传组件，并且设置了相关的监听事件和上传限制条件。同时，我们还可以在 template 中使用其他的 HTML 元素和组件来构建我们的页面。

3. 处理后端接口

在前端处理完上传组件的相关逻辑之后，我们还需要在后端处理文件上传的请求。下面是一个示例：

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  const file = req.file;

  if (!file) {
    return res.status(400).json({ message: '未选择上传文件' });
  }

  res.status(200).json({ url: path.join('/uploads', file.filename) });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

在上面的示例中，我们使用 Express 和 Multer 来处理文件上传的请求。同时，我们还将上传的文件保存在 uploads 目录中，并且返回上传文件的 url 地址。

4. 引入上传组件

最后，我们需要在 Vue 项目中引入并使用上传组件。下面是一个示例：

<template>
  <div class="app">
    <upload-component></upload-component>
  </div>
</template>

<script>
import UploadComponent from './components/UploadComponent.vue'

export default {
  name: 'App',
  components: {
    UploadComponent
  }
}
</script>

<style>
  .app {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
</style>

在上面的示例中，我们将上传组件引入到 App 组件中，并且在 template 中使用该组件。

这就是实现上传组件的基本流程。当然，你还可以根据自己的需求对上传组件进行自定义和优化。