tm-upload 上传图片组件

技巧

upload组件，支持自动上传，api接口上传，添加图片。支持：暂停，继续上传等接口。具体请看属性表和事件表。

🎉目录导航

👉使用方法,跟数1,2,3一样简单

基本示例

<tm-upload :filelist.sync="filelist"></tm-upload>

<script>
	export default {
		data() {
			return {
				filelist:[]
			}
		},
		methods: {}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11

👉完整的示例

可以复制到页面直接运行

<template>
	<view>
		<tm-menubars title="上传图片组件" color="bg-gradient-blue-accent"  :showback="true"></tm-menubars>
		<tm-sheet text color="blue" classname="text-size-n">
			这是一个即简单又实用的上传组件，不用复杂的配置。人性化的数据格式（可自定）
		</tm-sheet>
		<tm-sheet>
			<view class="text-size-s text-weight-b mb-24 ">基本示例</view>
			<tm-upload :filelist.sync="filelist"></tm-upload>
		</tm-sheet>
		<tm-sheet>
			<view class="text-size-s text-weight-b mb-24 ">随意更改行的个数,并且设置为只读</view>
			<tm-upload  :grid="3" :filelist.sync="filelist2"></tm-upload>
			<view class="text-size-s text-weight-b my-24 ">设置为只读</view>
			<tm-upload :disabled="true" :grid="4" :filelist.sync="filelist2"></tm-upload>
		</tm-sheet>
	</view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script>
	export default {
		data() {
			return {
				filelist:["https://picsum.photos/200?v=555","https://picsum.photos/200?v=555"],
				filelist2:[
					"https://picsum.photos/200?v=555",
					"https://picsum.photos/200?v=555"],
			}
		},
		methods: {
			
		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

👉props属性表

属性名称	类型	可选值	默认值	说明
grid	Number	任意数字	5	一行排几个
code	Number	任意数字	0	服务器上传返回数据中表示成功的标志码。
maxsize	Number	任意数字	1010241024	每个图片的大小限制默认限制10mb
img-height	Number	任意数字	0	宽高相等。单位upx,自定义图片高度
max	Number	任意数字	9	最大上传数量
del-direction	String	left/center/right	right	删除按钮的方向
url	String	-	''	上传的地址
filelist	Array	['图片地址']	[]	默认上传显示的图片。如果加上filelist.sync的话，会自动更新数据实现双向绑定。类似于v-model;
url-key	String	''	''	返回数据时，如果返回的是对象。则需要提供对象图像地址的key。默认没有，返回的即是图片地址。
file-name	String	''	'file'	上传时的文件key名。默认file
name1.1.7	String	''	''	提交表单时的的字段名称标识
header	Object	-	{}	上传的头部参数
tips	Boolean	true/false	true	是否显示底部的上传提示语。上传中，失败等
auto-upload	Boolean	true/false	false	是否自动上传，即添加完图片后立即上传。
color	String	任意主题色名称	primary	主题色
model	String	scaleToFill\|aspectFit\|aspectFill widthFix\|heightFix\|top bottom\|center\|left right\|top left\|top right bottom left\|bottom right	center	缩放模式，同官方
showSort	Boolean	true/false	false	是否显示排序功能

filelist和url-key

//filelist的格式可以为：
['默认已上传的图片地址']
//也可以为对象，但需要提供：url-key
[{img:'图片地址'}]  // 此时的url-key = "img"

1
2
3
4
5

👉Ref函数

函数名称	返回参数	返参类型	说明
addfile	-	-	动态添加图片
stopupload	-	-	停止上传
startupload	-	-	开始上传
clearAllFile	-	-	清空所有文件
del	需要传入数组索引index	-	删除一张图片
pushFile1.1.9	动态加入已上传的图片	Array,格式见属性中filelist，与基格式相同如:pushFile(['你的图片地址'])	添加已上传图片

👉事件

事件名称	返回参数	返参类型	说明
@change	返回上传成功的图片列表filelist	Array	每一张图片上传成功都会触发。
@del1.1.9	返回已删除图片的数据	Object	删除每一张都会触发。

filelist结构如下

[
	{
		url: url ,//图片地址
		status: "上传成功" ,//状态文本
		progress: 100 ,//进度
		fileId: 234234,//内部文件唯一id
		statusCode: 3 ,//上传的状态值 0待上传，1上传中，2上传失败，3上传成功。
		data: {自己服务的数据格式},//服务器返回的数据
	}
]
//data如果是对象Object那么一定要提供：url-key，如果服务器返回String地址，则可不提供。

1
2
3
4
5
6
7
8
9
10
11
12

👉高级玩法

提示

如果你想要自己创建完全由api控制的上传功能块。请见uni.$tm.upload函数。
文件位置 uni_modules>tm-vuetify>tool>function>upload.js
由uni.$tm.upload.uploadfile或者this.$tm.upload.uploadfile来创建一个上传的类.


 * 上传文件。
 * 作者：tmzdy
 * 时间：‎2021‎年‎7‎月‎28‎日，‏‎9:14:53
 * 联系：zhongjihan@sina.com
 * @param {Function} chooesefile -- 选择图片上传
 * @param {Function} selected -- 选择图片成功后触发。返回选择后的图片。
 * @param {Function} addfile -- 动态加入预上传的文件。
 * @param {Function} progress -- 进度。
 * @param {Function} fail -- 失败。
 * @param {Function} success -- 成功。
 * @param {Function} complete -- 完成。
 * @param {Function} start -- 开始上传。
 * @param {Function} stop -- 停止上传。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

👉更新日志

2021年8月30日

美化了upload组件的样式，同时新增了主题色color 属性选项。

2021年8月20日14:8:5 初始版本。

tmzdy 于 2022/12/7 编辑报错？ | 评论？

# tm-upload 上传图片组件

# 👉使用方法,跟数1,2,3一样简单

# 👉完整的示例

# 👉props属性表

# 👉Ref函数

# 👉事件

# 👉高级玩法

# 👉更新日志