扩展组件之2：使用plupload重新封装vue element-ui upload组件，使它支持IE9

最新推荐文章于 2022-12-30 09:52:29 发布
最新推荐文章于 2022-12-30 09:52:29 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： vue 文章标签： vue element-ui el-upload ie9
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fly_Du_/article/details/88721422
版权

封装目的

因为element-ui 提供的upload组件不支持IE9，但是编者的项目需要支持到IE9 ，没办法，只能自己封装一个，利用第三方的plupload库进行封装 plupload官网

封装出来的效果基本跟element-ui原来的差不多 GitHub项目链接vue-element-plus-ui

组件路径：src\components\base\uploadPlus.vue 示例文件路径：src\exmple\upload.vue plupload库位置：static\pupload

组件封装仅供学习参考之用，如果想要用在您生成环境，建议详细阅读理解代码

 

 

 

 

is_duke
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue实现上传图片并预览效果 html+css+js_html、vue中使用原生js实现图片上传,并展示上传之后的结果
2401_84182271的博客
04-17 490
×
codeigniter-plupload-chunk-upload:使用plupload在Codeigniter中上传块文件
04-27
codeigniter-plupload-chunk-upload 使用在上传块文件 特征 逐块上传文件并在最后合并，从而提高系统性能。 配置块大小
vue中使用plupload上传到七牛的js
09-17
自己摸索半天整出来的demo，搞一个积分就是为了提升下门槛，怕大家不珍惜，不懂的再问，结合我得博客文章一起看，好用的请点赞 对应的文章https://blog.csdn.net/playboyanta123/article/details/82745824
vue中使用Plupload分片上传
weixin_52484354的博客
12-30 1153
vue中使用Plupload分片上传
Vue：利用Plupload插件封装文件上传组件
席木木的博客
06-20 1065
接上回《Plupload插件》，已经尝试将Plupload插件引入到HTML页面中，并进行参数配置，然后联合后端接口进行调试，完成了文件上传的工作。但是在Vue项目的开发中，我们更想将它封装成一个可复用的Vue组件，在使用的时候，只需要快捷引入，并配置参数与回调函数即可。 有兴趣的小伙伴可以也可点击此处，从Gitee上直接拉取项目源码运行。 ...
vue plupload 的使用
weixin_34413802的博客
05-17 1537
1. 首选npm安装plupload 2. 阿里云OSS PHP 安全上传 <template> <div class="imgUpload"> aaa <br> <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div> ...
yii2-plupload:yii2扩展，支持大文件上传
05-18
yii2-plupload 一个Yii2模块/小部件，用于上传文件 安装 安装此扩展的首选方法是通过 。 无论运行 php composer.phar require --prefer-dist icherisher/yii2-plupload "*" 或添加 "icherisher/yii2-plupload": ...
vue-quill-editor+plupload富文本编辑器实例详解
12-12
2,下载plupload依赖npm install plupload --save 3,在组件中分别引入对应的js import { quillEditor }from 'vue-quill-editor' import '@/assets/js/crypto1/crypto/crypto.js' import '@/assets/js/crypto1/hmac/...
yii2-plupload:Yii2 插件扩展
07-13
yii2-plupload Yii2 扩展，提供简单的小部件。 安装 通过 composer 安装包： composer require soju/yii2-plupload:dev-master 演示模块 将此添加到您的模块配置中： 'plupload' => [ 'class' => 'soju\yii2...
Vue使用Plupload上传插件实现文件切片上传
Bug_MakerQAQ的博客
04-29 2383
Element原生的上传组件很好用，但是不支持分片上传功能，在上传大文件的过程中，直接上传可能因为接口访问时间过长上传中断导致文件上传失败，所以使用Plupload插件来实现文件上传功能。 用到的插件： 1、Plupload（实现文件分片上传） 2、axios（如果需要额外的调用接口可以使用，我的是需要获取uuid，才额外引用的） 3、Element（样式实现） 代码： <template&...
PLupload上传完整例子
10-29
PLupload上传完整例子，经过测试成功，可以传参数
Plupload多文件上传(调整后)
01-22
之前有下过其他人struts2版本的文件上传，但是在上传大于2M的文件时出现了错误。 之后找到了另外一个Servlet文件，和之前下载的代码整理之后，传上来让大家参考。
OSS浏览器扩展程序，可根据区域更改AWS导航栏的颜色-JavaScript开发
05-26
OSS版本的“ AWS控制台区域颜色”扩展，一种浏览器扩展，可根据区域更改AWS导航栏的颜色。AWS Navbar Region Color Extension一个OSS版本的“ AWS控制台区域颜色”扩展，一种浏览器扩展根据区域更改AWS导航栏的颜色安装Firefox Chrome分支的原因其他扩展名不是开源的其他扩展名被AWS方面的更新所破坏添加缺少的新区域添加对Firefox的支持使用颜色选择器代替要求用户输入十六进制的内容其他扩展名需要允许它的权限
IE9 elementUI文件上传解决
weixin_34318272的博客
10-16 1376
IE9文件上传（ElementUI） 问题： IE9中无法使用FormData 思路 基于上面的问题，需要使用form表单上传文件 form表单上传会引起页面的刷新，因此需要动态添加一个iframe来避免页面刷新 from表单上传之后需要调用回调，此时需要监听iframe的onload事件 坑 文件上传之后的返回值 Content-...
Vue的移动端多图上传插件vue-easy-uploader
热门推荐
小昱的博客
11-25 3万+
前言这段时间赶项目，需要用到多文件上传，用Vue进行前端项目开发。在网上找了不少插件，都不是十分满意，有的使用起来繁琐，有的不能适应本项目。就打算自己折腾一下，写一个Vue的上传插件，一劳永逸，以后可以直接使用。目前vue-easy-uploader已上传到GitHub和NPM，使用起来方便简单，不需要繁琐的配置即可投入生产，不过需要后端配合，实现上传接口。本项目GitHub地址: https://
在vue中使用plupload上传图片到七牛(着重解决moxie is not defined问题)
每天都记录一点点！
09-17 9055
       在传统的jquery或者原生JS环境下结合plupload上传到七牛的案例就不说了,一搜一大片，这里重点说说使用了vue之后，在vue环境下要保持相同的体验度上传图片到七牛，下面就是搞了接近两天摸索出来的，过程只想MMP，但是还是得到了满意的结果，算是功夫不负苦心人啊（这个过程真的是坑太多了）！          这个排坑的过程就多说了，搞来搞去就是plupload和qiniu的...
vue plupload 的使用， 阿里云OSS PHP 安全上传
learn8more的博客
07-29 922
1. 首选npm安装plupload 2. 阿里云OSS PHP 安全上传 <template> <div class="imgUpload"> aaa <br> <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div> <...
vue3上传图片解析身份证，银行卡
m0_55969466的博客
02-25 2058
遇到需求需要上传身份证，或者银行卡 传的时候需要传一个file 文件 在这里 我用了组件 也可以用npm包pluplad（具体我没使用过） Plupload 上传详细讲解，Plupload 多实例上传，Plupload多个上传按钮 —技术博客 1、html部分 这里我用到了vant3的组件 链接：Vant 3 - Mobile UI Components built on Vue <div class="idcardCont" v-if="mustInfo.u...
vue3 使用 plupload
最新发布
09-08
在Vue3中使用Plupload的步骤如下： 1. 首先，你需要在项目中引入Plupload。你可以通过在GitHub上下载并安装Plupload，或者使用npm install --save plupload命令安装Plupload依赖。 2. 在Vue组件中实例化一个Plupload对象，并传入一个配置参数对象来进行各种配置。你可以根据需要配置上传方式、限制文件类型、压缩图片等功能。 3. 调用Plupload实例对象的init()方法进行初始化。这将初始化Plupload并准备好进行文件上传。 4. 在Plupload实例对象上注册你需要的事件。Plupload提供了多种事件，可以在文件选取、上传进度、上传完成等不同阶段与Plupload进行交互。 以下是一个在Vue3中使用Plupload的示例代码： ```vue <template> <div> <plupload :file-list="theDialogForm.attachJsonArr" :limit="1" biz-type="trainModule" accept-files=".zip,.rar,.xml,.txt,.pdf,.docx,.doc,.xlsx,.xls,.ppt,.pptx,.mp4,.mp3,.gif,.png,.jpg,.jpeg,.bmp" @onChange="handleFileChange" /> </div> </template> <script> import Plupload from 'plupload' // 引入Plupload库 export default { data() { return { theDialogForm: { attachJsonArr: [] // 文件列表 } } }, mounted() { const uploader = new Plupload({ // 实例化Plupload对象 // 配置参数 }) uploader.init() // 初始化Plupload // 注册事件 uploader.bind('FilesAdded', (uploader, files) => { // 当文件添加到上传队列时触发的事件 }) // 更多事件... }, methods: { handleFileChange(fileList) { console.log('handleFileChange', fileList) } } } </script> ``` 以上代码示例中，我们在Vue组件中引入了Plupload库，实例化了Plupload对象，并在mounted钩子函数中进行了初始化和事件的注册。同时，我们定义了一个handleFileChange方法来处理文件变化事件。你可以根据自己的需求进行相应的配置和事件处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值