初识uniapp，如何从手机内部选择文件上传？

2024-01-01 06:52:01

前言
作为一名开发工程师，相信大家在做微信小程序时经常会遇到文件上传功能的需求，微信为我们提供了从用户手机相册选取以及拍摄两种选取图片的接口，还有从聊天会话中选取文件的接口，然而微信并没有提供从手机资源管理器选取文件的接口，那么我们如何解决这个问题呢？本篇文章将为大家提供详细的解决方案，希望对大家有所帮助。

uniapp 的文件上传功能

uniapp 是一个使用 Vue.js 框架开发跨平台应用的框架，它提供了丰富的 API 来帮助开发者快速构建移动应用。在 uniapp 中，文件上传可以通过 uni.uploadFile API 来实现，该 API 的语法如下：

uni.uploadFile(Object object)

object 对象的属性如下：

url: 上传文件的服务器地址。
filePath: 要上传的文件的本地路径。
name: 上传文件时使用的文件名。
header: HTTP 请求头。
formData: HTTP 请求体中的数据。
success: 上传成功时触发的回调函数。
fail: 上传失败时触发的回调函数。
complete: 上传完成时触发的回调函数。

微信小程序的文件上传接口

微信小程序提供了 wx.uploadFile API 来实现文件上传，该 API 的语法如下：

wx.uploadFile(Object object)

object 对象的属性如下：

url: 上传文件的服务器地址。
filePath: 要上传的文件的本地路径。
name: 上传文件时使用的文件名。
header: HTTP 请求头。
formData: HTTP 请求体中的数据。
success: 上传成功时触发的回调函数。
fail: 上传失败时触发的回调函数。
complete: 上传完成时触发的回调函数。

示例代码

以下示例演示了如何使用 uniapp 和微信小程序的文件上传功能来从手机内部选择文件上传：

// 在 uniapp 中选择文件
uni.chooseFile({
  count: 1,
  success: function (res) {
    const filePath = res.tempFilePaths[0]

    // 上传文件到服务器
    uni.uploadFile({
      url: 'https://example.com/upload',
      filePath: filePath,
      name: 'file',
      success: function (res) {
        console.log('上传成功')
      },
      fail: function (res) {
        console.log('上传失败')
      }
    })
  }
})

// 在微信小程序中选择文件
wx.chooseMessageFile({
  count: 1,
  type: 'file',
  success: function (res) {
    const filePath = res.tempFiles[0].path

    // 上传文件到服务器
    wx.uploadFile({
      url: 'https://example.com/upload',
      filePath: filePath,
      name: 'file',
      success: function (res) {
        console.log('上传成功')
      },
      fail: function (res) {
        console.log('上传失败')
      }
    })
  }
})