快捷導(dǎo)航

uni-app使用uploadFile上傳多張圖片的具體實(shí)現(xiàn)

更新時(shí)間：2023年04月28日 08:51:12 作者：Bonsoir777

在微信小程序中不支持多張圖片上傳,需要做循環(huán)實(shí)現(xiàn)多張圖片上傳,下面這篇文章主要給大家介紹了關(guān)于uni-app使用uploadFile上傳多張圖片的具體實(shí)現(xiàn),需要的朋友可以參考下

前言：

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

一、需求概述

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

二、相關(guān)文檔

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

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

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

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

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

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

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

首先，調(diào)用uni.chooseImage或uni.chooseVideo方法選擇文件，并在成功回調(diào)中獲取文件的本地路徑。
然后，調(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è)簡單的文件上傳例子：

    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)行上傳，然后通過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ù)不一樣，請根據(jù)實(shí)際情況進(jìn)行修改。