elementUi / elementPlus自定义上传方法 Upload自定义文件上传

news2024/12/23 15:28:49

🚀 个人简介:某大型国企资深软件研发工程师,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端后端相关技术与工作常见问题~

💟 作    者:码喽的自我修养🥰
📝 专    栏:常用组件库与实用工具 🎉

🌈 创作不易,如果能帮助到带大家,欢迎 收藏+关注  💕

upload组件的 http-request 自定义上传方法

upload组件文档地址https://element-plus.org/zh-CN/component/upload.html

element-ui / elementPlus中,默认以提供action上传地址的方式上传文件,但如果我们使用七牛或者阿里oss上传文件的话,upload这种默认上传文件的方式就行不通了,因为阿里oss等自定义上传接口,往往都有权限,额外的配置参数等限制,所以我们就需要自定义上传接口啦,好在upload组件提供了http-request属性可以让我们自定义上传api

 开始着手实现自定义上传吧

使用方法

页面使用模板部分 upload 组件截图如下

methods 中自定义上传方法js代码截图如下

其中 ossUpload 为我们传递给 upload 组件的自定义上传方法,ossUploadApi 为真正的上传文件数据到服务器的api,到这里,就已经可以触发自定义上传文件函数啦。

关联上传钩子

这里有一个问题,因为对于upload上传组件来说,不仅仅有上传文件,还有上传文件成功 success 和失败 error 钩子,需要我们对上传成功和上传失败做一些处理才行。

在没有自定义上传文件前,这些上传钩子是和上传文件请求接口相关联的。而我们自定义了上传文件操作,所以现在上面的写法是不能主动触发upload组件定义的钩子的。

那么我们怎么把自定义上传api和upload组件的这两个钩子关联起来呢,element-ui / elementPlus文档上介绍提供了 http-request 属性可以让我们可以自定义上传,没有介绍如何使用,这个时候就要发挥我们码农看源代码的能力啦。通过断点源码找到调用我们自定义上传文件方法的地方,如下图所示

通过截图上面的文字分析,我们添加如下所示代码即可,即添加 return 语句返回 promise 结果 ,(注意,因为ossUploadApi这个接口本身实现的时候返回的就是promise(由自己实现返回promise)),所以添加 return 语句返回即可

同时,通过源码我们也发现,upload组件内部往我们自定的上传方法中传递了一个options参数,其中包含了对upload上传文件 success 成功钩子,error 失败钩子,progress 上传进度钩子,也就是说,其实我们也可以在自定义上传里面主动调用这些钩子以实现相应功能(注意自己调用钩子时候保证回调参数一致)。

回调数据

打印自定义上传方法的回调数据(由upload组件内部传递给我们的数据,通过上面源码分析截图调用 httpRequest 的地方,也可以看到回调数据的)

总结:

  • 通过 http-request 属性可以让我们自定义上传 api 方法
  • 我们有两种方案可以将自定义上传方法和upload内部的文件上传 success,error 钩子关联起来

  ① 自定义上传方法并返回promise (推荐)

  ② 在自定义上传方法中主动调用upload组件提供的钩子或者调用自己定义的钩子

 完整代码如下

<template>
  <el-upload
    ref="upload"
    :action="doUpload"
    :headers="headers"
    :http-request="ossUpload"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :disabled="disable"
  >
    <el-button
      size="small"
      :disabled="disable"
      type="primary"
    >
      上传文件
    </el-button>
    <div
      slot="tip"
      class="el-upload__tip"
    >
      支持jpg、png、pdf、word格式,大小不超过500M。
    </div>
  </el-upload>
</template>

