作一個簡單的可預覽圖片上傳組件（Vue2.x）

Picture uploader - Vue2.X

將以前項目中使用到的一個文件上傳組件提取出來，單獨作一個圖片上傳組件
（雖然如今有許多功能齊全的上傳組件，可是因爲關乎程序大小和精簡化，因此本身作一個簡化的上傳組件）

項目地址: github地址

預覽圖

忽略圖片的內容，由於都是表情包

How to start

• 下載依賴項/install dependencies

npm install

• 運行服務/run server

npm run test

• 程序默認運行在3000端口: localhost:3000

Description

在全局註冊或者局部註冊完成後使用組件:

<uploader :src="'/api/imgs'"></uploader>

（該組件源碼爲components文件夾下面的uploader.vue文件， 其他文件是搭建了一個簡易的框架和後端配置（爲了測試上傳進度））

• Props:

  src - 後臺文件上傳的地址, 在Demo中就是 '/api/imgs'

• 選取圖片:

  支持PC端多選,若是移植到移動端根據各機型不一樣可能有差別

• 圖片預覽:

  選取圖片後，腳本會將圖片轉成BASE64格式並傳給img標籤顯示

• 上傳

  當點擊上傳按鈕時，將會遍歷全部選中的文件，並添加到自定義的FormData中, 代碼以下:

const formData = new FormData()
this.files.forEach((item) => {
    formData.append(item.name, item.file)
})

上傳的時候上傳進度將會已百分比以及進度條的形式顯示在上傳按鈕的右邊

License

MIT