uni-app怎么使用uploadFile上傳多張圖片

這篇“uni-app怎么使用uploadFile上傳多張圖片”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“uni-app怎么使用uploadFile上傳多張圖片”文章吧。

一、需求概述

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

二、相關(guān)文檔

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

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

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

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

寫到這里我真的想說(shuō)句fuck為啥呢，因?yàn)槲乙恢敝肋@個(gè)功能其實(shí)很簡(jiǎn)單，但是官方文檔看的不仔細(xì)，又參考了一些亂七八糟的方法，最終還是回到了參考官方文檔的這個(gè)方法，所以大家，恩，記得看文檔！

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

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

1. 首先，調(diào)用uni.chooseImage或uni.chooseVideo方法選擇文件，并在成功回調(diào)中獲取文件的本地路徑。

2. 然后，調(diào)用uni.uploadFile方法，將文件上傳到服務(wù)器。該方法需要提供如下參數(shù)：

• url：上傳文件的地址

• filePath：要上傳的文件的本地路徑

• name：服務(wù)器接收文件時(shí)對(duì)應(yīng)的參數(shù)名

• formData：除了文件之外要上傳的數(shù)據(jù)，是一個(gè)對(duì)象。

• success：上傳成功后的回調(diào)函數(shù)

• fail：上傳失敗后的回調(diào)函數(shù)

• complete：上傳完成后的回調(diào)函數(shù)

下面是一個(gè)簡(jiǎn)單的文件上傳例子：

    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: '上傳成功！'
                            })
                        }
                    })
                })
            },

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

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

以上就是關(guān)于“uni-app怎么使用uploadFile上傳多張圖片”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。