elementUI使用el-upload上传文件写法总结及避坑,上传图片/视频到本地/服务器以及回显+删除

news2025/7/9 9:04:28

Element Upload 上传

Element Upload官方文档:el-upload
具体细节只看官方文档,本篇主要介绍避坑点和用法总结

注意点以及坑

  • 本地上传想要回显图片视频,使用on-success是没办法再在上传后获取到本地文件路径后进行回显的,因为只有在上传的action成功,即不报错的情况下才会调用,本地上传用的action="#这个接口不存在,所以也不会上传成功,更不会调用获取到文件参数进行回显
    在这里插入图片描述

  • 如果想要先在本地进行回显,然后再上传的话,需要使用on-change钩子(还需:auto-upload ="false")获取文件本地路径,再生成一个formData传给后端上传文件的接口,
    本地回显用on-change,上传到服务器的回显用on-success

  • 官方文档中提供的上传图片接口https://jsonplaceholder.typicode.com/posts/现已无法使用
    在这里插入图片描述

  • 下面给大家总结几种常用的上传文件方法

el-upload上传文件用法总结

1. 上传单张图片到服务器并进行回显,不可删除只能替换

这种上传单张图片的运行场景一般是上传头像,没有删除功能,只能进行替换

<el-upload
  class="avatar-uploader"
  action="后端上传接口"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<style>
 /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      // 上传成功后的回显
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      // 上传前对类型大小的验证
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

2. 拖拽上传单张图片到本地回显再上传到服务器,可删除

可以手动上传,也可以拖拽上传,图片可以在没有后端上传接口时进行回显,可删除
template:

<el-upload
          drag
          action="#"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="uploadFile"
          accept="image/jpg,image/jpeg,image/png"
        >
          <i
            v-if="imageUrl1"
            class="el-icon-circle-close deleteImg"
            @click.stop="handleRemove1"
          ></i>
          <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />

          <div v-else>
            <i
              class="el-icon-picture"
              style="margin-top: 40px; font-size: 40px; color: #999a9c"
            ></i>
            <div class="el-upload__text1">上传图片</div>
            <div class="el-upload__text">* 建议尺寸比例2.2:1,不超过4m,</div>
            <div class="el-upload__text">格式为png、jpeg或jpg</div>
          </div>
        </el-upload>
<style scoped>
.deleteImg {
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}
</style>

data:

 data() {
      return {
        imageUrl1: ''
      };
    },

method:

 uploadFile(item) {
      console.log(item);

      let formData = new FormData();
      let file = item.raw;
      this.imageUrl1 = URL.createObjectURL(file);
      formData.append("file", file);
      // 传formData给后台就行
      // 比如
      // 接口(formData).then(res=>{
          // this.videoUrl=res.url
      // })
    },
    // 删除只需清空imageUrl1即可
   handleRemove1(file, fileList) {
      // console.log(file, fileList);
      this.imageUrl1 = "";
    },

在这里插入图片描述
在这里插入图片描述

3. 多图上传到服务器,可回显预览删除

list-type="picture-card"hover会自动有预览删除菜单,不需自己写样式,绑定事件即可

<el-upload
  action="后端接口地址"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405304.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

若依(RuoYi )权限管理设计

前言 若依权限管理包含两个部分&#xff1a;菜单权限 和 数据权限。菜单权限控制着我们可以执行哪些操作。数据权限控制着我们可以看到哪些数据。 菜单是一个概括性名称&#xff0c;可以细分为目录、菜单和按钮&#xff0c;以若依自身为例&#xff1a; 目录&#xff0c;就是页…

TypeScript 学习笔记(十万字超详细知识点总结)

👉 本系列专栏:TypeScript从入门到精通 🖥️ NodeJS专栏:Node.js从入门到精通 📢 欢迎私信博主加入前端交流群🌹 知识目录 一、介绍1、JavaScript最大的问题2、什么是TypeScript3、JS , ES , TS 的关系4、为什么使用TypeScript5、配置TypeScript环境二、数据类型1、基…

下载、编译、安装、使用 vue-devtools

不少人都想下载 vue-devtools插件&#xff0c;但又不会做&#xff0c;今天我做个比较详细的笔记 查看当前的devtools的版本可以去这个网站看右侧的个v几点几的&#xff0c;就是版本号 github/vuejs/devtools 目录 第一个方法&#xff1a;使用极简插件 第一步&#xff1a;查…

Node.js | JavaScript也能写后端?

本文已收录于专栏⭐️ 《深入浅出Node.js》⭐️ 学习指南&#x1f4c3;&#x1f449;引入⭐️初识Node.js⭐️发展历史⭐️应用场景⭐️搭建环境&#x1f449;完结散花&#x1f449;参考文献&#x1f449;引入 如果读者是一个前端开发的同学&#xff0c;不知道你有没有过这样的…

jsoup的使用

本文在写作过程中参考了官方文档&#xff0c;传送门。 一、jsoup概述 jsoup 是一款基于 Java 的HTML解析器&#xff0c;它提供了一套非常省力的API&#xff0c;不但能直接解析某个URL地址、HTML文本内容&#xff0c;而且还能通过类似于DOM、CSS或者jQuery的方法来操作数据&…

Node.js和Vue的安装与配置(超详细步骤)

目录一、下载二、安装三、配置四、安装配置vue五、构建运行Vue项目一、下载 Node.js官网下载 大家根据自己的系统进行下载安装包&#xff08;我的电脑是windows10-64位&#xff0c;所以下载第一个&#xff09; 二、安装 点击下载的安装包进行安装 点击Next 打勾并点击Ne…

vue3 路由的使用

