小程序文件上传竟然如此简单，看完这篇文章你就知道了

前端

2023-03-27 11:26:29

小程序文件上传的全面指南

小程序文件上传的限制

小程序的文件上传存在一些限制，其中包括：

单个文件大小不得超过 10MB
一次最多只能上传 10 个文件
文件类型仅限于图片、视频、音频或文档
文件名不能包含特殊字符
文件内容不得违反法律法规或道德准则

小程序文件上传的接口

小程序提供了两种文件上传接口：

wx.uploadFile() ：用于上传文件
wx.chooseMessageFile() ：用于选择文件

小程序文件上传的代码示例

wx.chooseMessageFile({
  count: 10,
  type: 'all',
  success: (res) => {
    wx.uploadFile({
      url: 'https://example.com/upload',
      filePath: res.tempFilePaths[0],
      name: 'file',
      success: (res) => {
        console.log(res.data)
      }
    })
  }
})

Tdesign 小程序文件上传组件

Tdesign 框架提供了小程序文件上传组件，简化了文件上传的过程。该组件支持单文件和多文件上传，并提供多种配置选项，可满足不同的场景需求。

Tdesign 小程序文件上传组件的用法

<template>
  <t-upload
    :action="action"
    :accept="accept"
    :multiple="multiple"
    :limit="limit"
    :show-upload-list="showUploadList"
    @success="onSuccess"
    @error="onError"
  >
    <button type="primary">上传</button>
  </t-upload>
</template>

<script>
import { Upload } from '@tdesign/miniprogram'

export default {
  components: {
    [Upload.name]: Upload
  },
  data() {
    return {
      action: 'https://example.com/upload',
      accept: 'image/jpeg,image/png',
      multiple: true,
      limit: 10,
      showUploadList: true
    }
  },
  methods: {
    onSuccess(res) {
      console.log(res)
    },
    onError(err) {
      console.log(err)
    }
  }
}
</script>