正文
webuploader插件，我踩得坑
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
我在目前的公司做的项目要么是原生写法去做项目，要么就是vue+webpack做项目，但是vue这部分只是用了模板template，vue其他的都没用。
有一个项目需要做上传图片的功能，老大扔给我一个插件-webuploader。
然后上次做的现在需要改进重做一遍，所以我重新搞了一遍，顺便把踩得坑分享下来。
1.webuploader和其他插件使用一样，有个webuploader.css，webuploader.js，另外再加上一个文件Uploader.swf。所以再使用过程中要把插件的css和js引用一下。Uploader.swf用处在初始化中体现。
注意：我是在vue+webpack的环境下开发项目的，webuploader.css我是在js文件，通过require去引入。但是webuploader.js这个不能通过require去引用，否则会报错，所以webuploader.js我是在index.html中放在body的script标签中引入的，这样就不报错了。
2.uploader初始化。
初始化包含的信息蛮多，Uploader.swf的用处也在初始化中体现，初始化如下。
var uploader = WebUploader.create({
auto: true, // 选完文件后，是否自动上传
swf: 'js/Uploader.swf', // swf文件路径
server: 'upload.php', // 文件接收服务端
pick: '.choose_all', // 选择文件的按钮。可选
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'jpg,jpeg,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
},
thumb: {
type: 'image/jpg,jpeg,png'
},
fileNumLimit: 8, //限制上传个数
fileSingleSizeLimit: 2048000 //限制单个上传图片的大小
});
注：
a.关于选择图片文件，accept中的mimeTypes最好写明你规定的可以上传的文件类型：
mimeTypes: 'image/jpg,image/jpeg,image/png'
如果这部分你是这样写的：
mimeTypes: 'image/*'
那么很不幸的告诉你，你再点击上传图片的时候，页面半天不会有反应，然后过了好长时间才会蹦出弹窗。
b.限制上传单张图片文件大小，单位是B，1M=1024000B。
3.上面我也有说，我用的vue的template模板去写的，然后我有一个popup.vue的文件里面写的是弹窗的template，我本来想把弹窗的css直接写在template的下面，所以我也把我想的这么干了，如下：
<template>
<!--弹窗内容-->
</template>
<style scoped>
.webuploader-pick{width:100%;} /*.....其他css样式*/ </style>
然后后面需要修改webuploader带来的css的时候，没反应了，对，没反应，写的修改样式完全体现不出来，我找了好久怎么解决，结果！！！！我把template模板需要用到的css全部放在一个外部的css中，就像这样
<template>
<!--弹窗内容-->
</template>
<style scoped>
/*引入css*/
@import url("../css/popup.css");
</style>
然后就好了，真是无语了。好在解决了。
4.修改上传图片缩略图的大小，用js去控制，如下：
var uploadimgWidth = $('#uploadimg').width();
console.log(uploadimgWidth);
var thumbnailWidth = 0.235 * uploadimgWidth;
var thumbnailHeight = thumbnailWidth;
具体要改成多大的缩略图，大家依据自己的需求去变，可以是百分比，也可以是px，也可以是其他尺寸单位。
5.图片如果上传失败，需要删除上传失败的文件，代码如下：
uploader.removeFile(uploader.getFile(file.id));
uploader.onFileDequeued = function( file ) {
console.log(uploader.getFiles());
};
注：在操作的时候你会发现这个东西还存在，其实只不过是记录存在而已，已经删除了。不信你试试，可以上传删除后的文件。
6.图片不能作为上传按钮，不管是背景图片还是img写的图片，都不可以，大家可以试一下，我已经验证了N次。如果你把图片作为上传按钮，那么就会出现点击失效的问题，原因如下：
上传部分就会变成一个width和height只有1px的小点点，然后你根本不知道它在哪儿。
如果不得不把图片作为上传按钮，建议在图片外面再套一层标签，div也好，p也罢，都可以。
这个坑我都觉得不可理喻了，下面的坑更加不可理喻。
7.作为上传按钮的标签，如果这个标签上有display：none这个样式存在，辣么也会出现和图片作为上传按钮一样的问题。
上传部分又会变成一个width和height只有1px的小点儿。那么这个问题怎么解决了，也是困惑了我好久啊，在网上搜解决办法，功夫不负有心人啊，终于找到解决办法了：
uploader.refresh();
加上这么一句话，这个问题就解决了。
8.还有一个东西我今天分享一下。
我这边把图片数据上传到后台，然后后台会返回我数据，那么这个数据在哪个地方获取呢？如下：
uploader.on('uploadSuccess', function (file, response) {
console.log(response._raw); //这里可以得到后台返回的数据
$('#' + file.id).addClass('upload-state-done');
imgArr.push(response._raw);
});
response是个对象，如果服务器返回的是json格式，那么正和我们的意。如果不是json格式，response._raw里面可以拿到原始数据。所以，webuploader对于后端返回的数据格式是没有要求的。
