Vue El-upload组件文件上传及下载：图文并茂教程

2023-06-10 20:11:44

文件上传、下载和回显：使用 Vue 中的 el-upload

在现代 Web 开发中，文件处理功能至关重要。在 Vue 项目中，使用 el-upload 组件可以轻松实现文件上传、下载和回显。本文将详细介绍如何使用此组件满足你的文件处理需求。

准备工作

安装 el-upload 组件： 使用 npm 命令 npm install element-ui。
导入 el-upload 组件： 在你的项目主文件中（例如 main.js）导入组件：

import Vue from 'vue';
import ElementUI from 'element-ui';

Vue.use(ElementUI);

文件上传

引入 el-upload 组件： 在需要上传文件的组件中引入该组件。
添加 el-upload 组件： 在组件模板中添加 el-upload 组件：

<el-upload
  action="/api/upload"
  :multiple="true"
  @success="handleSuccess"
  @error="handleError"
>
  <button slot="trigger">选择文件</button>
</el-upload>

定义回调函数： 在组件脚本中定义 success 和 error 回调函数，以便在文件上传成功或失败时处理逻辑：

methods: {
  handleSuccess(response) {
    console.log(response);
  },
  handleError(error) {
    console.log(error);
  },
}

文件下载

引入 el-upload 组件： 在需要下载文件的组件中引入该组件。
添加 el-upload 组件： 在组件模板中添加 el-upload 组件：

<el-upload
  action="/api/download"
  @success="handleSuccess"
  @error="handleError"
>
  <a slot="trigger" href="#">下载文件</a>
</el-upload>

定义回调函数： 在组件脚本中定义 success 和 error 回调函数，以便在文件下载成功或失败时处理逻辑：

methods: {
  handleSuccess(response) {
    console.log(response);
  },
  handleError(error) {
    console.log(error);
  },
}

回显照片

引入 el-upload 组件： 在需要回显照片的组件中引入该组件。
添加 el-upload 组件： 在组件模板中添加 el-upload 组件：

<el-upload
  action="/api/upload"
  :multiple="true"
  @success="handleSuccess"
  @error="handleError"
>
  <el-image
    slot="list"
    :src="fileList[0].url"
    fit="contain"
  >
  </el-image>
  <button slot="trigger">选择文件</button>
</el-upload>

定义回调函数： 在组件脚本中定义 success 和 error 回调函数，以便在文件上传成功或失败时处理逻辑：

methods: {
  handleSuccess(response) {
    this.fileList = [response.data];
  },
  handleError(error) {
    console.log(error);
  },
},
data() {
  return {
    fileList: [],
  };
}