element 上传组件 el-upload 的经验总结

最新推荐文章于 2024-05-01 02:01:08 发布
最新推荐文章于 2024-05-01 02:01:08 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 经验总结 文章标签： Element-ui Vue vue-element-admin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jonathan_1994/article/details/97630002
版权
本文介绍了在vue-element-admin项目中使用Element UI的上传组件el-upload遇到的问题及解决方案，包括如何上传图片到七牛云，实现图片上传前的压缩，解决el-upload进度条不显示的问题。文中详细讲解了与七牛云JS-SDK的集成，自定义上传功能的实现，以及利用lrz库进行图片压缩。同时，针对el-upload进度条不显示的bug，给出了通过监听axios的上传进度事件来修复的方法。
摘要由CSDN通过智能技术生成

前言

最近在做后台管理项目，采用的 vue-element-admin ，上传图片是一个很常用的功能，也遇到了很多问题，刚好趁此机会做一些总结。

初步总结下会提到的问题，目录如下：

  1. el-upload 自定义上传方法
  2. 图片上传到七牛云
  3. 图片压缩后再上传（压缩使用 lrz）
  4. el-upload 进度条不显示的问题

版本信息：

  • element-ui 2.3.4
  • vue 2.5.10

提示：
由于每个人做的业务不尽相同，所以文章里的代码只是起一个引导作用，提供一个思路，具体可以根据自己的需求来调整。

正文

上传图片到七牛云

这个需要前后端的配合才能实现，这里 是官方的 JavaScript SDK 参考链接。

  • 在使用 JS-SDK 之前，您必须先注册一个七牛帐号，并登录控制台获取一对有效的 AccessKey 和 SecretKey，您可以阅读