<script>
  import { getToken } from '@/utils/auth';
  import { ossUploadApi } from '@/api/serviceProvider';
  export default {
    name: 'Upload',
    model: {
      prop: 'fileList',
      event: 'change',
    },
    props: {
      fileList: {
        type: Array,
        required: true,
      },
      disable: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        // 上传地址
        doUpload:
          process.env.VUE_APP_BASE_API +
          (process.env.NODE_ENV === 'production' ? '' : '/api') +
          process.env.VUE_APP_BASE_CONTENT_URL +
          '/contract/upload',
        // doUpload: 'https://jsonplaceholder.typicode.com/posts/',
        // 下载请求头
        headers: {
          tgt: getToken(),
        },
      };
    },
    watch: {},
    methods: {
      // 处理文件点击预览操作
      handlePictureCardPreview(file) {
        console.log(file);
        let downUrl = '';
        if (file.hasOwnProperty('url')) {
          downUrl = file.url;
        } else {
          downUrl = file.response.message;
        }
        // 赋值
        const a = document.createElement('a');
        // 创建href属性
        a.href = downUrl;
        // 点击下载
        a.click();
      },
      // 上传前
      beforeUpload(file) {
        const limitSize = 500;
        const isLt500M = file.size / 1024 / 1024 < limitSize;
        if (!isLt500M) {
          this.$message.error(`上传文件大小不能超过 ${limitSize}MB!`);
        }
        return isLt500M;
      },
      // 手动删除文件钩子
      handleRemove(_file, fileList) {
        console.log(fileList);
        this.processFileList(fileList);
      },
      // 上传成功钩子
      handleSuccess(_res, _file, fileList) {
        console.log(fileList);
        this.processFileList(fileList);
      },
      // 上传失败的钩子
      handleError(err, _file, fileList) {
        if (err.code !== 200) {
          this.$message({
            message: err.message || '上传失败',
            type: 'warning',
          });
        }
        this.processFileList(fileList);
      },
      // 自定义处理filelist
      processFileList(fileList) {
        fileList.forEach((item) => {
          if (!item.url && item.response) {
            const response = item.response;
            item.url = response.url;
          }
        });
        this.triggerChange(fileList);
      },
      triggerChange(fileList) {
        this.$emit('change', fileList);
      },
      // 自定义上传oss方法
      ossUpload(option) {
        const file = option.file;
        return ossUploadApi(file);
      },
    },
  };
</script>
<style lang="scss" scoped></style>

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家点点收藏+关注~💕 

     更多专栏订阅推荐:

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战 

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

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

相关文章

二进制文件与文本文件的区别【字符集Charset】

计算机上存储的文件在比特位上都是以二进制数字0或1表示&#xff0c;因此在物理层面上&#xff0c;文本文件和二进制文件没有本质差异&#xff0c;都是由数字0或1组成的比特位集合。 文本文件和二进制文件&#xff0c;两者的差异体现在编码逻辑&#xff0c;需要根据文件头中标…

SpringSecurity-用户认证

1、用户认证 1.1 用户认证核心组件 我们系统中会有许多用户&#xff0c;确认当前是哪个用户正在使用我们系统就是登录认证的最终目的。这里我们就提取出了一个核心概念&#xff1a;当前登录用户/当前认证用户。整个系统安全都是围绕当前登录用户展开的&#xff0c;这个不难理…

百度在线翻译神器?这3款工具让你秒变语言达人!

在数字化的今天&#xff0c;我们早已离不开在线翻译工具了&#xff01;从日常的简单翻译到专业级的文献翻译&#xff0c;这些翻译工具就像是我们的“翻译官”&#xff0c;为我们的生活带来了便利&#xff1b;在这里&#xff0c;我给大家分享一下我的百度在线翻译使用感受&#…

Elasticsearch 分片迁移与移除集群节点操作

Elasticsearch 分片迁移与移除集群节点操作 问题背景 在单台服务器上部署了 7 个 Elasticsearch 节点&#xff0c;分别为 es-node1 到 es-node7&#xff0c;端口从 9201 到 9207。每个节点都承载大量数据&#xff0c;但没有设置副本分片。由于多个节点共享同一台服务器的硬件…

自动化测试常用函数:弹窗、等待、导航、上传与参数设置

目录 一、弹窗 1. 警告弹窗确认弹窗 2. 提示弹窗 二、等待 1. 强制等待 2. 隐式等待 3. 显示等待 三、浏览器导航 1. 打开网站 2. 浏览器的前进、后退、刷新 四、文件上传 五、浏览器参数设置 1. 设置无头模式 2. 页面加载策略 一、弹窗 弹窗是在页面是找不到任何…

震撼!最强开源模型通义千问2.5 72B竟在4GB老显卡上成功运行!

炸裂&#xff01;最强开源模型一夜之间易主。阿里发布千问2.5模型&#xff0c;72B版本在MMLU、MATH、MBPP等大部分评测指标上都超过了Llama3 405B&#xff0c;甚至一些指标也超过了GPT4o。正式加冕最强开源模型新王&#xff01; 今天要挑战用我的4GB老显卡不做量化、不做压缩&…

光伏仿真:排布设计如何优化用户体验?

1、屋顶绘制精准 光伏系统的性能直接受到屋顶结构的影响&#xff0c;因此&#xff0c;屋顶绘制的精准性是光伏仿真设计的首要任务。现代光伏仿真软件通过直观的界面和强大的图形编辑功能&#xff0c;使得用户能够轻松导入或绘制出待安装光伏系统的屋顶形状。无论是平面屋顶、斜…

LLM - 使用 XTuner 指令微调 多模态大语言模型(InternVL2) 教程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/142528967 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 XTuner…

