# evan-uni-upload

**Repository Path**: evan-uniapp-extend/evan-uni-upload

## Basic Information

- **Project Name**: evan-uni-upload
- **Description**: 图片视频上传组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 1
- **Created**: 2021-09-14
- **Last Updated**: 2025-08-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

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

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

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

***

##### **1.基于uView ui 1.0 实现的图片和视频上传组件（使用了某些提示组件）**；

##### 2.感谢：https://ext.dcloud.net.cn/plugin?id=694； 

<br/>

### 使用说明

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

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

在 template 中使用组件：

```html
<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）<br/>手动初始化默认的数据时候的判断类型图片或视频。|String|'fileType'|
|autoChangeOptions|是否自动切换数据配置，用于独立配置的情况，<br/>说明：如果独立使用组件，且单独配置上传地<br/>址的情况下，如 v-if 显示图片选择 或者 视频<br/>选择的情况下需要手动调用 `fnChangeOptions()`|Boolean|true|
|options|通用上传配置|Object|{<br/>     	url:"",<br/>     	name:"",<br/>		header:{},<br/>		formData:{}<br/>}<br/><br/>|
|imageOptions|图片上传配置，覆盖`options`|Object|{<br/>		url:"",<br/>		name:"",<br/>		header:{},<br/>		formData:{}<br/>}|
|videoOptions|视频上传配置，覆盖`options`|Object|{<br/>		url:"",<br/>		name:"",<br/>		header:{},<br/>		formData:{}<br/>}|
|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<String>|['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|

<br/>

### 内部事件

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

<br/>

### 回调事件

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