前言：

最近的工作中出現(xiàn)了一個功能點，具體寫法我在前面的文章中已經(jīng)闡述過，不過之前的情況是上傳圖片調(diào)用后端的一個接口，整個表單頁面提交的時候調(diào)用的是另一個接口，我也從中學(xué)到了另外的一種方法，寫到這里分享給大家。

一、需求概述

此次的后端接口需要三個參數(shù)，分別是文章標(biāo)題和文章內(nèi)容以及文章中的圖片，在用戶點擊保存文章時需要這三個參數(shù)的傳遞。那么這個時候其實就已經(jīng)完成了圖片的上傳以及文章的保存。

二、相關(guān)文檔

做這個功能的過程中我更加確定了一件事情，一定要看文檔，看文檔，看文檔?。?！重要的事情

說三遍，使用類似uni-app這種api一定要看相關(guān)描述的官方文檔，人家都說了是官方文檔，就是寫給開發(fā)人員參考使用的，所以就不要去瞎百度，找些亂七八糟的方法，我就遇到了這個坑，后來我還是看了官方文檔解決的這個問題

這里已經(jīng)使用uni-app中uploadFIle將本地臨時資源提交到服務(wù)器中，但是請注意?。。?！app的上傳多張圖片是必須要循環(huán)調(diào)用該api的，小程序暫時不支持上傳多張圖片，如下圖所示：

三、具體實現(xiàn)方法

寫到這里我真的想說句fuck為啥呢，因為我一直知道這個功能其實很簡單，但是官方文檔看的不仔細(xì)，又參考了一些亂七八糟的方法，最終還是回到了參考官方文檔的這個方法，所以大家，恩，記得看文檔！

具體的實現(xiàn)方法和參數(shù)說明

uni-app提供了uni.uploadFile方法來實現(xiàn)文件上傳功能。該方法可以將本地的文件上傳到服務(wù)器，并且可以攜帶額外的參數(shù)。使用uni.uploadFile方法可以方便地實現(xiàn)文件上傳功能，具體步驟如下：

1. 首先，調(diào)用uni.chooseImage或uni.chooseVideo方法選擇文件，并在成功回調(diào)中獲取文件的本地路徑。
2. 然后，調(diào)用uni.uploadFile方法，將文件上傳到服務(wù)器。該方法需要提供如下參數(shù)：

• url：上傳文件的地址
• filePath：要上傳的文件的本地路徑
• name：服務(wù)器接收文件時對應(yīng)的參數(shù)名
• formData：除了文件之外要上傳的數(shù)據(jù)，是一個對象。
• success：上傳成功后的回調(diào)函數(shù)
• fail：上傳失敗后的回調(diào)函數(shù)
• complete：上傳完成后的回調(diào)函數(shù)

下面是一個簡單的文件上傳例子：

    saveArticle(data) {
                data.fi.forEach(item => {
                    uni.uploadFile({
                        url: `${base_url}/basic/pad/ut/article/saveImg`,
                        filePath: item,
                        name: 'fi',
                        formData: {
                            'til': data.til,
                            'con': data.con
                        },
                        header: {
                            'content-type': 'multipart/form-data'
                        },
                        success: (uploadFileRes) => {
                            console.log(uploadFileRes, '=》》》》》');
                            uni.showToast({
                                title: '上傳成功！'
                            })
                        }
                    })
                })
            },

上面的代碼中，我們選擇了一張圖片進行上傳，然后通過uni.uploadFile方法將該圖片上傳到服務(wù)器上。其中，'your_upload_url'是上傳文件的地址，'file'對應(yīng)服務(wù)器端接收文件時的參數(shù)名，formData中包含了上傳文件時攜帶的額外參數(shù)。上傳成功后，可以在success回調(diào)函數(shù)中獲取服務(wù)器返回的數(shù)據(jù)。

需要注意的是，uni.uploadFile方法在小程序和APP端調(diào)用時參數(shù)不一樣，請根據(jù)實際情況進行修改。

總結(jié)

到此這篇關(guān)于uni-app使用uploadFile上傳多張圖片的文章就介紹到這了,更多相關(guān)uni-app用uploadFile上傳多張圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論