图片上传

upload,图片上传,需要根据上传接口实际返回数据进行适当调整 。

组件结构

<template>
	<view class="tui-container">
		<view class="tui-upload-box">
			<view class="tui-image-item" v-for="(item,index) in imageList" :key="index">
				<image :src="item" class="tui-item-img" @tap.stop="previewImage(index)" mode="aspectFill"></image>
				<view v-if="!forbidDel" class="tui-img-del" @tap.stop="delImage(index)"></view>
				<view v-if="statusArr[index]!=1" class="tui-upload-mask">
					<view class="tui-upload-loading" v-if="statusArr[index]==2"></view>
					<text class="tui-tips">{{statusArr[index]==2?'上传中...':'上传失败'}}</text>
					<view class="tui-mask-btn" v-if="statusArr[index]==3" @tap.stop="reUpLoad(index)" hover-class="tui-btn-hover"
					 :hover-stay-time="150">重新上传</view>
				</view>
			</view>
			<view v-if="isShowAdd" class="tui-upload-add" @tap="chooseImage">
				<view class="tui-upload-icon tui-icon-plus"></view>
			</view>
		</view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: 'tuiUpload',
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
value Array 初始化图片路径 []
forbidDel Boolean 禁用删除 false
forbidAdd Boolean 禁用添加 false
serverUrl String 服务器地址 ""
limit Number 限制数 9
fileKeyName String 项目名,默认为file file

methods

名称 描述
@complete 上传完成事件,回传上传状态(1-上传成功 2-上传中 3-上传失败)以及图片信息
@remove 删除图片,回传index

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/upload/upload

H5二维码

小程序二维码