uniapp上传文件完全指南

发布时间：2023-05-18

作为一款跨平台的开发框架，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() 方法封装一个上传图片的组件。组件的作用是封装上传图片的代码，使得在调用时只需传入相应的参数即可实现上传图片功能。 以下为上传图片组件的代码示例：

<template>
  <div>
    <input type="file" :accept="accept" @change="handleFileChange" ref="fileInput">
  </div>
</template>
<script>
export default {
  props: {
    accept: {
      type: String,
      default: 'image/*'
    },
    formData: {
      type: Object,
      default: {}
    },
    url: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: 'file'
    },
    method: {
      type: String,
      default: 'POST'
    }
  },
  methods: {
    handleFileChange (e) {
      const file = e.target.files[0]
      const formData = new FormData()
      formData.append(this.name, file)
      Object.keys(this.formData).forEach(key => {
        formData.append(key, this.formData[key])
      })
      uni.uploadFile({
        url: this.url,
        filePath: file.path,
        name: this.name,
        formData,
        header: {
          'content-type': 'multipart/form-data'
        },
        success: (res) => {
          this.$emit('success', res)
        },
        fail: (res) => {
          this.$emit('fail', res)
        }
      })
    }
  }
}
</script>

八、uniapp上传文件和读取文件

除了上传文件，还可以在 uniapp 中使用 uni.chooseMessageFile() 方法选择文件。该方法包含以下参数：

  • count: 选择文件的数量，默认为 1 个。
  • type: 接收的文件类型，可以是 all（所有类型）、image（图片）、file（除图片以外的文件类型）。 以下代码为使用 uni.chooseMessageFile() 方法选择和读取文件的代码示例：
onFileClick () {
  uni.chooseMessageFile({
    count: 1,
    type: 'file',
    success (res) {
      const file = res.tempFiles[0]
      uni.getFileSystemManager().readFile({
        filePath: file.path,
        success (res) {
          console.log(res.data)
          // do something with file data
        }
      })
    }
  })
}

九、uniapp上传文件的格式

在上传文件时，需要对文件格式进行区分，并根据不同格式进行处理。以下为常见的文件上传格式：

  1. 普通文件上传： 上传文件后缀为 doc、docx、xls、xlsx、ppt、pptx、zip、rar、txt、pdf 等格式的文件。
  2. 图片文件上传： 上传文件后缀为 jpg、jpeg、png、bmp、gif 等格式的文件。
  3. 视频文件上传： 上传文件后缀为 mp4、avi、wmv、mov、rmvb 等格式的文件。
  4. 音频文件上传： 上传文件后缀为 mp3、wma、wav、midi 等格式的文件。 通过以上常见格式的区分，可以为上传文件提供更全面的保障。

总结

在本文中，我们详细讲解了 uniapp 的文件上传功能，包括上传 api、小程序上传文件、上传文件请求异常处理、上传文件到服务器、上传图片、移动端文件上传、上传图片组件等多个方面。在实际项目中，根据需求，可以选择合适的方式进行文件上传。

推荐文章