vi-upload

微信小程序上传插件 upload

Usage no npm install needed!

<script type="module">
  import viUpload from 'https://cdn.skypack.dev/vi-upload';
</script>

README

vi-upload

使用

npm i vi-popup

使用微信开发者工具构建NPM并使用NPM模块

在页面的js文件中引入

// 请使用相对路径
import viUpload from './../../miniprogram_npm/vi-upload/index.js'
Page({
  viUpload,
  data: {},
  triggerToUpload() {
    // config 
    this.viUpload({
      url: '',
      success: function () {
        // to do 
      }
    })
  }
})

Config Props

Props Data Type description 选项 default Value file type 是否扩展
count Number 上传图片数量 选填 1 用于图片上传 同微信图片上传接口count
name String 服务端用于接受数据的字段 选填 picture 用于图片与视频 同微信upload接口name
fileType String 要上传的文件类型 选填 img 用于图片与视频 插件扩展接口
sizeType StringArray 要上传的图片大小 选填 ['original', 'compressed'] 适用于图片 同微信图片上传接口sizeType
url String 上传路径 必填 '' 用于图片和视频 同微信upload接口url
formData String 文件上传的额外信息 选填 {} 用于图片和视频 同微信upload接口formData
sourceType StringArray 要上传的资源来源,是从相册中选择还是拍摄 选填 ['album', 'camera'] 用于图片和视频 同微信图片与视频上传接口sourceType
compressed Boolean 是否压缩所选的视频源文件,默认值为true,需要压缩 选填 true 用于视频 同微信视频上传接口compressed
maxDuration NUmber 拍摄视频最长拍摄时间,单位秒。最长支持 60 秒 选填 60 用于视频 同为视频上传接口 maxDuration

Config Handle

生命周期函数 方法说明 返回值
beforeUpload 用于视频上传,在视频上传之前会返回该视频的一些信息,返回值与微信视频chooseVideo接口返回值一致 Object
success 上传成功方法 服务端返回值
fail 上传失败方法,可能会在文件选择的时候取消上传、服务端出错都由该接口提供失败信息 失败信息

beforeUpload Returns Value

key Data Type description value
width Number 视频宽度信息
height Number 视频高度信息
thumbTempFilePath String 视频封面图
tempFilePath String 本地视频资源
duration Number 视频时长信息

Bug&&Tips

  • 阅读该文档之前请先具备微信上传API的相关知识
  • 该插件封装了微信的图片上传与视频上传接口、其余文件类型并没有封装,如有需要,后续会添加。
  • 插件的config配置是基于微信提供的接口之上稍微添加了几个。config完全匹配微信的API接口

版本信息

  • v0.0.1 第一个beat版本
  • v0.0.2 编辑组件说明文档