dropzone上傳
1. 求js多張圖片上傳，可預覽右上角帶刪除圖標的代碼
可以用dropzone.js試試，官網： http://www.dropzonejs.com/，你看看就知道了。上面有一個demo，你試試
2. 鎬庝箞浣跨敤Dropzone 蹇閫熶笂浼犲浘鐗
鎬庝箞浣跨敤Dropzone 蹇閫熶笂浼犲浘鐗
銆妗堜緥鐨勫師鏂囪風湅鏂囨湯閾炬帴錛屾垜鍦ㄨ繖鍐嶇畝鍗曚粙緇嶄竴涓嬪惂銆傞栧厛浣犻渶瑕佹湁鐢ㄨ繃涓冪墰浜戝瓨鍌錛屽叧浜庤繖嬈懼浘搴婁駭鍝佸氨涓嶉渶瑕佹垜璇︾粏浠嬬粛浜嗗惂錛岀櫨搴︿竴澶у爢鏂囩珷錛岀湅鐪嬪氨濂斤紝榪欓噷闇瑕佹垜浠鍦ㄥ畨瑁呰嚜鍒 Dropzone Action 鍚庯紝涓 Action 閲岄厤緗涓婁綘鍦ㄤ竷鐗涢噷寤虹珛鐨勭┖闂翠俊鎮浠ュ強 Access Key銆丼ecret Key 浠ュ強絀洪棿鍩熷悕銆
銆鍏蜂綋姝ラわ細
涓嬭澆騫跺畨瑁 Dropzone Qiniu 鎻掍歡
瀹夎 Qiniu 鐨 Ruby 搴擄紝鍦ㄥ懡浠よ屾墽琛 sudo gem install qiniu
鍚鐢ㄦ彃浠跺悗鍦ㄩ厤緗紿楀彛鍐呭～鍐欎竷鐗涚┖闂寸殑鍚勭嶄俊鎮錛
server: 浣犲啀涓冪墰涓婄殑絀洪棿鍚
username: 涓冪墰鐨刟ccess_key
password: 涓冪墰鐨剆ecret_key
remote path(鍙閫): 鏈鍦板悓姝ュ浘鐗囩殑鐩褰曪紝濡傛灉浣犲笇鏈涙湰鍦頒篃瀛樹竴浠藉浘鐗囷紝閫変竴涓鍦板潃鍗沖彲
root url: 涓冪墰鐨勫叕鍏遍摼鎺ユ牴鐩褰(涔熷氨鏄榛樿ょ殑鍩熷悕鎴栬呰嚜瀹氫箟鍩熷悕)
涔嬪悗灝嗗浘鐗囩洿鎺ユ嫋鍏 Dropzone 鍦 Menubar 鐨勬搷浣滃彴鑿滃崟涓涓冪墰鎻掍歡鐨勫浘鏍囦笂鍗沖彲寮濮嬩笂浼犲浘鐗囷紝涓婁紶瀹屾瘯鍚庣郴緇熶細鏈夋秷鎮閫氱煡鍛婄煡涓婁紶瀹屾瘯銆
浣嗗湪瀹為檯鎿嶄綔涓錛屼綘鍙鑳戒細鍍忔垜涓鏍烽亣鍒 Qiniu Ruby 搴撴棤娉曟ｅ父瀹夎呯殑鎯呭喌錛屾ゆ椂浣犻渶瑕佺『璁や竴涓嬬郴緇 Ruby 鐨勫畨瑁呯洰褰曪紝鏈夌殑鏃跺欏ス浼氬畨瑁呭湪 /usr/bin/ 閲岋紝涔熸湁鏃跺欎細鍦 /usr/local/bin/錛屾ゆ椂浣犻渶瑕佸埌 Dropzone Qiniu 鎻掍歡 閲岀殑 Action.rb 閲岀紪杈戜竴涓嬫敞閲婃佃惤鏈鍚庝竴琛岄噷瀵 RubyPath 鐨勮礬寰勶紝濡備笅鍥撅紝涓嶇劧浣犲湪浣跨敤鎻掍歡鏃朵細閬囧埌浠ヤ笅綾諱技鐨勯敊璇鎻愮ず
銆/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require鈥: cannot load such file 鈥 qiniu (LoadError)
from /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require鈥
from /Users/sguotao/Library/Application Support/Dropzone 3/Actions/Qiniu.dzbundle/action.rb:16:in `鈥
from /Applications/Dropzone 3.app/Contents/Actions/lib/run鈥 `load鈥
from /Applications/Dropzone 3.app/Contents/Actions/lib/run鈥 `鈥
銆榪樻湁鐨勬椂鍊欙紝浣犳墽琛 sudo gem install qiniu 榪欏彞鍛戒護鏃朵細閬囧埌涓婇潰榪欑嶆彁紺猴紝榪欒存槑榛樿ょ殑 Gem Source 閲岀殑緗戝潃闇瑕佸仛浠ｇ悊璁塊棶錛屽湪 Qiniu Ruby 鍖呯殑瀹夎呭懡浠ゆ坊鍔 鈥搵ttp-proxy http://浠ｇ悊鏈嶅姟鍣:絝鍙ｏ紝涔熷氨鏄 sudo gem install 鈥搵ttp-proxy http://浠ｇ悊鏈嶅姟鍣:絝鍙 qiniu;鎴栬呬綘涔熷彲浠ュ垹闄 Gem Source 閲岄粯璁ょ殑 https://rubygems.org/錛屼嬌鐢ㄦ窐瀹濇彁渚涚殑 Ruby 闀滃儚絝欙細https://ruby.taobao.org(娉ㄦ剰瑕佺敤 https)銆
閰嶇疆 Gem Sources 鐨勬柟娉曟槸錛
鏄劇ず褰撳墠浣跨敤鐨剆ources錛歡em sources
娣誨姞涓涓猻ource錛歡em sources -a url鍦板潃
鍒犻櫎涓涓猻ource錛歡em sources -r url鍦板潃
鏇存柊source cache錛歡em sources -u
鎼炲畾涔嬪悗灝卞彲浠ユｅ父涓嬭澆 Qiniu Ruby 鍖呬簡錛屼笉榪囧湪瀹夎呯殑榪囩▼涓浣犲彲鑳借繕浼氶亣鍒板洶闅撅紝灝卞儚涓嬮潰榪欑嶏細
銆鍙嶆ｅ氨鏄 bla bla 涓澶у爢錛屾垜鍦ㄧ綉涓婄湅鍒扮殑瀹夎 XCode Command Line Tools 灝辮兘鎼炲畾浜嗭紝鍦ㄧ粓絝鎵ц gcc 鈥搗ersion 鍗沖彲錛屼箣鍚庨兘 OK 浜嗭紝鍙浠ユｅ父浣跨敤鎻掍歡銆
3. dropzone控制項回顯多張圖片問題
var myDropzone = this;
var mockFile = {
name: filePath, //需要顯示給用戶的圖片名
type: '.gif,.jpg,.png,.jpeg'//圖片文件類型
};
myDropzone.addFile.call(myDropzone, mockFile);//添加mock圖片到顯示區域
myDropzone.options.thumbnail.call(myDropzone, mockFile, filePath);//添加數據源給mock圖片
4. web前端上傳圖片的幾種方法
下面給你介紹3種web前端上傳圖片的方法：
1.表單上傳
最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。
ajax無刷新上傳
Ajax無刷新上傳的方式，本質上與表單上傳無異，只是把表單里的內容提出來採用ajax提交，並且由前端決定請求結果回傳後的展示結果。
3.各類插件上傳
當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統的表單上傳很難實現這些功能，我們可以藉助現有插件完成。
如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等，大家可根據項目實際需求選擇適合的插件。
5. vue文件上傳插件有哪些
vue-upload-component - Vuejs文件上傳組件
vue-core-image-upload - 輕量級的vue上傳插件
vue-dropzone - 用於文件上傳的Vue組件