Tu-view

# Upload 上传

通过点击或者拖拽上传文件

# 点击上传

点击上传
只能上传jpg/png文件，且不超过500kb

通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。

<template>
	<tu-upload
		class="upload-demo"
		action="https://jsonplaceholder.typicode.com/posts/"
		:on-preview="handlePreview"
		:on-remove="handleRemove"
		:before-remove="beforeRemove"
		multiple
		:limit="3"
		:on-exceed="handleExceed"
		:file-list="fileList"
	>
		<tu-button size="small">点击上传</tu-button>
		<div
			slot="tip"
			class="tu-upload__tip"
		>
			只能上传jpg/png文件，且不超过500kb
		</div>
	</tu-upload>
</template>

<script>
	export default {
		data() {
			return {
				fileList: [
					{
						name: "lamp.jpeg",
						url: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
					},
					{
						name: "lamp2.jpeg",
						url: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
					},
				],
			};
		},
		methods: {
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			handleExceed(files, fileList) {
				this.$message.warning(
					`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
						files.length + fileList.length
					} 个文件`
				);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${file.name}？`);
			},
		},
	};
</script>
Expand Copy

# 用户头像上传

使用 before-upload 限制用户上传的图片格式和大小。

<tu-upload
	class="avatar-uploader"
	action="https://jsonplaceholder.typicode.com/posts/"
	:show-file-list="false"
	:on-success="handleAvatarSuccess"
	:before-upload="beforeAvatarUpload"
>
	<img
		v-if="imageUrl"
		:src="imageUrl"
		class="avatar"
	/>
	<i
		v-else
		class="tu-icon-plus avatar-uploader-icon"
	></i>
</tu-upload>

<style>
	.avatar-uploader .tu-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .tu-upload:hover {
		border-color: #409eff;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}
	.avatar {
		width: 80px;
		height: 80px;
		display: block;
	}
</style>

<script>
	export default {
		data() {
			return {
				imageUrl: "",
			};
		},
		methods: {
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === "image/jpeg";
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error("上传头像图片只能是 JPG 格式!");
				}
				if (!isLt2M) {
					this.$message.error("上传头像图片大小不能超过 2MB!");
				}
				return isJPG && isLt2M;
			},
		},
	};
</script>
Expand Copy

# 照片墙

使用 list-type 属性来设置文件列表的样式。

<tu-upload
	action="https://jsonplaceholder.typicode.com/posts/"
	list-type="picture-card"
	:on-preview="handlePictureCardPreview"
	:on-remove="handleRemove"
	:file-list="fileList"
>
	<i class="tu-icon-plus"></i>
</tu-upload>
<tu-modal :visible.sync="modalVisible">
	<img
		width="100%"
		:src="modalImageUrl"
		alt=""
	/>
</tu-modal>
<script>
	export default {
		data() {
			return {
				modalImageUrl: "",
				modalVisible: false,
				fileList: [
					{
						name: "lamp.jpeg",
						url: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
					},
					{
						name: "lamp2.jpeg",
						url: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
					},
				],
			};
		},
		methods: {
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				this.modalImageUrl = file.url;
				this.modalVisible = true;
			},
		},
	};
</script>
Expand Copy

# 文件缩略图

使用 scoped-slot 去设置缩略图模版。

<tu-upload
	action="#"
	list-type="picture-card"
	:auto-upload="false"
>
	<i
		slot="default"
		class="tu-icon-plus"
	></i>
	<div
		slot="file"
		slot-scope="{file}"
	>
		<img
			class="tu-upload-list__item-thumbnail"
			:src="file.url"
			alt=""
		/>
		<span class="tu-upload-list__item-actions">
			<span
				class="tu-upload-list__item-preview"
				@click="handlePictureCardPreview(file)"
			>
				<i class="tu-icon-zoom-in"></i>
			</span>
			<span
				v-if="!disabled"
				class="tu-upload-list__item-delete"
				@click="handleDownload(file)"
			>
				<i class="tu-icon-download"></i>
			</span>
			<span
				v-if="!disabled"
				class="tu-upload-list__item-delete"
				@click="handleRemove(file)"
			>
				<i class="tu-icon-delete"></i>
			</span>
		</span>
	</div>
</tu-upload>
<tu-modal :visible.sync="modalVisible">
	<img
		width="100%"
		:src="modalImageUrl"
		alt=""
	/>
</tu-modal>
<script>
	export default {
		data() {
			return {
				modalImageUrl: "",
				modalVisible: false,
				disabled: false,
			};
		},
		methods: {
			handleRemove(file) {
				console.log(file);
			},
			handlePictureCardPreview(file) {
				this.modalImageUrl = file.url;
				this.modalVisible = true;
			},
			handleDownload(file) {
				console.log(file);
			},
		},
	};
</script>
Expand Copy

# 图片列表缩略图

点击上传
只能上传jpg/png文件，且不超过500kb 
<tu-upload
	class="upload-demo"
	action="https://jsonplaceholder.typicode.com/posts/"
	:on-preview="handlePreview"
	:on-remove="handleRemove"
	:file-list="fileList"
	list-type="picture"
>
	<tu-button size="small">点击上传</tu-button>
	<div
		slot="tip"
		class="tu-upload__tip"
	>
		只能上传jpg/png文件，且不超过500kb
	</div>
</tu-upload>
<script>
	export default {
		data() {
			return {
				fileList: [
					{
						name: "lamp.jpeg",
						url: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
					},
					{
						name: "lamp2.jpeg",
						url: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
					},
				],
			};
		},
		methods: {
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
		},
	};
</script>
Expand Copy

# 上传文件列表控制

通过 on-change 钩子函数来对列表进行控制

点击上传
只能上传jpg/png文件，且不超过500kb 
<tu-upload
	class="upload-demo"
	action="https://jsonplaceholder.typicode.com/posts/"
	:on-change="handleChange"
	:file-list="fileList"
>
	<tu-button size="small">点击上传</tu-button>
	<div
		slot="tip"
		class="tu-upload__tip"
	>
		只能上传jpg/png文件，且不超过500kb
	</div>
</tu-upload>
<script>
	export default {
		data() {
			return {
				fileList: [
					{
						name: "lamp.jpeg",
						url: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
					},
					{
						name: "lamp2.jpeg",
						url: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
					},
				],
			};
		},
		methods: {
			handleChange(file, fileList) {
				this.fileList = fileList.slice(-3);
			},
		},
	};
</script>
Expand Copy

# 拖拽上传

将文件拖到此处，或点击上传
只能上传jpg/png文件，且不超过500kb 
<tu-upload
	class="upload-demo"
	drag
	action="https://jsonplaceholder.typicode.com/posts/"
	multiple
>
	<i class="tu-icon-upload"></i>
	<div class="tu-upload__text">将文件拖到此处，或<em>点击上传</em></div>
	<div
		class="tu-upload__tip"
		slot="tip"
	>
		只能上传jpg/png文件，且不超过500kb
	</div>
</tu-upload>
Expand Copy

# 手动上传

选取文件 上传到服务器
只能上传jpg/png文件，且不超过500kb 
<tu-upload
	class="upload-demo"
	ref="upload"
	action="https://jsonplaceholder.typicode.com/posts/"
	:on-preview="handlePreview"
	:on-remove="handleRemove"
	:file-list="fileList"
	:auto-upload="false"
>
	<tu-button
		slot="trigger"
		size="small"
		>选取文件</tu-button
	>
	<tu-button
		style="margin-left: 10px;"
		size="small"
		@click="submitUpload"
		>上传到服务器</tu-button
	>
	<div
		slot="tip"
		class="tu-upload__tip"
	>
		只能上传jpg/png文件，且不超过500kb
	</div>
</tu-upload>
<script>
	export default {
		data() {
			return {
				fileList: [
					{
						name: "lamp.jpeg",
						url: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
					},
					{
						name: "lamp2.jpeg",
						url: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
					},
				],
			};
		},
		methods: {
			submitUpload() {
				this.$refs.upload.submit();
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
		},
	};
</script>
Expand Copy

# Attribute

参数 说明 类型 可选值 默认值
action 必选参数，上传的地址 string — —
headers 设置上传的请求头部 object — —
multiple 是否支持多选文件 boolean — —
data 上传时附带的额外参数 object — —
name 上传的文件字段名 string — file
with-credentials 支持发送 cookie 凭证信息 boolean — false
show-file-list 是否显示已上传文件列表 boolean — true
drag 是否启用拖拽上传 boolean — false
accept 接受上传的文件类型 (opens new window)（thumbnail-mode 模式下此参数无效） string — —
on-preview 点击文件列表中已上传的文件时的钩子 function(file) — —
on-remove 文件列表移除文件时的钩子 function(file, fileList) — —
on-success 文件上传成功时的钩子 function(response, file, fileList) — —
on-error 文件上传失败时的钩子 function(err, file, fileList) — —
on-progress 文件上传时的钩子 function(event, file, fileList) — —
on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 function(file, fileList) — —
before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 function(file) — —
before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 function(file, fileList) — —
list-type 文件列表的类型 string text/picture/picture-card text
auto-upload 是否在选取文件后立即进行上传 boolean — true
file-list 上传的文件列表, 例如: [{name: 'lamp.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] array — []
http-request 覆盖默认的上传行为，可以自定义上传的实现 function — —
disabled 是否禁用 boolean — false
limit 最大允许上传个数 number — —
on-exceed 文件超出个数限制时的钩子 function(files, fileList) — -

# Slot

name 说明
trigger 触发文件选择框的内容
tip 提示说明文字

# Methods

方法名 说明 参数
clearFiles 清空已上传的文件列表（该方法不支持在 before-upload 中调用） —
abort 取消上传请求 （ file: fileList 中的 file 对象 ）
submit 手动上传文件列表 —

← Form 表单 →