Picture uploader - Vue2.X
將之前項(xiàng)目中使用到的一個(gè)文件上傳組件提取出來(lái)，單獨(dú)做一個(gè)圖片上傳組件
（雖然現(xiàn)在有許多功能齊全的上傳組件，但是由于關(guān)乎程序大小和精簡(jiǎn)化，所以自己做一個(gè)簡(jiǎn)化的上傳組件）
源碼地址:
預(yù)覽圖
組件預(yù)覽圖
忽略圖片的內(nèi)容，因?yàn)槎际潜砬榘?/p>
How to start
- 下載依賴項(xiàng)/install dependencies
npm install
- 運(yùn)行服務(wù)/run server
npm run test
- 程序默認(rèn)運(yùn)行在3000端口: localhost:3000
Description
在全局注冊(cè)或者局部注冊(cè)完成后使用組件:
<uploader :src="'/api/imgs'"></uploader>
（該組件源碼為components文件夾下面的uploader.vue文件， 其余文件是搭建了一個(gè)建議的框架和后端配置（為了測(cè)試上傳進(jìn)度））
-
Props:
src - 后臺(tái)文件上傳的地址, 在Demo中就是 '/api/imgs'
-
選取圖片:
支持PC端多選,如果移植到移動(dòng)端根據(jù)各機(jī)型不同可能有差異
-
圖片預(yù)覽:
選取圖片后，腳本會(huì)將圖片轉(zhuǎn)成BASE64格式并傳給img標(biāo)簽顯示
-
上傳:
當(dāng)點(diǎn)擊上傳按鈕時(shí)，將會(huì)遍歷所有選中的文件，并添加到自定義的FormData中, 代碼如下:
const formData = new FormData()
this.files.forEach((item) => {
formData.append(item.name, item.file)
})
上傳的時(shí)候上傳進(jìn)度將會(huì)已百分比以及進(jìn)度條的形式顯示在上傳按鈕的右邊
License
MIT
