<template>
	<div>
		<v-header :title="title" :is-show-prev-page="true"></v-header>
		<div style="padding:20px">
			<div>
				<p>上传图片</p>
				<img v-show="imgUrl1" :src="ossCof.domain + imgUrl1" style="width:80px;height120px;">
				<object-storage-service
					ref="LogoService"
		            :oss-cof="ossCof"
		            :file-path="filePath"
		            :accept="accept"
		            @uploadSucc="imgSuccEmit1"
		            style="vertical-align: bottom;"
				></object-storage-service>
			</div><br>
			<div>
				<p>裁剪并上传图片</p>
				<img v-show="imgUrl2" :src="ossCof.domain + imgUrl2" style="width:80px;height120px;">
				<object-storage-service
					ref="CoverService"
		            :oss-cof="ossCof"
		            :file-path="filePath"
		            :accept="accept"
		            :needCropper="true"
		            :cropper-option="{width:500,height:400}"
		            @uploadSucc="imgSuccEmit2"
		            style="vertical-align: bottom;"
				></object-storage-service>
			</div>
		</div>
	</div>
</template>

<script>
import VHeader from '@/common/header/VHeader';
import ObjectStorageService from '@/common/ObjectStorageService'
import ossConfig from '@/assets/ossConfig.js'
import ossPaths from '@/assets/ossPaths.js'
export default {
	name: 'testObjectStorageService',
	components: {
		VHeader,
		ObjectStorageService
	},
	data() {
		return {
			title: 'testObjectStorageService',
			// 上传图片
			ossCof: ossConfig.bussinessFileBucket,
			filePath: '10086/TestUpload',
			accept: '.jpg,.png,.gif,.bmp',
			//
			imgUrl1:'',
			imgUrl2:'',
		};
	},
	methods: {
		init() {},
		// 图片上传成功
		imgSuccEmit1 (obj) {
			console.log(obj);
			this.imgUrl1 = obj.fileUrl;
		},
		// 图片裁剪上传成功
		imgSuccEmit2 (obj) {
			console.log(obj);
			this.imgUrl2 = obj.fileUrl;
		},
	},
	created() {},
	mounted() {
		this.init();
	}
};
</script>

<style lang="stylus" scoped></style>
