uni-app——移动端批量上传文件利器！

2023-08-15 10:18:59

移动端批量上传文件指南：使用 uni-app 轻松实现

在移动端应用程序中，批量上传文件是一个常见的需求，它可以帮助用户一次性上传多个文件，提高效率和用户体验。本文将详细介绍如何在 uni-app 中实现移动端批量上传文件的功能，并提供代码示例和常见问题解答。

安装必要插件

在 uni-app 中，需要安装以下插件来支持移动端文件上传：

Android 平台： Native.js（无需原生插件）
iOS 平台： 全文件上传选择非原生2.0版（需要原生插件支持）

// main.js
import NativeJs from '@/plugins/Native.js'

使用插件选择文件

使用插件选择文件，可以打开系统文件选择器，让用户选择要上传的文件。

NativeJs.openFile({
  filter: [
    {
      name: '文档',
      extensions: ['doc', 'docx', 'pdf']
    },
    {
      name: '表格',
      extensions: ['xls', 'xlsx', 'csv']
    },
    {
      name: '演示文稿',
      extensions: ['ppt', 'pptx']
    }
  ],
  success: (res) => {
    console.log(res.files)
  }
})

上传文件

选择文件后，使用 uni-app 提供的 uni.uploadFile 接口上传文件。

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: res.files[0].path,
  name: 'file',
  formData: {
    'username': 'John Doe'
  },
  success: (res) => {
    console.log(res.data)
  }
})

url： 上传文件的服务器地址
filePath： 本地文件路径
name： 文件在服务器上的名称
formData： 上传文件携带的参数（可选）

重传、删除和多选

uni-app 支持文件上传的重传、删除和多选操作。

重传： 上传失败时，可再次尝试上传。
删除： 上传的文件有误时，可将其删除。
多选： 可一次性选择多个文件进行上传。

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: res.files.map(file => file.path), // 多选文件
  name: 'file',
  formData: {
    'username': 'John Doe'
  },
  success: (res) => {
    console.log(res.data)
  }
})

携带参数

在上传文件时，可以携带一些参数，例如文件的名称、等。

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: res.files[0].path,
  name: 'file',
  formData: {
    'username': 'John Doe',
    'file_name': 'my_file.pdf',
    'file_description': 'This is my file.'
  },
  success: (res) => {
    console.log(res.data)
  }
})

进度监控

在上传文件时，可以监控上传进度。

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: res.files[0].path,
  name: 'file',
  formData: {
    'username': 'John Doe'
  },
  success: (res) => {
    console.log(res.data)
  },
  progress: (progress) => {
    console.log(progress)
  }
})