# 图片上传

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

# 示例代码

<template>
	<view class="container">
		<view class="header">
			<view class="title">upload</view>
			<view class="sub-title">图片上传,需要根据上传接口实际返回数据进行调整 </view>
		</view>
		<view class="tui-box-upload">
			<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
		</view>
	</view>
</template>

# 示例代码

<script>
	//实际使用需要传入上传地址,以及上传接口返回数据进行调整组件
	export default {
		data() {
			return {
				imageData: [],
				//上传地址
				serverUrl: "https://api.thorui.cn/",
				value:[] //初始化图片
			}
		},
		onLoad() {
			//实际应为请求返回数据,此处故意延时,实际中可去除
			setTimeout(()=>{
				//实际开发中图片地址应为网络地址
				this.value=['/static/images/index/logo.png']
			},200)
		},
		methods: {
			result: function(e) {
				console.log(e)
				this.imageData = e.imgArr;
			},
			remove: function(e) {
				//移除图片
				console.log(e)
				let index = e.index
			}
		}
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
value Array 初始化图片路径 []
forbidDel Boolean 禁用删除 false
forbidAdd Boolean 禁用添加 false
serverUrl String 服务器地址 ""
limit Number 限制数 9
sizeType Array original 原图,compressed 压缩图,默认二者都有 ['original', 'compressed']
sourceType Array album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项 ['album', 'camera']
imageFormat Array 上传图片类型,默认为空数组,不限制,格式:['jpg','png','gif'] []
size Number 单张图片大小限制 MB 4
fileKeyName String 项目名,默认为file file
header Object HTTP 请求 Header, header 中不能设置 Referer {}
formData Object HTTP 请求中其他额外的 form data {}

# methods

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

# 示例

# H5预览地址

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

# H5二维码

# 小程序二维码