天天看點

移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件

js+css實作手機端的多圖檔上傳,為了友善使用,css和js都未内聯,為性能建議使用時改為外聯;

如要用到pc端,直接去掉px轉換為rem的js代碼,修改機關即可;

因multiple在安卓手機中不相容,是以在安卓上隻能一次選中一張圖檔,在iOS系統上可以實作多圖檔的上傳;

一、預覽圖

移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件

圖檔發自簡書App

預覽及下載下傳位址:

http://www.jq22.com/jquery-info11638

檔案下載下傳

項目中我們經常會遇到需要下載下傳檔案的功能,靜态的檔案資源可以使用 a 标簽下載下傳,動态的則需要我們通過 js 處理發送請求,然後将傳回的url給a标簽的url屬性既可。

代碼如下

移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件

二、檔案上傳

通過input 标簽的 type=file來實作

移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件

然後通過監聽change事件擷取到上傳檔案的資訊,并通過此資訊向後端發送請求,存儲資訊。

檔案上傳到雲伺服器

1、需要引入dingding-oss檔案

移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件

2.在上傳檔案的元件中執行個體化OSS

移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件

4.通過client.multipartUpload(生成的命名空間,擷取到的圖檔對象)函數上傳到雲端(此案例是一次上傳一張圖檔的案例,當上傳多張圖檔的時候,函數的第二個參數為目前的圖檔資訊即fileLIst[i]對象)

移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件

通過window.URL.createObjectURL(上傳檔案資訊對象)生成url連結;可以在前端展示

三、vue多圖檔上傳元件

先看效果

移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件

html實作:

移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件

js實作

移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件
移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件
移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件
移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件

css實作

移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件
移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件
移動端實作多圖上傳、檔案上傳及下載下傳和vue多圖檔上傳元件

用上邊的vue元件上傳的圖檔,發送給服務端的是base64格式的圖檔,後端經過轉碼之後存儲。

檔案的git位址:

https://github.com/wangAlisa/-vue

繼續閱讀