uview-plus

# Upload 上传

该组件用于上传图片场景

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基础用法

  • 可以通过设置fileList参数(数组，元素为对象)，显示预置的图片。其中元素的url属性为图片路径
<template>
	<up-upload
		:fileList="fileList1"
		@afterRead="afterRead"
		@delete="deletePic"
		name="1"
		multiple
		:maxCount="10"
	></up-upload>
</template>

<script setup>
import { ref } from 'vue';

const fileList1 = ref([]);

// 删除图片
const deletePic = (event) => {
  fileList1.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList1.value.length;
  lists.map((item) => {
    fileList1.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    let item = fileList1.value[fileListLen];
    fileList1.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result,
    });
    fileListLen++;
  }
};

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
        user: 'test',
      },
      success: (res) => {
        setTimeout(() => {
          resolve(res.data.data);
        }, 1000);
      },
    });
  });
};
</script>

<template>
	<up-upload
		:fileList="fileList1"
		@afterRead="afterRead"
		@delete="deletePic"
		name="1"
		multiple
		:maxCount="10"
	></up-upload>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
			}
		},
		methods:{
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}

	}
</script>

# 上传视频

  • 通过设置accept='video'属性，将上传改为视频上传。
<up-upload
	:fileList="fileList2"
	@afterRead="afterRead"
	@delete="deletePic"
	name="2"
	multiple
	:maxCount="10"
	accept="video"
></up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
	return{
		fileList2: [],
	}
}

# 文件预览

  • 通过设置:previewFullImage="true"'属性，达到文件预览的目的。
<up-upload
	:fileList="fileList3"
	@afterRead="afterRead"
	@delete="deletePic"
	name="3"
	multiple
	:maxCount="10"
	:previewFullImage="true"
></up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
	return{
		fileList3: [{
			url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
		}],
	}
}

# 隐藏上传按钮

  • 上传数量等于maxCount所规定的数据时，隐藏上传按钮。
<up-upload
	:fileList="fileList4"
	@afterRead="afterRead"
	@delete="deletePic"
	name="4"
	multiple
	:maxCount="2"
></up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
	return{
		fileList4: [{
				url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
			}
		],
	}
}

# 限制上传数量

  • 同上，规定maxCount的数据时。
<up-upload
	:fileList="fileList5"
	@afterRead="afterRead"
	@delete="deletePic"
	name="5"
	multiple
	:maxCount="3"
></up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
	return{
		fileList5: [],
	}
}

# 自定义上传样式

  • 添加image以自定义上传样式，达到身份证，银行卡等不同场景需求。
<up-upload
	:fileList="fileList6"
	@afterRead="afterRead"
	@delete="deletePic"
	name="6"
	multiple
	:maxCount="1"
	width="250"
	height="150"
>
	<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" 
	mode="widthFix" style="width: 250px;height: 150px;"></image>
</up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
	return{
		fileList6: [],
	}
}

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Props

参数 说明 类型 默认值 可选值
accept 接受的文件类型，file只支持H5（只有微信小程序才支持把accept配置为all、media） String image all | media | image | file | video
capture 图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头 String | Array ['album', 'camera'] -
compressed 当accept为video时生效，是否压缩视频，默认为true Boolean true false
camera 当accept为video时生效，可选值为back或front String back -
maxDuration 当accept为video时生效，拍摄视频最长拍摄时间，单位秒 Number 60 true
uploadIcon 上传区域的图标，只能内置图标 String camera-fill -
uploadIconColor 上传区域的图标的颜色 String #D3D4D6 -
useBeforeRead 是否启用(显示/隐藏)组件 Boolean false true
previewFullImage previewFullImage Boolean true false
maxCount 最大选择图片的数量 String | Number 52 -
disabled 是否启用(显示/隐藏)组件 Boolean false true
imageMode 预览上传的图片时的裁剪模式，和image组件mode属性一致 String aspectFill -
name 标识符，可以在回调函数的第二项参数中获取 String file -
sizeType original 原图，compressed 压缩图，默认二者都有，H5无效 Array<String> ['original', 'compressed'] -
multiple 是否开启图片多选，部分安卓机型不支持 Boolean false true
deletable 是否显示删除图片的按钮 Boolean true false
maxSize 选择单个文件的最大大小，单位B(byte)，默认不限制 String | Number Number.MAX_VALUE -
fileList 显示已上传的文件列表 Array - -
uploadText 上传区域的提示文字 String - -
width 内部预览图片区域和选择图片按钮的区域宽度，单位rpx，不能是百分比，或者auto String | Number 80 -
height 内部预览图片区域和选择图片按钮的区域高度，单位rpx，不能是百分比，或者auto String | Number 80 -
previewImage 是否在上传完成后展示预览图 Boolean true false

# Methods

此方法如要通过ref手动调用

名称 说明
afterRead 读取后的处理函数
beforeRead 读取前的处理函数

# Slot

slot中您可以内置任何您所需要的样式。

名称 说明
-(default) 自定义上传样式
-(trigger) 自定义上传样式

# Events

回调参数中的event参数，为当前删除元素的所有信息，index为当前操作的图片的索引，name为删除名称，file包含删除的url信息

事件名 说明 回调参数
afterRead 读取后的处理函数 (file, lists, name)，错误信息
beforeRead 读取前的处理函数 (file, lists, name)，错误信息
oversize 图片大小超出最大允许大小 (file, lists, name), name为通过props传递的index参数
clickPreview 全屏预览图片时触发 (url, lists, name)，url为当前选中的图片地址，index为通过props传递的index参数
delete 删除图片 传递index 回调 event 参数 包含index，file，name

← Code 验证码输入框 →