1025

package.json

@@ -35,6 +35,7 @@
     "echarts": "^4.3.0",
     "echarts-wordcloud": "^1.1.3",
     "element-ui": "^2.6.3",
+    "exif-js": "^2.3.0",
     "file-saver": "1.3.3",
     "font-awesome": "4.7.0",
     "good-listener": "^1.2.2",

src/main.js

@@ -52,6 +52,9 @@ import echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 require('echarts-wordcloud')
 
+import EXIF from 'exif-js'
+Vue.prototype.EXIF = EXIF
+
 Vue.config.productionTip = false
 import VeeValidate from 'vee-validate';
 Vue.prototype.bus = new Vue()  //这样我们就实现了全局的事件总线对象

src/views/submission/infoview/photolook.vue

@@ -55,10 +55,10 @@
 						<img :src="`${uploadUrl}?fileName=${item.fileName}`" alt="">
 					</el-carousel-item>
 				</el-carousel> -->
-				<div class="swiper-box" style="height: 500px">
+				<div class="swiper-box" style="height: 500px; padding-top:20px;">
 					<!-- swiper1 -->
 					<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
-						<swiper-slide class="slide-1" v-for="(item, key) in photoInfo" :key="key" :style="{backgroundImage: 'url('+`${uploadUrl}?fileName=${item.fileName}`+')', backgroundRepeat: 'no-repeat', backgroundPosition: '50%'}">
+						<swiper-slide class="slide-1" v-for="(item, key) in photoInfo" :key="key" :style="{backgroundImage: 'url('+`${uploadUrl}?fileName=${item.fileName}`+')', backgroundRepeat: 'no-repeat', backgroundPosition: '50%', backgroundSize: 'contain'}">
 							<!-- <img :src="`${uploadUrl}?fileName=${item.fileName}`" alt=""> -->
 						</swiper-slide>
 						<div class="swiper-button-next swiper-button-black" slot="button-next"></div>
@@ -66,12 +66,14 @@
 					</swiper>
 					<!-- swiper2 Thumbs -->
 					<swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
-						<swiper-slide class="slide-1" v-for="(item, key) in photoInfo" :key="key" :style="{backgroundImage: 'url('+`${uploadUrl}?fileName=${item.fileName}`+')', backgroundRepeat: 'no-repeat', backgroundPosition: '50%'}">
+						<swiper-slide class="slide-1" v-for="(item, key) in photoInfo" :key="key" :style="{backgroundImage: 'url('+`${uploadUrl}?fileName=${item.fileName}`+')', backgroundRepeat: 'no-repeat', backgroundPosition: '50%', backgroundSize: 'contain'}">
 							<!-- <img :src="`${uploadUrl}?fileName=${item.fileName}`" alt=""> -->
 						</swiper-slide>
 						<div class="swiper-button-next swiper-button-black" slot="button-next"></div>
 						<div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
 					</swiper>
+					<input type="file" id="" value="" accept="image/*" multiple="multiple" name="files" @change="uploadFile"  ref="img"/>
+					<!-- <img :src="`${uploadUrl}?fileName=${exifImgPath}`" alt=""> -->
 				</div>
 			</div>
 			<div class="atlasBasicInfo">
@@ -164,6 +166,7 @@ export default {
 	},
 	data() {
 		return {
+			exifImgPath: null,
 			uploadUrl: uploadUrl,
 			atlasInfo: {},
 			photoInfo: [],
@@ -180,6 +183,9 @@ export default {
             const swiperTop = this.$refs.swiperTop.swiper
             this.activeIndex = swiperTop.activeIndex;
 						console.log(this.activeIndex,"当前索引");
+						let flag = this.photoInfo[this.activeIndex];
+						console.log(flag,"不知道是什么")
+						this.exifImgPath = flag.fileName;
           }
         }
       },
@@ -243,7 +249,14 @@ export default {
 				swiperTop.controller.control = swiperThumbs
 				swiperThumbs.controller.control = swiperTop
 			})
-		}
+		},
+		uploadFile (event) {//exif获取照片信息
+       let file = event.target.files[0]
+       let _this = this
+       this.EXIF.getData(file, function () {
+         console.log(_this.EXIF.getAllTags(this)) // 此处打印的为选中图片的数据
+      })
+    }
 	}
 }
 </script>
@@ -358,16 +371,17 @@ export default {
 	align-items:center;
 	justify-content:center;
 	overflow:hidden;
+	cursor:pointer;
 }
 .gallery-top {
-	height: 80%!important;
+	height: 60%!important;
 	width: 100%;
 	.swiper-slide {
 		width:100%;
 	}
 }
 .gallery-thumbs {
-	height: 20%!important;
+	height: 40%!important;
 	box-sizing: border-box;
 	padding: 10px 0;
 }