uniapp上傳文件完全指南

作為一款跨平台的開發框架，uniapp 的文件上傳功能既適用於 H5 端，也適用於小程序端。在本文中，我們將從 api 闡述、上傳文件請求異常處理、上傳文件到服務器等方面進行詳細講解。

一、uniapp上傳文件api

uniapp 提供了 uni.uploadFile() 方法用於文件上傳。該方法包括以下參數：

1、url: 必填項，上傳的服務器地址。

2、filePath: 必填項，要上傳文件資源的路徑。

3、name: 必填項，文件對應的 key , 開發者在服務器端通過這個 key 可以獲取到文件二進制內容。

4、header: HTTP 請求 Header。

5、formData: 上傳文件的請求參數（如其他參數），需要與後台約定接口格式。

舉個例子，以下為上傳單個文件的代碼示例：

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: 'filePath',
  name: 'file',
  success: (res) => {
    console.log('上傳成功', res.data)
  },
  fail: (res) => {
    console.log('上傳失敗', res.data)
  }
})

二、uniapp小程序上傳文件

在 uniapp 中，小程序上傳文件與 H5 端類似，只需調用 uni.uploadFile() 方法即可。需要注意的是，小程序的上傳文件大小限制是 2M（不同小程序平台可能會有所不同）。因此，為了節約空間，建議在上傳前對文件進行壓縮處理。

三、uniapp上傳文件請求異常處理

請求異常可能會出現在以下情況：

1、調用 uni.uploadFile() 方法時傳入的 filePath 不存在。

2、網絡問題造成上傳請求失敗。

3、服務端拒絕上傳請求。

當上傳失敗時，需要對異常進行處理。以下為請求異常處理示例：

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: 'filePath',
  name: 'file',
  success: (res) => {
    console.log('上傳成功', res.data)
  },
  fail: (res) => {
    console.log('上傳失敗', res.data)
    uni.showToast({
      title: '上傳失敗，請稍後重試！',
      icon: 'none'
    })
  }
})

四、uniapp上傳文件到服務器

在上傳文件到服務器之前，需要先確認服務器端的接口是否符合要求。通常，服務器返回的 response 應包含有文件上傳的狀態信息和上傳成功後的文件地址等信息。

在 uniapp 中，可以通過監聽 uni.uploadFile() 的 success 函數，來獲取上傳成功時服務器返回的信息。

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: 'filePath',
  name: 'file',
  success: (res) => {
    console.log('上傳成功', res.data)
    // 請求服務端進行數據庫修改或者其他操作
  },
  fail: (res) => {
    console.log('上傳失敗', res.data)
    uni.showToast({
      title: '上傳失敗，請稍後重試！',
      icon: 'none'
    })
  }
})

五、uniapp上傳圖片

在 uniapp 中上傳圖片與上傳文件基本相同，需要調用 uni.uploadFile() 方法。在選擇圖片時，需先通過 uni.chooseImage() 方法選擇要上傳的圖片，該方法有以下參數：

count: 選擇圖片的數量，默認為 1 張。

sizeType: 指定選擇的圖片大小類型（original 原圖、compressed 壓縮圖），默認為 [‘original’, ‘compressed’]。

sourceType: 指定選擇圖片的來源（album 相冊、camera 照相機），默認為 [‘album’, ‘camera’]。

以下為上傳圖片的代碼示例：

uni.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: (chooseRes) => {
    var tempFilePaths = chooseRes.tempFilePaths

    uni.uploadFile({
      url: 'https://example.com/upload',
      filePath: tempFilePaths[0],
      name: 'file',
      success: (res) => {
        console.log('上傳成功', res.data)
      },
      fail: (res) => {
        console.log('上傳失敗', res.data)
        uni.showToast({
          title: '上傳失敗，請稍後重試！',
          icon: 'none'
        })
      }
    })
  }
})

六、uniapp移動端文件上傳

在 uniapp 移動端中，可通過 H5 的 input 標籤上傳文件。需要調用 uni.createSelectorQuery().select() 方法選擇需要上傳文件的 input 標籤，然後調用一個 .onChange() 方法監聽 input 的 onchange 事件，從而獲取要上傳的文件的信息。

以下代碼為在移動端上傳文件的代碼示例：

uni.createSelectorQuery().select('#file-input').fields({ node: true, size: true })
  .exec((res) => {
    const file = res[0].node.files[0]

    const formData = new FormData()
    formData.append('file', file)

    uni.request({
      url: 'https://example.com/upload',
      method: 'POST',
      data: formData,
      header: {
        'content-type': 'multipart/form-data'
      },
      success: (res) => {
        console.log('上傳成功', res.data)
      },
      fail: (res) => {
        console.log('上傳失敗', res.data)
        uni.showToast({
          title: '上傳失敗，請稍後重試！',
          icon: 'none'
        })
      }
    })
  })

七、uniapp上傳圖片組件

在 uniapp 中，可以使用 uni.uploadFile() 方法封裝一個上傳圖片的組件。組件的作用是封裝上傳圖片的代碼，使得在調用時只需傳入相應的參數即可實現上傳圖片功能。

以下為上傳圖片組件的代碼示例：


原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/285936.html