Vue+ElementUI实现图片上传，手把手教你轻松搞定！

使用 Vue 和 ElementUI 实现图片上传功能

准备工作

在开始之前，请确保您已安装 Vue 和 ElementUI。若尚未安装，请遵循官方文档进行安装。

引入上传组件

要使用图片上传功能，您需要在项目中引入 ElementUI 的上传组件：

import { Upload } from 'element-ui';
Vue.use(Upload);

使用上传组件

引入组件后，即可在模板中使用它：

<el-upload
  action="上传接口地址"
  :show-file-list="false"
  :on-success="handleSuccess"
  :on-error="handleError">
  <button type="button" class="el-button el-button--primary">上传图片</button>
</el-upload>

参数说明：

• action: 必填，指定上传接口地址。
• show-file-list: 可选，布尔值，决定是否显示上传文件列表。
• on-success: 可选，函数，在上传成功后触发。
• on-error: 可选，函数，在上传失败后触发。

上传图片

本地文件：

const filePath = document.getElementById('file').files[0].path;

网络文件：

直接使用图片 URL。

处理上传结果

上传成功：

handleSuccess(response) {
  // 上传成功的处理逻辑，如保存图片到数据库
}

上传失败：

handleError(error) {
  // 上传失败的处理逻辑，如提示用户
}

示例代码

以下是一个完整的示例，用于将图片上传到服务器并显示成功信息：

模板：

<el-upload
  action="https://example.com/upload"
  :show-file-list="false"
  @success="handleSuccess">
  <button type="button" class="el-button el-button--primary">上传图片</button>
</el-upload>

脚本：

import { Upload } from 'element-ui';
Vue.use(Upload);

export default {
  methods: {
    handleSuccess(response) {
      this.$message({
        type: 'success',
        message: '图片上传成功'
      });
    }
  }
}

常见问题解答

1. 如何限制文件大小？

:file-size-limit="2097152"

2. 如何限制文件类型？

:file-type="['image/jpeg', 'image/png']"

3. 如何设置上传超时时间？

:timeout="30000"

4. 如何禁用拖拽上传？

:drag="false"

5. 如何显示上传进度？

<el-upload
  action="上传接口地址"
  :show-file-list="false"
  :on-progress="handleProgress">
  <button type="button" class="el-button el-button--primary">上传图片</button>
</el-upload>

handleProgress(progressEvent) {
  // 显示上传进度
}