mp-uploader 文件上传

可支持图片和视频上传，接入图片裁剪、风险审核

代码演示

Click me to view the code

<script setup>
import {reactive, ref} from 'vue'

const getPath = () =>
  `https://cloud-minapp-41176.cloud.ifanrusercontent.com/1qB8OhgCuu86jSAA.jpg?t=${Math.random() * 1000}`

const file = ref([
  {
    url: getPath(),
  },
])

const formData = reactive({
  media1: [
    {
      url: getPath(),
    },
    {
      thumbPath: 'https://cloud-minapp-41176.cloud.ifanrusercontent.com/1qisBXMv3j7rFILx',
      url: 'https://cloud-minapp-41176.cloud.ifanrusercontent.com/1qisBQysELCGtgqO.mp4',
    },
  ],
  media2: [
    {
      url: getPath(),
    },
    {
      thumbPath: 'https://cloud-minapp-41176.cloud.ifanrusercontent.com/1qisBXMv3j7rFILx',
      url: 'https://cloud-minapp-41176.cloud.ifanrusercontent.com/1qisBQysELCGtgqO.mp4',
    },
  ],
  files1: [
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
  ],
  files2: [
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
    {
      url: getPath(),
    },
  ],
})
</script>

<template>
  <view class="page">
    <mp-nav-bar title="mp-uploader" />
    <uni-card :isShadow="false" isFull>
      <text class="uni-h6">文件上传组件，接入微信安全检测、知晓云文件系统</text>
    </uni-card>
    <uni-section title="基础使用" type="line">
      <view class="title">图片上传，默认 9 张</view>
      <view class="example-body">
        <mp-uploader v-model="file" categoryId="648bff1e840a816344586ad2" />
      </view>
    </uni-section>

    <uni-section title="限制只上传一张" type="line">
      <view class="example-body">
        <mp-uploader categoryId="648bff1e840a816344586ad2" :limit="1" />
      </view>
    </uni-section>

    <uni-section title="关闭微信安全检测" type="line">
      <view class="example-body">
        <mp-uploader categoryId="648bff1e840a816344586ad2" :censorImage="false" />
      </view>
    </uni-section>

    <uni-section title="限制只从相册选图" type="line">
      <view class="example-body">
        <mp-uploader categoryId="648bff1e840a816344586ad2" :sourceType="['album']" />
      </view>
    </uni-section>

    <uni-section title="裁剪图片" type="line">
      <view class="example-body">
        <mp-uploader
          v-model="file"
          categoryId="648bff1e840a816344586ad2"
          :cropAttrs="{width: 500}"
          cropImage
        />
      </view>
    </uni-section>

    <uni-section title="同时上传图片和视频" type="line">
      <view class="example-body">
        <mp-uploader
          v-model="formData.media1"
          categoryId="648bff1e840a816344586ad2"
          :cropAttrs="{width: 500}"
          cropImage
          :mediaType="['image', 'video']"
        />
      </view>
    </uni-section>

    <uni-section title="预览状态" type="line">
      <view class="example-body">
        <mp-uploader
          v-model="formData.media2"
          categoryId="648bff1e840a816344586ad2"
          :mediaType="['image', 'video']"
          readonly
        />
      </view>
    </uni-section>

    <uni-section title="单行上传（自动滚动）" type="line">
      <view class="example-body">
        <mp-uploader
          v-model="formData.files1"
          autoScrollTo
          categoryId="648bff1e840a816344586ad2"
          inline
          :mediaType="['image', 'video']"
        />
      </view>
    </uni-section>

    <uni-section title="断点续传" type="line">
      <view class="example-body">
        <mp-uploader v-model="formData.files2" categoryId="648bff1e840a816344586ad2" isMultipart />
      </view>
    </uni-section>
  </view>
</template>

<style scoped>
.page {
  padding-bottom: 100rpx;
}

.example-body {
  padding: 10rpx;
}

.title {
  padding-left: 20rpx;
}

.btn {
  margin-top: 20rpx;
}
</style>

API

Props

Prop name	Description	Type	Values	Default
v-model	绑定值，双向绑定	array	-	[]
value	绑定值	array	-	[]
mediaType	媒体类型，可多选	array	image, video	['image']
sourceType	来源类型，可多选	array	camera, message, album	['camera', 'message', 'album']
showUpload	显示上传按钮	boolean	-	true
showVideoCover	上传视频时截取第一帧为封面，会额外上传封面图片，如果设置为 false 则显示 video 默认的封面	boolean	-	true
readonly	是否只读	boolean	-	false
inline	是否单行显示	boolean	-	false
autoScroll	单行显示时，自动滚动定位到上传按钮位置	boolean	-	true
limit	最大可上传数量	number|string	-	9
maxImageSize	图片最大尺寸（单位 byte）	number	-	mb2byte(10)
maxVideoSize	视频最大尺寸（单位 byte）	number	-	mb2byte(300)
maxVideoTime	视频最大时长（单位：秒）	number	-	300
censorImage	是否审核图片	boolean	-	true
cropImage	是否裁剪图片	boolean	-	false
cropAttrs	裁剪图片参数	object	-	{ borderColor: '#cdcdcd', buttonColor: '#909090', quality: '0.6' }
imageStyles	图片样式	object	-	{ height: '160rpx', width: '160rpx' }
baasCategoryId	上传分类 ID	string	-	''
isMultipart	开启断点续传	boolean	-	false
beforeUpload	上传前的自定义操作	func|null	-	null

Expose

select

({mediaType: string[], sourceType: string[]}) => Promise<void>

选择文件

Events

Event name	Properties	Description
uploading		当上传中时触发
uploaded	files object[] - 当前文件列表	当上传完毕时触发
update:modelValue	files object[] - 当前文件列表	当文件列表发生变更时触发
change	files object[] - 当前文件列表	当文件列表发生变更时触发

Slots

Name	Description	Bindings
default	添加文件按钮

源码

组件 • 示例