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

最新推荐文章于 2022-12-30 09:52:29 发布
原创 最新推荐文章于 2022-12-30 09:52:29 发布 · 1.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #element-ui #el-upload #ie9

因element-ui的upload组件不支持IE9，而项目需要支持，故利用第三方plupload库进行封装。封装效果与element-ui原组件基本相同，给出了GitHub项目链接、组件路径、示例文件路径和plupload库位置，此封装仅供学习参考。

封装目的

因为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

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

 

 

 

 

Vue：利用Plupload插件封装文件上传组件
席木木的博客
06-20 1389
接上回《Plupload插件》，已经尝试将Plupload插件引入到HTML页面中，并进行参数配置，然后联合后端接口进行调试，完成了文件上传的工作。但是在Vue项目的开发中，我们更想将它封装成一个可复用的Vue组件，在使用的时候，只需要快捷引入，并配置参数与回调函数即可。 有兴趣的小伙伴可以也可点击此处，从Gitee上直接拉取项目源码运行。 ...
vue + vue-resource + element-ui项目中遇到的问题总结
ishell1021的博客
03-08 2348
运营智享遇到的问题(前端) vue + vue-resource + element-ui + vue-router + node.js + sass 1. el-table filter tag 使用filter-method处理数据过滤,当该标签下没有数据时标签切换不起作用 解决: 1.用el-table的filter-change方法处理过滤逻辑,而不用el-table-column...
Vue使用Plupload上传插件实现文件切片上传
Bug_MakerQAQ的博客
04-29 2651
Element原生的上传组件很好用，但是不支持分片上传功能，在上传大文件的过程中，直接上传可能因为接口访问时间过长上传中断导致文件上传失败，所以使用Plupload插件来实现文件上传功能。 用到的插件： 1、Plupload（实现文件分片上传） 2、axios（如果需要额外的调用接口可以使用，我的是需要获取uuid，才额外引用的） 3、Element（样式实现） 代码： <template&...
vue中使用Plupload分片上传
weixin_52484354的博客
12-30 1487
vue中使用Plupload分片上传
vue plupload 的使用
weixin_34413802的博客
05-17 1621
1. 首选npm安装plupload 2. 阿里云OSS PHP 安全上传 <template> <div class="imgUpload"> aaa <br> <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div> ...
codeigniter-plupload-chunk-upload:使用plupload在Codeigniter中上传块文件
04-27
而Plupload则是一个强大的JavaScript文件上传库，支持多浏览器兼容性和分块上传功能。当我们需要在CodeIgniter中处理大文件上传时，通常会采用Plupload的分块上传策略，以避免内存溢出和提高上传效率。下面将详细...
vue中使用plupload上传到七牛的js
09-17
自己摸索半天整出来的demo，搞一个积分就是为了提升下门槛，怕大家不珍惜，不懂的再问，结合我得博客文章一起看，好用的请点赞 对应的文章https://blog.youkuaiyun.com/playboyanta123/article/details/82745824
pc端基于element-ui的文件上传，移动端Vue项目用plupload直传阿里云oss，图片上传后再合成动态海报
怎样过不是过的博客
02-27 824
基于element-ui的文件上传功能 <el-upload class="upload-demo" :before-upload="beforeUpload" drag action multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或点击上传</div>...
IE9 elementUI文件上传解决
weixin_34318272的博客
10-16 1425
IE9文件上传（ElementUI） 问题： IE9中无法使用FormData 思路 基于上面的问题，需要使用form表单上传文件 form表单上传会引起页面的刷新，因此需要动态添加一个iframe来避免页面刷新 from表单上传之后需要调用回调，此时需要监听iframe的onload事件 坑 文件上传之后的返回值 Content-...
vue-quill-editor+plupload富文本编辑器实例详解
12-12
1,先给vue项目中下载vue-quill-editor依赖npm install vue-quill-editor --save 2,下载plupload依赖npm install plupload --save 3,在组件中分别引入对应的js import { quillEditor }from &#39;vue-quill-editor&#39; import &#39;@/assets/js/crypto1/crypto/crypto.js&#39; import &#39;@/assets/js/crypto1/hmac/hmac.js&#39; import &#39;@/assets/js/crypto1/sha1/sha1.js&#39;
PLupload上传完整例子
10-29
PLupload上传完整例子，经过测试成功，可以传参数
Plupload多文件上传(调整后)
01-22
之前有下过其他人struts2版本的文件上传，但是在上传大于2M的文件时出现了错误。 之后找到了另外一个Servlet文件，和之前下载的代码整理之后，传上来让大家参考。
Vue的移动端多图上传插件vue-easy-uploader
热门推荐
小昱的博客
11-25 3万+
前言这段时间赶项目，需要用到多文件上传，用Vue进行前端项目开发。在网上找了不少插件，都不是十分满意，有的使用起来繁琐，有的不能适应本项目。就打算自己折腾一下，写一个Vue的上传插件，一劳永逸，以后可以直接使用。目前vue-easy-uploader已上传到GitHub和NPM，使用起来方便简单，不需要繁琐的配置即可投入生产，不过需要后端配合，实现上传接口。本项目GitHub地址: https://
在vue中使用plupload上传图片到七牛(着重解决moxie is not defined问题)
每天都记录一点点！
09-17 9334
       在传统的jquery或者原生JS环境下结合plupload上传到七牛的案例就不说了,一搜一大片，这里重点说说使用了vue之后，在vue环境下要保持相同的体验度上传图片到七牛，下面就是搞了接近两天摸索出来的，过程只想MMP，但是还是得到了满意的结果，算是功夫不负苦心人啊（这个过程真的是坑太多了）！          这个排坑的过程就多说了，搞来搞去就是plupload和qiniu的...
vue plupload 的使用， 阿里云OSS PHP 安全上传
learn8more的博客
07-29 1022
1. 首选npm安装plupload 2. 阿里云OSS PHP 安全上传 <template> <div class="imgUpload"> aaa <br> <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div> <...
vue + elementUI 项目里使用qiniu插件实现上传图片功能
Queen-Shir的博客
01-02 2177
总结：按照七牛官网一步步来就可以实现。 官网链接：https://developer.qiniu.com/kodo/sdk/1283/javascript 具体实现步骤： 1、npm 安装qiniu依赖 npm install qiniu-js 2、npm 安装plupload依赖 npm install plupload --save 3、在上传页面引入插件依赖 var ...
实例：远程、file、vue plupload三种方式上传的视频音频时长
猿计划
05-26 810
两种方式获取file上传和vue plupload上传的视频音频时长file上传视频和音频时获取其时长vue plupload上传视频和音频时获取其时长实例直接通过视频音频源地址获取时长 file上传视频和音频时获取其时长 //获取视音频时长 //file为上传的文件，获取方式请看实例 var url = URL.createObjectURL(file); var audioElement = new Audio(url); var duration = 0; audioElement.addEv
froala + vue + plupload替换自带上传功能
高先生的猫
07-28 1246
froala富文本编辑器 最近由于产品的要求，替换掉老系统的vue ueditor富文本编辑器，换成froala。 如果是vue的话 npm install vue-froala-wysiwyg --save import VueFroala from 'vue-froala-wysiwyg'; 接着去入口文件 main.js引入依赖。 //Import Froala Editor import 'froala-editor/js/plugins.pkgd.min.js';...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值