前言：

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

一、需求概述

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

二、相關(guān)文檔

做這個(gè)功能的過(guò)程中我更加確定了一件事情，一定要看文檔，看文檔，看文檔?。。≈匾氖虑?/p>

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

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

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

寫(xiě)到這里我真的想說(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)行修改。

總結(jié)

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

最新評(píng)論