<template>
	<view>
		<view class="li-price" @click="toggle('center')">
			上传处理照片
		</view>
		处理事故照片上传:
			<!--u-upload是uview的图片上传组件，里面写的是上传条件。-->
			<u-upload :max-size="5 * 1024 * 1024" max-count="3" min-count="3" ref="uUpload" :action="action" :auto-upload="true"></u-upload>
			<view class="button-bottom">
				<!--这一步是把图表保存在我们自己的服务器上-->
				<button style="background-color: #2E95FF;color: #FFFFFF;" @click="submit()">保存图片</button>
			</view>
	</view>
</template>

<script>
	export default {
		name: "upimage",
		data() {
		//可以通过设置file-list参数(数组，元素为对象)，显示预置的图片。其中元素的url属性为图片路径
		//设置action参数为后端服务器地址，注意H5在浏览器可能会有跨域限制，让后端允许域即可
			return {
				action:'http://1.1111.1111.11111//image/image',//你的图片服务器地址
				groupinglist: [],
				filesend: ''//处理过的图片路径
			};
		},
		methods: {
			//这一步份是我把上传的图片路径给到我们后台，显示上传成功
			submit() {
				//获取图片路径
				let imgpat = this.$refs.uUpload.lists;
				let str = ''
				for (var i = 0; i < imgpat.length; i++) {
					str += imgpat[i].response.data + ",";
				}
				str = str.slice(0, str.length - 1);
				//把处理过的文件路径赋值给filesend
				this.filesend = str;
				//调用自己的图片上传接口
				this.$http.get('/jiekou', {
					img_src: this.filesend
				}).then(res => {
					if (res.data.result === 1) {
						uni.showToast({
							title: '上传成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				});
			},
		}
	}
</script>