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对于后端返回的数据格式是没有要求的。

我最初写这篇文章的地址是：http://www.cnblogs.com/winteronlyme/p/7008703.html

webuploader插件，我踩得坑原创