webuploader插件，我踩得坑

逃离我推掉我的手 2023-06-24 04:52 54阅读 0赞

我在目前的公司做的项目要么是原生写法去做项目，要么就是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次。如果你把图片作为上传按钮，那么就会出现点击失效的问题，原因如下：  
![在这里插入图片描述][20191220165913174.png]  
上传部分就会变成一个width和height只有1px的小点点，然后你根本不知道它在哪儿。

如果不得不把图片作为上传按钮，建议在图片外面再套一层标签，div也好，p也罢，都可以。

这个坑我都觉得不可理喻了，下面的坑更加不可理喻。

7.作为上传按钮的标签，如果这个标签上有display：none这个样式存在，辣么也会出现和图片作为上传按钮一样的问题。  
![在这里插入图片描述][20191220165922875.png]  
上传部分又会变成一个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对于后端返回的数据格式是没有要求的。

[20191220165913174.png]: https://img-blog.csdnimg.cn/20191220165913174.png
[20191220165922875.png]: https://img-blog.csdnimg.cn/20191220165922875.png