vue中使用el-upload上传

在Vue中，`el-upload` 是 Element UI 提供的一个非常方便的文件上传组件。它结合了拖放功能和普通文件选择器，可以轻松处理文件上传操作。以下是如何在 Vue 中使用 `el-upload` 的基本步骤：

1. 引入依赖：首先在你的项目中安装 Element UI 并引入 `el-upload` 组件。在 `main.js` 或者相应的入口文件中添加：

import { ElUpload } from 'element-plus';

2. 在模板中使用组件：在需要上传文件的地方添加 `<el-upload>` 标签，并设置一些基本属性，如上传路径、上传方法等。

<template>
  <div>
    <el-upload
      :action="uploadUrl" // 上传的服务器地址
      :on-success="handleSuccess" // 上传成功后的回调
      :on-error="handleError" // 上传失败后的回调
      :file-list="fileList" // 当前已上传文件的列表
      :auto-upload="false" // 默认不自动上传，需要手动触发上传
      drag
      accept="image/*" // 可接受的文件类型，这里仅支持图片
    >
      <el-button>点击上传</el-button>
    </el-upload>
  </div>
</template>

3. 数据绑定和方法定义：在对应的 Vue 实例中定义变量和方法，如 `uploadUrl`、`fileList`、`handleSuccess` 和 `handleError`。

<script>
export default {
  data() {
    return {
      uploadUrl: '/api/upload', // 你的上传接口地址
      fileList: [], // 用于存储上传文件的信息
    };
  },
  methods: {
    handleSuccess(response, file) {
      // 处理上传成功的回调，比如更新状态或数据
      this.fileList.push(file);
      console.log('文件 ' + file.name + ' 上传成功');
    },
    handleError(error, file) {
      // 处理上传失败的回调，比如显示错误信息
      console.error('文件 ' + file.name + ' 上传失败', error);
    },
  },
};
</script>