记一次项目使用webuploader爬坑之旅

最新推荐文章于 2024-07-04 16:14:38 发布
最新推荐文章于 2024-07-04 16:14:38 发布
阅读量3.4k 收藏
点赞数
分类专栏： vue 文章标签： vue webuploader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z719725611/article/details/81028344
版权
本文记录了一次在VUE项目中使用webuploader遇到的问题及解决方案，包括IE9的严格模式错误、Flash版本问题、上传按钮无响应、跨域问题和HTTPS支持。通过解决这些问题，实现了在IE9上的正常上传功能。
摘要由CSDN通过智能技术生成

   因前端页面开发使用的为VUE开发，又要支持IE9，遂只有基于webuploader封装一个上传组件。地址：https://github.com/z719725611/vue-upload-web，现在版本比项目中的组件版本要低，后期会更新npm版本。

     webuploader使用html上传，如果低版本就是用flash上传，上传原理就不一一描述了，感兴趣的同学可以到webuploader官网查看。

    使用html上传，如谷歌，IE11等基本上并没有什么问题，但是IE9使用flash上传的时候，遇到了一些坑：

1.严格模式下Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

最低0.47元/天 解锁文章
zbao007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于vue 中 使用 webuploader 遇到的坑及解决方案，本文以分片上传为例解说，上传压缩包大小为2G左右在项目中实测（一）...
aichi6419的博客
11-29 1858
首先说一下vue中使用webuploader该如何引入调用 　　1. 肯定是安装操作， 本人用的是淘宝镜像 cnpm i webuploader -S 如果你没有安装淘宝镜像，则使用 npm i webuploader -S 　　2. 引入操作,在具体的vue组件中引入 ， import Webuploader from 'webuploader', 这时候需要引入你写的css样式...
webUploader Demo源码下载
04-17
web Uploader demo (有修改) 百度云及我遇到的问题汇总: https://blog.csdn.net/wx11408115/article/details/70215714
webuploader上传错误提示，错误补充
前端小狮的博客
11-09 1万+
//错误 为 F_EXCEED_SIZE var uploader = WebUploader.Uploader({ swf: 'path_of_swf/Uploader.swf', ........... }); uploader.on("error",function(err){ //文档介绍 // 当validate不通过时，会以派送错误事件的形式通知调用者。通过...
webuploader怎么上传文件夹
最新发布
aryasei的专栏
07-04 298
PHP如何上传超大文件，文件/大文件上传功能实现(JS+PHP)全过程，PHP实现浏览器端大文件分片上传，PHP结合WEBUPLOADER断点续传的实现，PHP 大文件上传解决方案(500M以上)，PHP大文件上传(切片)分享，HTML+PHP超大视频上传实例，PHP批量上传大文件技巧,PHP批量上传大文件,PHP实现批量上传图片的技巧，PHP结合WEB UPLOADER插件实现分段，接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表。
webuploader插件坑及使用心得
热门推荐
一路奔跑94的博客
06-21 3万+
我在目前的公司做的项目要么是原生写法去做项目，要么就是vue+webpack做项目，但是vue这部分只是用了模板template，vue其他的都没用。有一个项目需要做上传图片的功能，老大扔给我一个插件-webuploader。然后上次做的现在需要改进重做一遍，所以我重新搞了一遍，顺便把踩得坑分享下来。1.webuploader和其他插件使用一样，有个webuploader.css，webuploa...
WebUploader 选择文件按钮点击无效，无法弹出文件选择对话框问题解决（两种情况）
旭东怪的博客
11-02 4156
1 问题描述 点击选择文件按钮，无法弹出文件选择对话框。 2 问题分析 文件选择按钮初始化之前的HTML代码： <div id="selectFile">选择文件</div> WebUploader初始化之后的HTML代码： 由此可以看出是id为selectFile的div标签内的第二个div子标签引起的，原因就是宽度width和高度height都为1px，导致选择文件按钮点击无效。 3 解决办法 将#selectFile（div标签）的div子标签宽高都设为.
在Vue中使用WebUploader时一次上传触发多个上传操作问题
Vernal_F的专栏
09-29 714
问题描述： 在Vue中将使用WebUploader实现的上传功能封装成一个单独的上传组件，但是在多个页面使用上传组件的时候，在页面之前跳转（非刷新）会导致多次注册WebUploader，最终出现一次上传触发多个上传操作。 解决方法： 在每次注册的时候先做一次删除。具体代码： api文档: http://fex.baidu.com/webuploader/doc/index.html ...
Uncaught TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mod
m0_46322755的博客
05-04 5092
Uncaught TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mod
Uncaught TypeError: 'caller', 'callee', 'arguments' properties may not be accessed on strict mode
zhou_mu_mu_xi的博客
01-02 5366
控制台报错： Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode 这是js 文件中用到了 ‘caller’, ‘callee’, and ‘arguments’ 东西，但是， webpack 打包好的 bundle.js 中，默认是启用严格模式的，...
webuploader 断点续传
dxyzhbb的博客
10-10 866
webuploader 实现 断点续传 webuploader是百度开发的上传文件前端控件。可支持html5和flash，因此对浏览器的兼容比较好。因为需要用到ie8，ie8不支持html5， 所以必须支持flash上传。 断点续传原理： 1）将大分件分片上传，比如每次传送3m。 2）后台在上传完毕后将分片上传的文件合并为一个文件。 技术要求： 1）前端页面支持分件拆分读取。html5是支持的。I...
arguments.callee弃用与webuploader
weixin_30809173的博客
05-09 158
使用最近使用ueditor的时候 谷歌浏览器下上传相同图片两次后第三次上传不了 而且取消了后会出现一个错误的图片。使用的ueditor是1.4.3 后来发现 这个是 webuploader插件的问题。这个版本的ue是0.1.2后台在github里面查阅资料发现 webuploader里面最新版本是0.1.8-alpha版本 看到这么一句话 。但是 并不是 e.target.files.le...
vue项目进入mui.js报错 Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not be access
AnTiforsec的博客
03-13 2087
MUI组件的一些坑 在引入MUI组件时出现的异常： Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode functions or the arguments objects for calls to them 原因：MUI的tab-top-webv...
vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...
Sophie_U的博客
07-28 1万+
以在vue中引入mui第三方库为例： 虽然针对vue，有单独的vue-mui库可以使用，但因习惯了直接使用第三方库，且单独的mui更全面一点，所以想要作为第三方js库来引用。 问题： 在vue的main.js中引入mui.min.js时，报错。如上，单独在main.js或者任意组件中通过import 方式引入mui时都会报这个错。原因：babel在将js文件转码为ES5时，默认使用严格模式，而在
webuploader 使用心得
日积月累的质变
02-02 2万+
1、基本用法 $(function(){…});   jQuery(function($) {…});  $(document).ready(function(){…})这三个的作用是一样的，本人比较需要用第一种、书写简单。文档载入完成后执行的函数。 [html] view plain copy //一个div用来存放文件上传时的信息   /
关于WebUploader多图上传的几个注意点
小栋哟
06-26 2827
1，不少人用webuploader多图上传时，点击”暂停上传“，并没有效果。暂停上传按钮不好使，那就往下看吧。 暂停上传有两个模式 当前的上传继续，下个文件不开始上传 当前上传直接中断。 一般来说用的是第二种，这种情况下，在调用stop的时候需要加个true传进去。 uploader.stop(true); //将其设置为true即可 2.关于设置上传图片或文件大小，多张图个数以及...
webuploader 跨域问题
程序猿踩坑集锦
04-17 1万+
项目中用到了上传组件 ，经过对比决定使用Webuploader 。详细使用文档请参考官方文档：官方文档。这里只介绍垮与问题。 Webuploader上传，会执行2个请求；一个option请求，一个post（根据你的webuploader的配置method 值决定），需要在option请求中对响应头进行处理，post响应头也进行响应的处理。 第一种：以servlet为例： @WebServle
webuploader兼容IE9注意事项
sindlly的博客
11-11 1万+
webuploader是非常好用的文件上传工具，支持HTML5和flash方式上传文件，并可以对文件的类型，大小等进行限定。但是在兼容IE9时需注意一下几点：         1、实例化时： var uploader = WebUploader.create({ // swf文件路径 swf: 'you_file_path/Uploader.swf',
vue使用webuploader
07-28
Vue使用WebUploader可以按照以下步骤进行： 1. 在index.html中引入WebUploader的js文件。可以使用以下代码将webuploader.min.js文件引入到index.html中： ```html <script src="./static/webuploader-0.1.5/webuploader.min.js"></script> ``` \[1\]\[2\] 2. 在Vue组件的mounted生命周期内实例化WebUploader并进行配置。可以在App.vue的mounted函数中添加以下代码： ```javascript mounted: function() { var uploader = WebUploader.create({ // swf文件路径 swf: '../static/webuploader-0.1.5/Uploader.swf', // 文件接收服务端 server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮 // 内部根据当前运行是创建，可能是input元素，也可能是flash pick: '#picker', // 不压缩image，默认如果是jpeg，文件上传前会压缩一把再上传 resize: false, // 是否开启自动上传 auto: false }); } ``` \[3\] 这样就完成了Vue中使用WebUploader的配置。你可以根据自己的需求进行进一步的配置和使用。 #### 引用[.reference_title] - *1* *2* [vue结合WebUploader插件实现大文件分片上传](https://blog.csdn.net/qq_33414883/article/details/104550359)[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^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [在Vue项目中使用WebUploader实现文件上传](https://blog.csdn.net/weixin_42205101/article/details/96736956)[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^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值