国庆节到了,扣子智能体coze画板功能实现贺卡编辑智能体自动添加logo和二维码,让海报品牌化

大家好,我是Shelly,一个专注于输出AI工具和科技前沿内容的AI应用教练,体验过300+款以上的AI应用工具。关注科技及大模型领域对社会的影响10年+。关注我一起驾驭AI工具,拥抱AI时代的到来。 自媒体时代,不管是一个人、一个团队还是一家公司,都是一个IP。那么添加品牌的标志…

JavaWeb校园二手交易平台

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 spring-mybatis.xml3.5 spring-mvc.xml3.5 login.jsp 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优…

AI大模型助力数据消费,构建数据飞轮科学、高效的体系

随着互联网的技术高速发展&#xff0c;越来越多的应用层出不穷&#xff0c;伴随着数据应用的需求变多&#xff0c;为快速响应业务需求&#xff0c;很多企业在初期没有很好的规划的情况下&#xff0c;存在不同程度的烟囱式的开发模式&#xff0c;这样会导致企业不同业务线的数据…

Java Map类

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;Java 目录 &#x1f449;&#x1f3fb;map1. 常见的实现2. 主要方法2.1. put(K key, V value)2.2. get(Object key)2.3. remove(Object key)2.4. containsKe…

西部移动硬盘怎么恢复数据?4种详细且实用的方法

面对西部移动硬盘数据丢失的问题&#xff0c;用户往往感到焦虑和无助。本文将为您提供一系列详细且实用的数据恢复方法&#xff0c;帮助您轻松应对数据丢失的挑战&#xff0c;重拾宝贵信息。 图片来源于网络&#xff0c;如有侵权请告知 一、西部移动硬盘数据丢失原因 西部移动…

生成式AI在电商场景的应用、前景与挑战,零基础入门到精通,收藏这一篇就够了

编者按 百舸争流的AI时代&#xff0c;“AI”行动在千行百业迅速开展。电商是一个重要场景&#xff0c;**据阿里调研&#xff0c;在电商平台&#xff0c;约30%受访商家已经使用生成式AI&#xff0c;成为生成式AI技术普惠的最佳试验场之一。**目前&#xff0c;已使用生成式AI的商…

828华为云征文|华为云Flexus云服务器X实例之openEuler系统下部署经典扫雷小游戏

828华为云征文&#xff5c;华为云Flexus云服务器X实例之openEuler系统下部署经典扫雷小游戏 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、本次实践介绍2.1 本次实践简介2.2 扫雷小游戏简介2.3…

KPaaS平台用户权限管理系统方案之表单设计统一单据制作与授权

不同的业务系统各自独立运行&#xff0c;需要分别进行授权操作&#xff0c;这不仅繁琐耗时&#xff0c;还容易出现错误和不一致的情况&#xff0c;导致企业在多系统用户权限角色管理中常常陷入困境&#xff0c;那么&#xff0c;有没有一种高效、便捷的解决方案呢&#xff1f; …

关于预处理详解,#define,宏的使用以及命名 函数与宏的区别详细对比

预定义符号 C语⾔设置了⼀些预定义符号&#xff0c;可以直接使⽤&#xff0c;预定义符号也是在预处理期间处理的 __FILE__ //进⾏编译的源⽂件 __LINE__ //⽂件当前的⾏号 __DATE__ //⽂件被编译的⽇期 __TIME__ //⽂件被编译的时间 __STDC__ //如果编译器遵循ANSI C&#xff…

汉诺塔的理解

数学思想——归纳推理&#xff08;不是反证法&#xff09; 为了方便&#xff0c;我把塔叫做牌&#xff0c;最左边的是从大到小&#xff08;底部开始&#xff09;放置的的牌堆。 数字的那一列是递归调用&#xff0c;右边长度不一的箭头是&#xff0c;数字阶段向下调用方法的情况…

稀土抗菌剂在涂料中应用的神奇表现

稀土抗菌剂的抗菌抑菌机理有四个层面:一是稀土化合物与细菌表面静电结合&#xff0c;造成直接的杀灭二是基于稀土的光催化半导体特性&#xff0c;通过光生氧自由基ROS机理杀灭细菌;三是稀土化合物破坏细胞膜通透性&#xff0c;造成破损导致细胞质流出杀灭细菌;四是稀土离子跨膜…

C标准库<string.h>-str、strn开头的函数

char *strcat(char *dest, const char *src) 函数功能 strcat 函数用于将一个字符串追加到另一个字符串的尾部。 参数解释 dest&#xff1a;指向目标字符串的指针&#xff0c;这个字符串的尾部将被追加 src 字符串的内容。src&#xff1a;指向源字符串的指针&#xff0c;其…