快来get！uni-app 三剑客助力，云端存储文件不再难！

2023-04-14 14:25:13

使用 Uni-App 的文件上传指南：三种方法

在开发 uni-app 应用时，文件上传是一个至关重要的需求。Uni-app 提供了多种文件上传方式，以满足不同的场景要求。本文将深入探讨三种常用的文件上传方法，并提供详细的操作步骤和示例代码，让开发者轻松掌握 uni-app 文件上传的精髓。

原生代码上传

原生代码上传是 uni-app 最基础的文件上传方式，也是最灵活的方式。开发者可以使用 uni.uploadFile 接口直接将文件上传到云存储。该接口支持上传单个或多个文件，并允许开发者自定义上传参数，如文件路径、文件类型和文件大小等。

步骤：

在 uni-app 项目中，引入 uni.uploadFile 接口。
调用 uni.uploadFile 接口，指定文件路径、云存储路径和上传参数。
监听上传进度和结果，并根据需要进行处理。

示例代码：

uni.uploadFile({
  url: 'https://example.com/upload', // 云存储路径
  filePath: '/path/to/file', // 文件路径
  name: 'file', // 文件名
  formData: { // 上传参数
    'token': '123456'
  },
  success: (res) => {
    console.log('文件上传成功', res)
  },
  fail: (err) => {
    console.log('文件上传失败', err)
  }
})

插件方式上传

Uni-app 官方提供了多种文件上传插件，如 uni-upload-plugin 和 uni-file-uploader 等。这些插件封装了 uni.uploadFile 接口，并提供了更友好的使用方式。开发者只需安装并使用这些插件，即可轻松实现文件上传功能。

步骤：

在 uni-app 项目中，安装并引入文件上传插件。
在页面中，使用插件提供的组件或方法选择文件并上传。
监听上传进度和结果，并根据需要进行处理。

示例代码：

import UniUpload from 'uni-upload-plugin'

UniUpload.install(Vue)

export default {
  methods: {
    uploadFile() {
      UniUpload.upload({
        url: 'https://example.com/upload', // 云存储路径
        filePath: '/path/to/file', // 文件路径
        name: 'file', // 文件名
        formData: { // 上传参数
          'token': '123456'
        },
        success: (res) => {
          console.log('文件上传成功', res)
        },
        fail: (err) => {
          console.log('文件上传失败', err)
        }
      })
    }
  }
}

云函数技术上传

Uni-app 的云函数技术提供了一种无服务器的文件上传方式。开发者可以在云函数中使用云存储 SDK 直接将文件上传到云存储。这种方式的好处是，无需搭建服务器和维护基础设施，即可实现文件上传。

步骤：

在 uni-app 项目中，创建云函数。
在云函数中，引入云存储 SDK 并初始化云存储客户端。
使用云存储客户端上传文件到云存储。

示例代码：

const cloud = require('aliyun-cloud-sdk')

exports.main = async (event, context) => {
  const bucket = cloud.storage.bucket('my-bucket')
  const file = bucket.file('path/to/file')

  await file.upload('/path/to/local/file')

  return {
    code: 0,
    message: '文件上传成功'
  }
}