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组件