您好,登錄后才能下訂單哦!
這篇“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)完成了圖片的上傳以及文章的保存。
做這個(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í)不支持上傳多張圖片,如下圖所示:
寫到這里我真的想說(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)文件上傳功能,具體步驟如下:
首先,調(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è)簡(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è)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。