路由的使用 在传统的 Web 开发过程中&#xff0c;当需要实现多个站内页面时&#xff0c;以前需要写很多个 HTML 页面&#xff0c;然后通过 标签来实现互相跳转。在如今工程化模式下的前端开发&#xff0c;像 Vue 工程&#xff0c;可以轻松实现只用一个 HTML 文件&#xff0c;…

JavaScript:实现复制粘贴剪切功能

文章目录js实现复制粘贴功能方式一&#xff1a;原生方式实现复制粘贴剪切&#xff08;不推荐&#xff09;方式二&#xff1a;浏览器自带clipboard API实现复制粘贴&#xff08;推荐&#xff09;简介特点clipboard对象及相关APIClipboard.readText()Clipboard.read()Clipboard.w…

iframe标签的使用

iframe标签的使用1、什么是iframe2、iframe的元素属性3、iframe操作4、iframe 对象及属性5、创建iframe元素6、iframe之间的通信6.1、什么是主域名&#xff0c;什么是子域名(拓展)6.2、iframe之间的通信7、其他7.1、iframe自适应7.2、防嵌套网页7.2.1、浏览器端7.2.2、服务器端…

使用HBuilderX软件快速搭建Vue项目

1.node.js环境下载 node.js相当于java中jdk,但是是在服务器端的 JavaScript,需要通过npm去管理node.js的包,通过npm可以下载node.js中的扩展 ①首先下载node.js的安装包 https://nodejs.org/zh-cn/download/releases/(以往版本) ②选择node.js的下载路径配置环境变量(一般会…

5分钟带你看懂 prettier + eslint 搭配(vscode)

最近身边不少朋友在用eslint和prettier搭配的时候&#xff0c;总是遇到一些莫名其妙的报错&#xff0c;自己也不知道怎么配&#xff0c;所以我总结了一下自己搭配的步骤&#xff0c;分享一下&#xff0c;如有不对之处&#xff0c;静请诸位大佬雅正&#xff01; 本文按顺序配置一…

轻松实现在web页面中直接播放rtsp视频流

轻松实现在web页面中直接播放rtsp视频流写在前面实现介绍如何使用准备ffmpeg运行rtsp2web参数说明前端代码参数说明课外知识写在前面 我之前研究在 web 中直接播放 rtsp 视频流时&#xff0c;写过一篇文章&#xff1a;【前端】rtsp 与 rtmp 视频流的播放方法。阅读 这篇文章 对…

vue3 props属性基本使用梳理

前言 vue2中props属性的使用是比较统一的基本就一种方式&#xff0c;但是vue3中其实方式是比较多的&#xff0c;因此就打算梳理一下。 会按照选项式和组合式进行梳理&#xff0c;包括属性的定义、取值以及属性的监听。 应该是叫单文件组件和组合式API&#xff0c;不知道vue官…

在vscode中创建vue项目

1. 背景 昨天对一次成功用新电脑在vscode上跑成功项目工程里的vue项目&#xff0c;今天目标是自己用vscode新建一个vue项目 关于vue环境配置请看这篇&#xff1a;使用vscode运行Vue项目 2. 准备工作&#xff08;也可跳过此步骤&#xff09; 安装Vetur&#xff0c;一款Vue代码…

unplugin-auto-import的使用

1、unplugin-auto-import插件的解决的问题unplugin-auto-import 这个插件是为了解决在开发中的导入问题&#xff0c;比如经常不清楚相对路径的问题&#xff0c;这个插件就是解决这个问题这个插件会在根目录生成一个auto-import.d.ts&#xff0c;这个文件会将所有的插件导入到gl…

node.js安装及环境配置(保姆级)

一.node安装 1.去node官网安装Node.js 2.官网界面 3.无脑下一步&#xff0c;完成安装。&#xff08;最好放在d盘&#xff09; 4.安装完成之后管理员cmd查看是否安装成功&#xff0c;出现如下界面说明已经安装成功 5.打开Node文件目录&#xff0c;如下图: 6.在Node文件目录下建…

你评论,我赠书~【哈士奇赠书 - 12期】-〖爬虫逆向进阶实战〗参与评论,即可有机获得

大家好&#xff0c;我是 哈士奇 &#xff0c;一位工作了十年的"技术混子"&#xff0c; 致力于为开发者赋能的UP主, 目前正在运营着 TFS_CLUB社区。 &#x1f4ac; 人生格言&#xff1a;优于别人,并不高贵,真正的高贵应该是优于过去的自己。&#x1f4ac; &#x1f4e…

Vue Grid Layout -️ 适用Vue.js的栅格布局系统(保姆级使用教程)

目录 一、 Vue Grid Layout 简介 二、vue-grid-layout 的安装与使用 三、 属性 3.1 gridItem 的必须属性 3.2 框架元素的实际宽度高度计算方式 3.3 gridLayout 的属性 四、事件 五、vue-grid-layout 的实际应用 5.1 移动到任意位置 5.2 移动事件与调整大小 5.3 实现…

Vue显示图片的几种方式

前言 最近在做自己的项目&#xff0c;有这么一个需求&#xff0c;用户列表需要展示用户的头像&#xff0c;之前一直没有处理&#xff0c;趁着这次机会&#xff0c;正好分享下我的解决过程。 头像这一栏空荡荡的&#xff0c;我这种强迫症患者难受死&#xff01; 首先声明下&am…

vue面试题整理(2022-持续更新中...)

vue中MVVM的理解 M&#xff1a;模型&#xff08;Model&#xff09;&#xff1a;数据模型&#xff1b;负责数据存储。泛指后端进行的各种业务逻辑处理和数据操控&#xff0c;主要围绕数据库系统展开。 V就是&#xff1a;View 视图&#xff1a; 负责页面展示&#xff0c;也就是用…