Upload 文件上传

				 
 <template>
 	<zk-theme type="page" :padding="30" showBack navbarTitle="图片选择上传">

 		<!-- 基础用法 -->
 		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
 			<view class="demo-header">
 				<view class="demo-title-wrap">

 					<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />

 				</view>
					<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="最多可上传9张图片，支持预览、删除等操作" />
 				 
 			</view>
 			<view class="demo-content">
 				<zk-upload :file-list="fileList1" :max-count="9" upload-text="上传图片" :upload-directly="false"
 					@on-choose="handleChooseFiles" add-icon="add-large-line" add-icon-color="#2979ff"
 					:upload-url="uploadUrl" @select="onSelect1" @success="onSuccess1" @fail="onFail"
 					@remove="onRemove1" />
 			</view>
 		</zk-theme>



 	</zk-theme>
 </template>

 <script>
 	export default {
 		data() {
 			return {
 				// 上传接口地址
 				uploadUrl: 'https://your-upload-url',
 				// 基础用法
 				fileList1: [],
 				// 自定义样式
 				fileList2: [],
 				// 身份证
 				idCardFront: [],
 				idCardBack: [],
 				// 头像
 				avatar: [],
 				// 营业执照
 				license: [],
 				// 门店照片
 				store: []
 			}
 		},

 		methods: {
 			handleChooseFiles(files) {
 				// 这里可以获取到选择的文件信息
 				console.log('选择的文件：', files)
 				// 可以进行自定义处理
 			},
 			// 基础用法
 			onSelect1(files) {
 				files.forEach(file => {
 					this.fileList1.push(file)
 				})
 			},
 			onSuccess1({
 				file,
 				res
 			}) {
 				const index = this.fileList1.indexOf(file)
 				this.fileList1[index] = {
 					...file,
 					url: res.data.url // 根据实际接口返回格式调整
 				}
 			},
 			onRemove1({
 				index
 			}) {
 				this.fileList1.splice(index, 1)
 			},

 			// 自定义样式
 			onSelect2(files) {
 				files.forEach(file => {
 					this.fileList2.push(file)
 				})
 			},
 			onSuccess2({
 				file,
 				res
 			}) {
 				const index = this.fileList2.indexOf(file)
 				this.fileList2[index] = {
 					...file,
 					url: res.data.url
 				}
 			},
 			onRemove2({
 				index
 			}) {
 				this.fileList2.splice(index, 1)
 			},

 			// 身份证正面
 			onSelectFront(files) {
 				this.idCardFront = files
 			},
 			onSuccessFront({
 				file,
 				res
 			}) {
 				this.idCardFront = [{
 					...file,
 					url: res.data.url
 				}]
 			},
 			onRemoveFront() {
 				this.idCardFront = []
 			},

 			// 身份证反面
 			onSelectBack(files) {
 				this.idCardBack = files
 			},
 			onSuccessBack({
 				file,
 				res
 			}) {
 				this.idCardBack = [{
 					...file,
 					url: res.data.url
 				}]
 			},
 			onRemoveBack() {
 				this.idCardBack = []
 			},

 			// 头像上传
 			onSelectAvatar(files) {
 				this.avatar = files
 			},
 			onSuccessAvatar({
 				file,
 				res
 			}) {
 				this.avatar = [{
 					...file,
 					url: res.data.url
 				}]
 			},
 			onRemoveAvatar() {
 				this.avatar = []
 			},

 			// 营业执照
 			onSelectLicense(files) {
 				this.license = files
 			},
 			onSuccessLicense({
 				file,
 				res
 			}) {
 				this.license = [{
 					...file,
 					url: res.data.url
 				}]
 			},
 			onRemoveLicense() {
 				this.license = []
 			},

 			// 门店照片
 			onSelectStore(files) {
 				files.forEach(file => {
 					this.store.push(file)
 				})
 			},
 			onSuccessStore({
 				file,
 				res
 			}) {
 				const index = this.store.indexOf(file)
 				this.store[index] = {
 					...file,
 					url: res.data.url
 				}
 			},
 			onRemoveStore({
 				index
 			}) {
 				this.store.splice(index, 1)
 			},

 			// 统一的失败处理
 			onFail({
 				file,
 				error
 			}) {
 				uni.showToast({
 					title: error.message || '上传失败',
 					icon: 'none'
 				})
 			}
 		}
 	}
 </script>

 <style>


 </style>