更新记录

1.1.5（2021-09-22）

1.修复视频预览无封面无法执行回调BUG;

1.1.4（2021-09-22）

1.修复：修复已知BUG

1.1.3（2021-09-22）

1.更新微信小程序加载默认数据示例
查看更多

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.22 app-vue × √ × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ × √ √ √

关于图片视频上传插件组件

如果项目没有使用uView ui框架的同学就不要下载了！！！

如果项目没有使用uView ui框架的同学就不要下载了！！！

如果项目没有使用uView ui框架的同学就不要下载了！！！

1.基于uView ui 1.0 实现的图片和视频上传组件（使用了某些提示组件）；
2.感谢：https://ext.dcloud.net.cn/plugin?id=694；


使用说明

拷贝该组件到 components 目录下之后 在 script 中引用组件

import evanUpload from "@/components/evan-upload/evan-upload.vue";
export default {
   components: {'evan-upload' :evanUpload },
};

在 template 中使用组件：

<evan-upload 
        ref="eupload" 
        :options="uploadOption" 
        @on-over-list="fnOnUploadOverList"
        @on-upload="fnOnUpload">
</evan-upload>

组件参数说明

参数名称 说明 类型 默认值
color 主题颜色 String #ddb880
radius 圆角值 Number 6
cancelColor 取消视频上传按钮文本颜色 String #ddb880
cancelText 取消视频上传按钮文本 String 取消上传
selectImageText 选择图片的提示文本 String 选择图片
selectVideoText 选择视频的提示文本 String 选择视频
fileSuffix 文件的扩展名字段，用于（ loadAllPreview）
手动初始化默认的数据时候的判断类型图片或视频。		 String 'fileType'
autoChangeOptions 是否自动切换数据配置，用于独立配置的情况，
说明：如果独立使用组件，且单独配置上传地
址的情况下，如 v-if 显示图片选择 或者 视频
选择的情况下需要手动调用 fnChangeOptions()		 Boolean true
options 通用上传配置 Object {
url:"",
name:"",
header:{},
formData:{}
}
imageOptions 图片上传配置，覆盖options Object {
url:"",
name:"",
header:{},
formData:{}
}
videoOptions 视频上传配置，覆盖options Object {
url:"",
name:"",
header:{},
formData:{}
}
format 通用的数据格式化 Function null
imgFormat 图片数据格式化，覆盖format（用于数据响应和初始化） Function null
videoFormat 视频数据格式化，覆盖format（用于数据响应和初始化） Function null
disabled 是否禁用上传功能 Boolean false
usePreview 是否启用预览功能 Boolean true
useImage 是否启用图片上传功能 Boolean true
useVideo 是否启用视频上传功能 Boolean true
imgExtension 图片过滤，根据图片扩展名过滤，只能选择数组中包含的扩展名图片 Array ['jpg', 'jpeg', 'png']
imgCoverKey 图片预览时候的键（内部预览） String "thumbnail"
imgLimit 图片上传最大的数量 Number 9
imgSizeLimit 单张图片大小限制 Number 2048kb
imgSizeType 图片压缩配置，默认原图和压缩 Array ['original', 'compressed']
imgSourceType 图片来源，默认相册和相机 Array ['album', 'camera']
videoCoverKey 视频封面的键（通过后端响应返回） String "thumbnail"
videoLimit 视频上传最大的数量 Number 1
videoSizeLimit 单个视频大小限制 Number 102400kb
useVideoCompressed 是否启用视频压缩 Boolean true
videoSourceType 视频来源，默认相册和相机 Array ['album', 'camera']
defaultImageOrVideoList 初始化默认的图片或者视频数据 Array [ ]
defaultImageList 初始化默认的图片数据 Array [ ]
defaultVideoList 初始化默认的视频数据 Array [ ]
showOverLimitTip 是否显示超出上传大小限制的图片 Boolean true
useOverLimitTipModal 是否使用弹窗形式显示超出上传大小限制的图片 Boolean false


内部事件

参数名称 说明
fnChangeOptions 通过ref调用，手动切换配置项（使用vif来显示隐藏组件的情况下，默认只能配置第一个显示的，因此需要手动执行切换）
loadAllPreview 通过ref调用，手动初始化加载默认的视频和图片数据
loadImagePreview 通过ref调用，手动初始化加载默认的图片数据
loadVideoPreview 通过ref调用，手动初始化加载默认的视频数据
clear 通过ref调用，手动清空组件内部所有数据


回调事件

参数名称 说明
@on-over-list 返回超出限制的图片或者视频列表，返回格式如下：

{
images:[ ],
videos:[ ]
}
@on-upload 返回图片或者视频上传完成的回调，格式如下：
{
type: "" , // "all" 、"image"、 "video"
data: {
images:[ ],
videos:[ ]
}
}
@on-loading 监听开始上传的状态
@on-success 监听完成上传的状态，返回默认的响应内容
@on-error 监听上传失败的状态，返回默认的响应内容
@on-pre-video 监听点击视频，返回视频数据项，用于实现视频预览（已删除内置预览功能，提供此回调需要用户自己实现）

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据，服务器地址需用户自己配置填写

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...