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/n/285936.html