一文掌握UniApp三端文件上传：H5、微信小程序、安卓APP轻松搞定

2023-06-08 19:39:53

跨平台文件上传：适用于 UniApp 的三端通用方案

准备工作

在开始 UniApp 文件上传之旅之前，请确保您已安装开发环境并准备好测试文件。

UniApp 文件上传步骤

导入文件上传组件

通过在需要上传文件的页面中导入 uploader 组件，开始文件上传过程：

import { uploader } from '@vant/weapp/dist/uploader';

配置上传参数

使用 uploader 组件的 props 属性，配置上传参数，例如：

uploadUrl： 文件上传地址
headers： 附加到请求的标头
name： 文件输入字段的名称
max-size： 最大文件大小

监听文件上传事件

通过 uploader 组件的 events 属性，监听文件上传事件：

<uploader @success="uploadSuccess" @fail="uploadFail" />

处理文件上传结果

在文件上传事件中，根据结果进行相应处理，例如：

上传成功： 保存文件上传地址
上传失败： 显示错误信息

不同平台注意事项

不同平台在文件上传方面存在差异：

H5： 使用 FormData 对象
微信小程序： 使用 wx.uploadFile 方法
安卓 APP： 使用原生 API 或第三方库

示例代码

以下示例展示了如何在 H5 中使用文件上传：

<template>
  <uploader
    :url="uploadUrl"
    :headers="headers"
    :name="name"
    :max-size="max_size"
  >
    <van-button type="primary" @click="upload">上传</van-button>
  </uploader>
</template>

<script>
import { uploader } from '@vant/weapp/dist/uploader';

export default {
  components: {
    [uploader.name]: uploader,
  },
  data() {
    return {
      uploadUrl: 'https://example.com/upload',
      headers: { 'Content-Type': 'multipart/form-data' },
      name: 'file',
      max_size: 1024 * 1024 * 2,
    };
  },
  methods: {
    upload() {
      this.$refs.uploader.upload();
    },
    uploadSuccess(res) {
      console.log('上传成功', res);
    },
    uploadFail(err) {
      console.log('上传失败', err);
    },
  },
};
</script>