前端選擇本地文件,並將選擇的文件顯示在界面上進行預覽。可以同時選擇四個文件進行預覽。
想法如下:
前端選擇png、jpg等格式的本地圖片,將圖片以二進制形式發送到後端服務器。後端對二進制圖片進行處理後返回前端服務器鏈接在線圖片,在瀏覽器中打開鏈接即可訪問。然後前端在頁面上渲染這個圖片鏈接進行預覽。
第壹
我們來看看uniapp的官方文檔:
https://uniapp.dcloud.io/api/media/image? id =選擇圖像
類似這樣的。
先寫壹個模擬演示。
1:首先,我使用了colorUI的框架,並將其引入到項目中。
頁面下的vue文件介紹
這樣就不需要寫什麽風格了,用妳寫的就行了。
效果是這樣的。
每張圖片選中後,都會顯示在頁面上。我在這裏設定妳最多可以選擇四張圖片。圖片鏈接用的是臨時blob,然後妳會用後端合作夥伴給的接口把妳的本地二進制文件傳給他。
在chooseImage選擇好圖片後編寫壹個成功的回調函數,在返回函數中添加壹個圖片上傳方法uploadFile、url等參數。
如果請求成功
返回壹個圖片鏈接。
添加接口後,演示如下: