<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>spring-boot-demo-upload</title>
	<!-- import Vue.js -->
	<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
	<!-- import stylesheet -->
	<link href="https://cdn.bootcss.com/iview/3.1.4/styles/iview.css" rel="stylesheet">
	<!-- import iView -->
	<script src="https://cdn.bootcss.com/iview/3.1.4/iview.min.js"></script>
</head>
<body>
<div id="app">
	<Row :gutter="16" style="background:#eee;padding:10%">
		<i-col span="12">
			<Card style="height: 300px">
				<p slot="title">
					<Icon type="ios-cloud-upload"></Icon>
					本地上传
				</p>
				<div style="text-align: center;">
					<Upload
							:before-upload="handleLocalUpload"
							action="/demo/upload/local"
							ref="localUploadRef"
							:on-success="handleLocalSuccess"
							:on-error="handleLocalError"
					>
						<i-button icon="ios-cloud-upload-outline">选择文件</i-button>
					</Upload>
					<i-button
							type="primary"
							@click="localUpload"
							:loading="local.loadingStatus"
							:disabled="!local.file">
						{{ local.loadingStatus ? '本地文件上传中' : '本地上传' }}
					</i-button>
				</div>
				<div>
					<div v-if="local.log.status != 0">状态：{{local.log.message}}</div>
					<div v-if="local.log.status === 200">文件名：{{local.log.fileName}}</div>
					<div v-if="local.log.status === 200">文件路径：{{local.log.filePath}}</div>
				</div>
			</Card>
		</i-col>
		<i-col span="12">
			<Card style="height: 300px;">
				<p slot="title">
					<Icon type="md-cloud-upload"></Icon>
					七牛云上传
				</p>
				<div style="text-align: center;">
					<Upload
							:before-upload="handleYunUpload"
							action="/demo/upload/yun"
							ref="yunUploadRef"
							:on-success="handleYunSuccess"
							:on-error="handleYunError"
					>
						<i-button icon="ios-cloud-upload-outline">选择文件</i-button>
					</Upload>
					<i-button
							type="primary"
							@click="yunUpload"
							:loading="yun.loadingStatus"
							:disabled="!yun.file">
						{{ yun.loadingStatus ? '七牛云文件上传中' : '七牛云上传' }}
					</i-button>
				</div>
				<div>
					<div v-if="yun.log.status != 0">状态：{{yun.log.message}}</div>
					<div v-if="yun.log.status === 200">文件名：{{yun.log.fileName}}</div>
					<div v-if="yun.log.status === 200">文件路径：{{yun.log.filePath}}</div>
				</div>
			</Card>
		</i-col>
	</Row>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			local: {
				// 选择文件后，将 beforeUpload 返回的 file 保存在这里，后面会用到
				file: null,
				// 标记上传状态
				loadingStatus: false,
				log: {
					status: 0,
					message: "",
					fileName: "",
					filePath: ""
				}
			},
			yun: {
				// 选择文件后，将 beforeUpload 返回的 file 保存在这里，后面会用到
				file: null,
				// 标记上传状态
				loadingStatus: false,
				log: {
					status: 0,
					message: "",
					fileName: "",
					filePath: ""
				}
			}
		},
		methods: {
			// beforeUpload 在返回 false 或 Promise 时，会停止自动上传，这里我们将选择好的文件 file 保存在 data里，并 return false
			handleLocalUpload(file) {
				this.local.file = file;
				return false;
			},
			// 这里是手动上传，通过 $refs 获取到 Upload 实例，然后调用私有方法 .post()，把保存在 data 里的 file 上传。
			// iView 的 Upload 组件在调用 .post() 方法时，就会继续上传了。
			localUpload() {
				this.local.loadingStatus = true;  // 标记上传状态
				this.$refs.localUploadRef.post(this.local.file);
			},
			// 上传成功后，清空 data 里的 file，并修改上传状态
			handleLocalSuccess(response) {
				this.local.file = null;
				this.local.loadingStatus = false;
				if (response.code === 200) {
					this.$Message.success(response.message);
					this.local.log.status = response.code;
					this.local.log.message = response.message;
					this.local.log.fileName = response.data.fileName;
					this.local.log.filePath = response.data.filePath;
					this.$refs.localUploadRef.clearFiles();
				} else {
					this.$Message.error(response.message);
					this.local.log.status = response.code;
					this.local.log.message = response.message;
				}
			},
			// 上传失败后，清空 data 里的 file，并修改上传状态
			handleLocalError() {
				this.local.file = null;
				this.local.loadingStatus = false;
				this.$Message.error('上传失败');
			},
			// beforeUpload 在返回 false 或 Promise 时，会停止自动上传，这里我们将选择好的文件 file 保存在 data里，并 return false
			handleYunUpload(file) {
				this.yun.file = file;
				return false;
			},
			// 这里是手动上传，通过 $refs 获取到 Upload 实例，然后调用私有方法 .post()，把保存在 data 里的 file 上传。
			// iView 的 Upload 组件在调用 .post() 方法时，就会继续上传了。
			yunUpload() {
				this.yun.loadingStatus = true;  // 标记上传状态
				this.$refs.yunUploadRef.post(this.yun.file);
			},
			// 上传成功后，清空 data 里的 file，并修改上传状态
			handleYunSuccess(response) {
				this.yun.file = null;
				this.yun.loadingStatus = false;
				if (response.code === 200) {
					this.$Message.success(response.message);
					this.yun.log.status = response.code;
					this.yun.log.message = response.message;
					this.yun.log.fileName = response.data.fileName;
					this.yun.log.filePath = response.data.filePath;
					this.$refs.yunUploadRef.clearFiles();
				} else {
					this.$Message.error(response.message);
					this.yun.log.status = response.code;
					this.yun.log.message = response.message;
				}
			},
			// 上传失败后，清空 data 里的 file，并修改上传状态
			handleYunError() {
				this.yun.file = null;
				this.yun.loadingStatus = false;
				this.$Message.error('上传失败');
			}
		}
	})
</script>
</body>
</html>