小程序上傳文件詳解

一、小程序上傳文件400

小程序上傳文件時遇到錯誤代碼為400一般是由於提交的參數不符合要求或者請求中缺少必需的參數。

解決方法：

wx.uploadFile({
  url: 'url',
  filePath: 'filePath',
  name: 'name',
  formData: {
    'key': 'value'
  },
  success(res) {
    console.log(res)
  },
  fail(res) {
    console.log(res)
  }
})

正確提交相應的參數即可。

二、小程序怎麼做上傳文件

小程序上傳文件時，我們可以使用wx.uploadFile()來實現。它支持上傳文件和表單數據。下面是一個上傳文件的示例代碼：

wx.chooseImage({
  success(res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'http://example.weixin.qq.com/upload', 
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'key'
      },
      success(res) {
        const data = res.data
      }
    })
  }
})

三、小程序上傳文件生成列表

上傳文件成功後，一般會返迴文件的路徑和名稱。我們可以將這些信息存儲到數組中，再使用wx:for指令來動態渲染生成列表。示例代碼如下：

Page({
  data: {
    fileList: []
  },
  uploadFile() {
    wx.chooseImage({
      success(res) {
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: 'http://example.weixin.qq.com/upload', 
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            'user': 'key'
          },
          success(res) {
            const data = JSON.parse(res.data)
            const fileList = that.data.fileList
            fileList.push({
              name: data.name,
              url: data.url
            })
            that.setData({
              fileList: fileList
            })
          }
        })
      }
    })
  }
})

四、小程序上傳文件至伺服器

小程序上傳文件至伺服器，我們可以使用wx.uploadFile()方法。需要注意的是，文件上傳的URL必須是https協議。示例代碼如下：

wx.chooseImage({
  success(res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.com/upload', 
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'key'
      },
      success(res) {
        const data = JSON.parse(res.data)
        console.log('上傳成功')
      }
    })
  }
})

五、小程序上傳文件返迴路徑

上傳文件成功後，伺服器會返迴文件的URL地址。我們可以使用JSON.parse()方法將返回的數據轉化成JSON對象，從而獲取文件的URL地址。示例代碼如下：

wx.chooseImage({
  success(res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.com/upload', 
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'key'
      },
      success(res) {
        const data = JSON.parse(res.data)
        const url = data.url
        console.log(url)
      }
    })
  }
})

六、小程序上傳文件返迴文件名

上傳文件成功後，伺服器也可以返迴文件的名稱。我們可以使用JSON.parse()方法將返回的數據轉化成JSON對象，從而獲取文件的名稱。

wx.chooseImage({
  success(res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.com/upload', 
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'key'
      },
      success(res) {
        const data = JSON.parse(res.data)
        const fileName = data.name
        console.log(fileName)
      }
    })
  }
})

七、小程序上傳文件卡住了

如果小程序上傳文件過程中出現卡頓或卡住的情況，可能是網路問題導致的。我們可以增加網路請求超時時間，如下：

wx.uploadFile({
  url: 'https://example.com/upload', 
  filePath: tempFilePaths[0],
  name: 'file',
  timeout: 10000,
  success(res) {
    console.log('上傳成功')
  },
  fail(res) {
    console.log('上傳失敗')
  }
})

八、小程序上傳文件限制

上傳文件時我們需要考慮到文件大小和文件類型的限制。我們可以在前端進行文件類型和文件大小的檢測。示例代碼如下：

wx.chooseMessageFile({
  count: 1,
  type: 'file',
  success(res) {
    const size = res.tempFiles[0].size
    const type = res.tempFiles[0].type
    const allowTypes = ['application/pdf', 'application/msword', 'image/jpeg', 'image/png']
    const allowSize = 1024 * 1024 * 10
    if (allowTypes.indexOf(type) === -1) {
      wx.showToast({
        title: '文件類型不支持',
        icon: 'none'
      })
      return
    }
    if (size > allowSize) {
      wx.showToast({
        title: '文件過大',
        icon: 'none'
      })
      return
    }
    wx.uploadFile({
      url: 'https://example.com/upload', 
      filePath: res.tempFiles[0].path,
      name: 'file',
      formData: {
        'user': 'key'
      },
      success(res) {
        console.log('上傳成功')
      }
    })
  }
})

九、小程序上傳文件過大咋辦

如果上傳的文件過大，導致上傳失敗，我們可以在伺服器端進行設置文件大小的限制。例如，在Node.js中我們可以通過設置body-parser的limit參數來限制上傳文件的大小。示例代碼如下：

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

app.use(bodyParser.json({limit: '10mb'}))
app.use(bodyParser.urlencoded({limit: '10mb', extended: true}))

app.post('/upload', function(req, res) {
  console.log(req.body)
  res.send({
    code: 0,
    message: '上傳成功'
  })
})

app.listen(3000)

十、小程序上傳文件大小上限是多少

小程序上傳文件大小上限不太確定，但官方文檔中提到了文件大小限制為8MB。實際上，不同的小程序可能都有自己的限制，具體還需根據開發者平台提供的文檔來確定。