當前位置:菜譜大全網 - 菜譜大全 - Uniapp上傳圖片到服務器獲得在線圖片鏈接預覽(實戰)。

Uniapp上傳圖片到服務器獲得在線圖片鏈接預覽(實戰)。

功能要求:

前端選擇本地文件,並將選擇的文件顯示在界面上進行預覽。可以同時選擇四個文件進行預覽。

想法如下:

前端選擇png、jpg等格式的本地圖片,將圖片以二進制形式發送到後端服務器。後端對二進制圖片進行處理後返回前端服務器鏈接在線圖片,在瀏覽器中打開鏈接即可訪問。然後前端在頁面上渲染這個圖片鏈接進行預覽。

第壹

我們來看看uniapp的官方文檔:

https://uniapp.dcloud.io/api/media/image? id =選擇圖像

類似這樣的。

先寫壹個模擬演示。

1:首先,我使用了colorUI的框架,並將其引入到項目中。

頁面下的vue文件介紹

這樣就不需要寫什麽風格了,用妳寫的就行了。

效果是這樣的。

每張圖片選中後,都會顯示在頁面上。我在這裏設定妳最多可以選擇四張圖片。圖片鏈接用的是臨時blob,然後妳會用後端合作夥伴給的接口把妳的本地二進制文件傳給他。

在chooseImage選擇好圖片後編寫壹個成功的回調函數,在返回函數中添加壹個圖片上傳方法uploadFile、url等參數。

如果請求成功

返回壹個圖片鏈接。

添加接口後,演示如下: