我在目前的公司做的項目要么是原生寫法去做項目，要么就是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對於后端返回的數據格式是沒有要求的。