資訊專欄INFORMATION COLUMN
摘要：當拖動的元素或文本選擇離開有效的放置目標時，會觸發此事件。以及對象在拖放交互期間傳輸的數據。
17-3-2更新： 謝謝@mengdu 補充的關于圖片預覽的另一種更簡單方法 URL.createObjectURL()，具體在文章里補充
之前用Vue做了一個基礎的組件vue-img-inputer，下面就叫vii，記錄下在開發過程中遇到的知識點（都算比較基礎，具體代碼不會貼太多，都可以在項目倉庫里看到）。
上傳文件很多項目都要用到，一些組件庫里(ele/iview...)文件上傳組件都是做成了標配，雖然vii和uploader定位還是有些差別，但實現上都有幾個共同要點：
先上demo樣子要好看點
圖片/文件選擇后預覽
實現拖拽選擇文件
圖片選擇后執行某些動作（譬如uploader的上傳等）
注： 下面有些地方會有些啰嗦，請選擇觀看
基礎首先我們有個文件選擇框，恩，長這樣：
好丑啊！！我們來讓它變好看點：
第一個方法：修改自身CSS這里有一個shadowDOM的概念，簡單的來說就是我們經常用到的一些HTML標準組件（例如viedo，甚至滾動條）其實是由若干個更基礎的DOM由瀏覽器封裝成的，使得我們調用只要一個標簽就夠了，這類也就是WebComponent，這里具體不展開了。我們先來看下file-input的內部是如何的（chrome devtool不設置是看不到的）：
所以呢，這個隱藏在革命碉堡里的button就是我們直接修改file-input樣式但是卻去不掉丑按鈕的元兇！！
解決思路的：我們要么把按鈕移出視線，要么就用這個按鈕修改其樣式。
這里就修改下里面這個type=button的樣式，只提供個思路，代碼：
有沒有想到chrome修改滾動條樣式呢？哈哈，其實是一個道理，現在file-input變這樣了：
好像挺簡單！然而我們看到-webkit-就應該知道兼容性了，這種方法只有safari和chrome笑笑，其他GG，所以自然不能這么干。
第二個方法：給file-input找個替身是這樣，我們可以可以把file-input整個移出視線，再找個找幾個元素，通過點擊這些個元素來代理原file-input的點擊，呼出文件選擇框呢？
自然是可以的，label標注標簽, 給label一個for屬性指向input的唯一id，這樣點擊label就相當于點擊input, 所以我們可以這么寫：
.box {
position: relative;
}
input {
position: absolute;
left: -9999px;
}
/* 使label充滿整個box*/
label {
position: absolute;
top: 0;left: 0;right: 0;bottom: 0;
z-index: 10; /* 這個z-index之后說到*/
}
這樣子做之后，就有一個組件的影子了，其中
因為label充滿了整個box，所以點擊box就可以選擇文件
同時有了box，可以往里面填充任何元素，譬如一個icon
:)
好了，基礎基本上啰嗦完了，正式進入vue的實現(Vue 2.x)：
文件選擇的處理這塊講文件數據的獲取和處理:
v-model如果問你vue里你想要組件綁定一個輸入值的最粗暴的方式是什么？v-model啊！但是這條指令其實是一個語法糖：
...
// 給個img來承擔預覽工作就行了
...
當然了，這東西的兼容性有點捉雞: IE10+, 移動端可以快樂的使用。
URL.createObjectURL文檔在這，這個方法其實很直觀，唯一需要注意的是對臨時路徑的銷毀，來看下代碼：
...
imgPreview (file) {
let self = this;
// 看支持不支持FileReader
if (!file || !URL.createObjectURL) return;
if (/^image/.test(file.type)) {
// 創建一個reader
let this.dataUrl = URL.createObjectURL(file)
}
},
handleFileChange (e) {
// 每次重新選擇都需要進行對上一次的銷毀
this.dataUrl && URL.revokeObjectURL(dataUrl)
...
this.file = inputDOM.files[0];
...
// 在獲取到文件對象進行預覽就行了！
this.imgPreview(this.file);
...
}
...
代碼一下子少了幾行直觀了不少哈哈哈，兼容性也是IE10+， 移動端安卓4.0+，safari6.0+
預覽就這么完成了，下一個我們來說拖拽！
拖拽選擇拖拽說白了就是一個事件監聽，drop事件，我們從頭開始說起
瀏覽器拖拽事件首先，放DragEVent的MDN文檔，重點是下面四個事件及解釋：
dragenter
當拖動的元素或選擇文本輸入有效的放置目標時，會觸發此事件。dragleave
當拖動的元素或文本選擇離開有效的放置目標時，會觸發此事件。dragover
當將元素或文本選擇拖動到有效放置目標（每幾百毫秒）上時，會觸發此事件。drop
當在有效放置目標上放置元素或選擇文本時觸發此事件。
以及dataTransfer對象：在拖放交互期間傳輸的數據。
獲取方法： event.dataTransfer
為什么要關注著幾個呢？因為瀏覽器是自身監聽這幾個拖放事件的！！譬如你把圖片或者pdf拖進瀏覽器里。瀏覽器是會試圖打開這個文件的，所以我們要干掉默認行為，很簡單e.preventDefault()：
...
methods: {
preventDefaultEvent (eventName) {
document.addEventListener(eventName, function (e) {
e.preventDefault();
}, false)
},
},
mounted () {
// 阻止瀏覽器默認的拖拽時事件，測試阻止這幾個就夠了，不放心就全阻止一遍吧
["dragleave", "drop", "dragenter", "dragover"].forEach(e => {
this.preventDefaultEvent(e);
});
}
...
做完這一步，我們只需監聽目標上的drop事件就行了，稍微改造下代碼：
...
其實到這里重要的點都講了，接下來說些其他的
上傳uploader的話選擇完圖片在handleFileChange里直接執行個請求上傳
在父組件里獲取值該怎么傳怎么傳
其他一些東西當頁面中需要多個inputer時，同一個input的id會沖突，所以不指定的情況下需要個唯一id：
...vue
...
input原本可以指定接收的文件格式，會在選擇框出來的時候默認無法選擇非指定格式的文件
移動端允許拍照選擇
最后
暫時就這么多了，完整的源碼在這里
有任何講的不對不好的地方請大力指正！
順便打下廣告，喜歡就不妨star下vue-img-inputer吧！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81791.html
摘要：老姚淺談怎么學鑒于時不時，有同學私信問我老姚，下同怎么學前端的問題。擼碼聽歌，全局控制。 淺析用 js 解析 xml 的方法 由于項目上需要解析 xml，于是各種百度，然后自己總結了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。 裝 X - 建立自己的斗圖網站庫 之前加過一個斗圖群，看到很多經典的表情，然后就收藏到了 QQ， 迫于本屌絲開不起...
摘要：網址功能單圖多圖上傳圖片上傳預覽上傳進度條分組上傳，分組查詢新建分組，刪除分組刪除圖片選擇圖片目錄結構前端利用搭建，中引入子組件。實現分組的新增查詢刪除。利用模塊實現刪除文件功能。 公司要寫一些為自身業務量身定制的的組件，要基于Vue,寫完后擴展了一下功能，選擇寫圖片上傳是因為自己之前一直對這個功能比較迷糊，所以這次好好了解了一下。演示在網址打開后的show.gif中。 使用技術：Vu...
摘要：，至此咱們的微信小程序的簡單使用及了解算是分享完了，畢竟個人也是道行有限，沒有鉆研太深，這些只是本人在實際項目開發過程中用到和總結的經驗，有太多不足或不對的地方，希望大家多多給予指出與改正，咱們一起來共同學習與進步 微信小程序是一種不需要下載安裝即可使用的應用，在國內它在企業推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因為它的備受歡迎度以及越來越被企業所重視，也就形成了咱們開...
摘要：，至此咱們的微信小程序的簡單使用及了解算是分享完了，畢竟個人也是道行有限，沒有鉆研太深，這些只是本人在實際項目開發過程中用到和總結的經驗，有太多不足或不對的地方，希望大家多多給予指出與改正，咱們一起來共同學習與進步 微信小程序是一種不需要下載安裝即可使用的應用，在國內它在企業推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因為它的備受歡迎度以及越來越被企業所重視，也就形成了咱們開...
摘要：，至此咱們的微信小程序的簡單使用及了解算是分享完了，畢竟個人也是道行有限，沒有鉆研太深，這些只是本人在實際項目開發過程中用到和總結的經驗，有太多不足或不對的地方，希望大家多多給予指出與改正，咱們一起來共同學習與進步 微信小程序是一種不需要下載安裝即可使用的應用，在國內它在企業推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因為它的備受歡迎度以及越來越被企業所重視，也就形成了咱們開...
閱讀 2222·2019-08-30 15:53
閱讀 2447·2019-08-30 12:54
閱讀 1194·2019-08-29 16:09
閱讀 726·2019-08-29 12:14
閱讀 750·2019-08-26 10:33
閱讀 2474·2019-08-23 18:36
閱讀 2956·2019-08-23 18:30
閱讀 2116·2019-08-22 17:09
