Xurh
/
ss_dc_wechat_mini_program_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	<title>图片上传裁剪示例</title>
	<script src="/js/mp_base/base.js"></script>
</head>
<body>
	<div id="app" v-cloak>
		<div class="demo-container">
			<h2>图片和文件上传组件示例</h2>

			<!-- 单图上传 -->
			<h3>1. 圆形头像 (160x160) - 单图</h3>
			<table>
				<tr>
					<th>头像</th>
					<td>
						<ss-upload-image
							v-model="avatar1"
							:width="160"
							:height="160"
							shape="circle"
							:aspect-ratio="1"
							@updated="onImageUpdated"
						/>
						<div style="margin-top: 10px; font-size: 12px; color: #666;">
							当前值: {{ avatar1 || '未上传' }}
						</div>
					</td>
				</tr>
			</table>

			<h3>2. 方形头像 (120x120) - 单图</h3>
			<table>
				<tr>
					<th>艺术照</th>
					<td>
						<ss-upload-image
							v-model="avatar2"
							:width="120"
							:height="120"
							shape="square"
							:aspect-ratio="1"
							@updated="onImageUpdated"
						/>
						<div style="margin-top: 10px; font-size: 12px; color: #666;">
							当前值: {{ avatar2 || '未上传' }}
						</div>
					</td>
				</tr>
			</table>

			<h3>3. 矩形图片 (200x150, 4:3比例) - 单图</h3>
			<table>
				<tr>
					<th>证件照</th>
					<td>
						<ss-upload-image
							v-model="photo"
							:width="200"
							:height="150"
							shape="square"
							:aspect-ratio="4/3"
							:output-width="400"
							:output-height="300"
							@updated="onImageUpdated"
						/>
						<div style="margin-top: 10px; font-size: 12px; color: #666;">
							当前值: {{ photo || '未上传' }}
						</div>
					</td>
				</tr>
			</table>

			<!-- 多图上传 -->
			<h3>4. 多图上传 (最多9张) - 方形80x80</h3>
			<table>
				<tr>
					<th>相册</th>
					<td>
						<ss-upload-image
							v-model="gallery"
							:max="9"
							:width="80"
							:height="80"
							shape="square"
							:aspect-ratio="1"
							@updated="onImageUpdated"
						/>
						<div style="margin-top: 10px; font-size: 12px; color: #666;">
							当前值: {{ Array.isArray(gallery) ? gallery.join(', ') : (gallery || '未上传') }}
						</div>
					</td>
				</tr>
			</table>

			<h3>5. 多图上传 (最多3张) - 圆形100x100</h3>
			<table>
				<tr>
					<th>图集</th>
					<td>
						<ss-upload-image
							v-model="photoSet"
							:max="3"
							:width="100"
							:height="100"
							shape="circle"
							:aspect-ratio="1"
							@updated="onImageUpdated"
						/>
						<div style="margin-top: 10px; font-size: 12px; color: #666;">
							当前值: {{ Array.isArray(photoSet) ? photoSet.join(', ') : (photoSet || '未上传') }}
						</div>
					</td>
				</tr>
			</table>

			<!-- 文件上传 -->
			<h3>6. 单文件上传 (默认5MB)</h3>
			<table>
				<tr>
					<th>文档</th>
					<td>
						<ss-upload-file
							v-model="document"
							@updated="onFileUpdated"
						/>
						<div style="margin-top: 10px; font-size: 12px; color: #666;">
							当前值: {{ document || '未上传' }}
						</div>
					</td>
				</tr>
			</table>

			<h3>7. 多文件上传 (最多5个，限制10MB)</h3>
			<table>
				<tr>
					<th>附件</th>
					<td>
						<ss-upload-file
							v-model="attachments"
							:max="5"
							:max-size="10"
							@updated="onFileUpdated"
						/>
						<div style="margin-top: 10px; font-size: 12px; color: #666;">
							当前值: {{ Array.isArray(attachments) ? attachments.join(', ') : (attachments || '未上传') }}
						</div>
					</td>
				</tr>
			</table>

			<h3>8. 限制文件类型 (仅图片)</h3>
			<table>
				<tr>
					<th>图片文件</th>
					<td>
						<ss-upload-file
							v-model="imageFile"
							accept=".jpg,.jpeg,.png,.gif"
							@updated="onFileUpdated"
						/>
						<div style="margin-top: 10px; font-size: 12px; color: #666;">
							当前值: {{ imageFile || '未上传' }}
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>

	<script>
		SS.ready(function () {
			window.SS.dom.initializeFormApp({
				el: '#app',
				data() {
					return {
						// 单图上传
						avatar1: '',
						avatar2: '',
						photo: '',

						// 多图上传
						gallery: [],
						photoSet: [],

						// 文件上传
						document: '',
						attachments: [],
						imageFile: ''
					};
				},

				methods: {
					onImageUpdated(serverPath) {
						console.log('图片上传成功，服务器路径:', serverPath);
						alert('图片上传成功！路径：' + serverPath);
					},

					onFileUpdated(serverPath) {
						console.log('文件上传成功，服务器路径:', serverPath);
						alert('文件上传成功！路径：' + serverPath);
					}
				}
			});
		});
	</script>

	<style>
		[v-cloak] {
			display: none !important;
		}

		.demo-container {
			padding: 20px;
		}

		h2 {
			text-align: center;
			margin-bottom: 30px;
			color: #333;
		}

		h3 {
			margin-top: 30px;
			margin-bottom: 15px;
			color: #666;
			font-size: 18px;
		}

		table {
			margin-bottom: 30px;
		}
	</style>
</body>
</html>