最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解element上传组件before-remove钩子问题解决
11-20
在Element UI的上传组件中，`before-upload`和`before-remove`是两个非常重要的钩子函数。`before-upload`允许我们在文件上传之前进行预处理，例如验证文件类型、大小等。而`before-remove`则在用户尝试删除已上传...
vue element upload组件 file-list的动态绑定实现
10-16
主要介绍了vue element upload组件 file-list的动态绑定实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-element-admin el-upload组件实现图片上传
wuchoujb的博客
05-09 903
使用elementUi官网上的beforeAvatarUpload（file）方法，输出file属性，发现并不是数据库需要的file类型， 解决办法： let formData = new FormData(); formData.append("files", file[0].raw); //数据库需要files字段 axios({ headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' }, me
elementUpload组件上传功能
imkaifan的博客
03-03 342
应项目需求需要用到element的上传功能： template： <!-- 上传文件 --> <el-dialog title="导入表格" :visible.sync="uploadFileVisible" width="30%" :append-to-body="true" @close="uploadFileClose" > <div>
【前端相关】elementui使用el-upload组件实现自定义上传(1)
最新发布
fksdskjfzxklzk的博客
05-01 1714
我们的服务器会拦截所有的请求，进行权限控制，密钥检查，请求头分析等安全行为控制。写在这里的url无法实现定义请求参数之类的，就更不能进行后面的操作了。所以最恰当的方式，就是自定义文件的上传行为。
Element｜Upload结合Progress实现上传展示进度条
Mr.小灰狼_随笔
01-11 6205
Element｜Upload结合Progress实现上传展示进度条 背景 ： 项目里的 附件上传 题型组件，用户在上传过程中，如果文件较大，上传过程较慢，而又没有一个类似 Loading... 的加载过程的话，会显得干愣愣的，用户体验较差，所以需要添加一个进度条来提示用户上传的进度，下面有两种方式，一种假的，一种真的，伙伴们可根据需求自行选取实现。
【前端学习记录】vue中使用el-upload组件时，上传文件进度条没有实时更新
Note_creek的博客
07-03 3232
使用el-upload组件时，上传文件时的进度条没有实时更新的解决思路
element ui 上传大文件卡100%进度
m0_50937705的博客
12-23 1970
elementui 自定义进度条
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
element UI el-upload上传组件使用
橙汁梨子的博客
11-25 1190
项目场景： 最近在项目中遇到了需要上传文件的地方，第一次用，此处作为学习的记录，有不足望指正 描述： el-upload的方法名和属性请参照element官方文档，这里只贴我使用的一些 我使用的样式是可拖拽上传 代码如下： <el-upload ref="myUpload" 上传文件的名字 name="file" class="upload-demo" drag
vue+element ui 上传文件，显示的文件参数内容只有uid
qq_45634989的博客
05-31 7965
现象 使用elment ui的el-upload组件上传文件，会导致上传的文件参数file里面只包含uid，没有其他信息 file : { uid : 52688455 } 其他参数：xxxx 过程 在网上查资料，首先发现，是没有设定content-type为 " multipart/form-data " 由于我是封装了请求的，统一设定axios的请求config，所以我将统一的config删除，然后在每个请求方法中都逐一设定了congfig，发现请求的content-type虽然改变，
vue-element-admin 上传upload图片慢问题处理
无风的雨
06-20 6242
前言 vue-element-admin自带上传图片组件，在使用的过程中发现上传速度很慢，尤其是上传一些大图需要耗时几十秒不能忍受。出现这种情况，是因为upload组件会将图片上传到action="https://httpbin.org/post" ，并返回转换成base64编码格式的数据。 格式类似： data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYG
element上传附件（el-upload 超详细）
热门推荐
m0_52313178的博客
05-12 5万+
element上传附件（el-upload 超详细） 经常会有人问我上传文件怎么做，这个功能其实比较常见的功能，后台管理系统基本上都有，这就离不开element的el-upload，虽然配置项很多，我们慢慢看，先看结构代码，之中有注释： <div class="flex-div uploaditem"> //这里是上传了那些文件的提示，我没有要默认的文件提示 <el-tooltip class="item" effect="dark" :content="tag.name" pl
vue-element-admin上传图片的功能
祈澈菇凉
08-12 6429
在vue后台管理系统里面，有时候会遇到一个图片上传的功能，做这个功能的时候的思路是这样的： 1：首选由前端写一个图片上传的upload标签，选择本地的图片文件之后 2:调用后端给的接口，以二进制文件的形式传给后端服务器 3:服务器进行处理，处理完成之后将服务器的主机名加到图片名称的前缀上 4:返回一个有服务器主机+图片名称的在线就可以访问的链接给到前端 5:前端直接将在线链接路径渲染在界面显示图片...
vue + elementUI Upload 上传视频上传格式尺寸宽高时长,限制视频上传格式、尺寸、时长
acuila的博客
04-21 9521
vue + elementUI Upload 上传,限制视频上传格式、尺寸、时长 HTML // An highlighted block <el-upload ref="uploadVideo" action="no" :show-file-list="false" :auto-upload="true" :before-upload="videoBeforeUploa...
填坑日志-elementUI el-upload上传组件没有进度条
weixin_33937778的博客
08-02 5636
文档中使用el-upload组件上传有上传进度显示，如图： 但是我上传时没有进度条，直接显示完成状态，但是后台还是在上传中。 直接copy官方代码进来，一模一样的接口放进去。还是不显示。 剩下的只有可能是环境问题，配置了什么插件冲突了。 搜索网上，又人遇到相同的问题。回答原因是： el-upload的源码中 const xhr = new XMLHttpRequest() 而mockjs会重新声...
【Element UI】el-upload 踩的坑
票票的博客
06-16 2546
el-upload 上传文件并显示进度条
使用element-ui 遇到的问题总结（待续...
u014105739的博客
08-18 1059
el-dialog 单独组件：(前提是没有使用新的字段接收value, 直接使用的是prop 里面的默认值value)如果是在close 里面调用 this.$emit('show', false) 点击关闭按钮会报错, 因为el-dialog 源码里面 在close 的时候 会去调用 下面的方法， 会直接修改el-dialog 单独组件的显示值，prop 值 数据流向是单向的，是导致流向冲突，报错,；会有node 版本不兼容问题 (如果升级了node版本，可能会导致node-sass编译报错);....
解决el-upload组件中on-progress钩子函数无法触发，进度条无效的问题
可可爱爱的你吖的博客
03-10 1万+
解决el-upload组件中on-progress钩子函数无法触发，进度条无效的问题 上传文件的时候需要用到进度条，但是on-progress钩子函数无法触发 搜了好多资料都是说是跟模拟数据mock有关，注释掉即可，但是。。。项目里一搜一大堆mock,还要保证后端接口数据调取成功，这。。。。怕不是要一行一行代码的瞅了？ on-progress用不了，用on-change代替（上传过程中都会调用这个方法，file.status有ready,sucess等状态来判断文件是否上传成功），但是我是视频上传到oss上
element-plus el-upload
07-27
element-plus el-upload是Element Plus库中的一个组件，用于实现文件上传功能。\[1\]在前端使用时，可以通过设置属性来限制上传的文件类型，例如只允许上传.pdf格式的文件。可以使用:on-change属性来监听文件变化的事件，可以使用:before-upload属性来进行文件校验，例如校验文件是否是图片或者校验图片大小是否符合要求。\[2\]如果设置:auto-upload属性为false，则上传成功后的回调函数on-success将不会执行。\[2\]完整的代码可以参考Element Plus官网的Upload组件文档，其中包括了各种属性和方法的使用示例。\[2\]\[3\] #### 引用[.reference_title] - *1* [vue3中element-plus Upload上传文件](https://blog.csdn.net/m0_64397933/article/details/126689165)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [element plus中el-upload分片上传文件](https://blog.csdn.net/m0_62317155/article/details/131147772)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值