ElementUI文件上传全攻略：图文详解，快速上手！

2022-12-11 23:53:26

ElementUI 文件上传：从初学者到专家的指南

简介

ElementUI 的 el-upload 组件为上传文件提供了便捷的解决方案。它支持两种上传方式：本地上传和服务器上传。本文将深入探讨如何使用此组件，从安装和配置到处理上传成功后的逻辑。

本地文件上传

步骤 1：安装 ElementUI

npm install element-ui

步骤 2：引入 ElementUI

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

步骤 3：使用 el-upload 组件

<el-upload
  action="/upload"
  list-type="picture-card"
>
  <i class="el-icon-plus"></i>
</el-upload>

步骤 4：设置上传参数

action: 上传地址
list-type: 上传列表类型（如图片卡片或列表）

服务器文件上传

服务器端设置

在服务器端设置上传接口，例如 PHP：

<?php

// 接收上传的文件
$file = $_FILES['file'];

// 将文件移动到指定位置
move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);

// 返回上传成功的信息
echo json_encode(['success' => true]);

?>

el-upload 设置

action: 上传地址
on-success: 上传成功后的回调函数

<el-upload
  action="/upload"
  list-type="picture-card"
  on-success="handleSuccess"
>
  <i class="el-icon-plus"></i>
</el-upload>

处理上传成功

handleSuccess(response) {
  // 上传成功后的逻辑
}

回显和删除

回显

<el-upload
  action="/upload"
  list-type="picture-card"
  :file-list="fileList"
>
  <i class="el-icon-plus"></i>
</el-upload>

删除

<el-upload
  action="/upload"
  list-type="picture-card"
  :file-list="fileList"
  :on-remove="handleRemove"
>
  <i class="el-icon-plus"></i>
</el-upload>