lookImage.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. <template>
  2. <div id="sagaUploads-look-image">
  3. <div class="saga-upload-images">
  4. <div v-if="Object.keys(exhibitionImage.list).length">
  5. <div v-for="(val,key,i) in exhibitionImage.list" :key="i">
  6. <div class="" v-for="(j,index) in val">
  7. <p class="title">
  8. <span class="iconfont icon-juxing"></span>
  9. {{ key }}
  10. </p>
  11. <div v-if="j.PicList !=undefined && j.PicList.length >0">
  12. <template v-for="item in j.PicList">
  13. <div class="point-look-image">
  14. <img @click="lookImg"
  15. :src=handleLookImage(item.key) alt
  16. v-load style="margin-bottom: 5px">
  17. <p class="pic-name">{{ handleName(item.name) }}</p>
  18. </div>
  19. </template>
  20. </div>
  21. <div v-else style="text-align: center;margin: 10px auto">暂无数据</div>
  22. </div>
  23. </div>
  24. </div>
  25. <div style="text-align: center" v-else>暂无数据</div>
  26. </div>
  27. <details-dialog :title="'图片'" :iframeSrc="iframeSrc" :dialog="dialog"
  28. :setData="exhibitionImage.arr"></details-dialog>
  29. </div>
  30. </template>
  31. <script>
  32. import detailsDialog from "@/components/business_space/lib/detailsDia"
  33. export default {
  34. components: {
  35. detailsDialog
  36. },
  37. props: ['exhibitionImage'],
  38. data() {
  39. return {
  40. baseUrl: "",
  41. imageGetUrl: "/image-service/common/image_get?systemId=dataPlatform",
  42. imageUploadUrl: "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true",
  43. imagesArr: [],
  44. iframeSrc: "",
  45. dialog: {
  46. details: false
  47. }
  48. };
  49. },
  50. methods: {
  51. handleLookImage(key) {
  52. return `/image-service/common/image_get?systemId=dataPlatform&key=${key}`
  53. },
  54. handleName(val) {
  55. return val && val.length > 10 ? val.substring(1, 10) + '...' : val
  56. },
  57. //查看图片
  58. lookImg() {
  59. this.dialog.details = true
  60. this.iframeSrc = process.env.BASE_URL + ":8890/photo-View.html"
  61. },
  62. //上传
  63. uploadAndSubmit(item, key) {
  64. let file = item.file;
  65. // try sending
  66. let reader = new FileReader();
  67. let vm = this;
  68. let fileType = file.name.split(".");
  69. let type = fileType[fileType.length - 1];
  70. let CreateTime = tools.formatDate(new Date(file.lastModified))
  71. let uploadKey = file.uid
  72. if (!!key) {
  73. uploadKey = key
  74. }
  75. reader.onloadstart = function () {
  76. // 这个事件在读取开始时触发
  77. };
  78. reader.onprogress = function (p) {
  79. // 这个事件在读取进行中定时触发
  80. };
  81. reader.onload = function () {
  82. // 这个事件在读取成功结束后触发
  83. };
  84. reader.onloadend = function () {
  85. // 这个事件在读取结束后,无论成功或者失败都会触发
  86. if (reader.error) {
  87. } else {
  88. // document.getElementById("bytesRead").textContent = file.size;
  89. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  90. var xhr = new XMLHttpRequest();
  91. xhr.open(
  92. /* method */
  93. "POST",
  94. /* target url */
  95. vm.imageUploadUrl + "&key=" + uploadKey + "." + type
  96. /*, async, default to true */
  97. );
  98. //xhr.overrideMimeType("application/octet-stream");
  99. xhr.send(reader.result);
  100. xhr.onreadystatechange = function () {
  101. if (xhr.readyState == 4) {
  102. if (xhr.status == 200) {
  103. if (vm.type == 'image') {
  104. vm.imagesArr.push({
  105. Name: uploadKey + '',
  106. Key: uploadKey + "." + type,
  107. SystemId: "dataPlatform",
  108. Type: "image",
  109. CreateTime
  110. });
  111. }
  112. if (type == 'mp4') {
  113. vm.videoPicArr.push({
  114. Name: uploadKey + '',
  115. Key: uploadKey + "." + type,
  116. SystemId: "dataPlatform",
  117. Type: "video",
  118. CreateTime
  119. });
  120. vm.creatImg(vm.imageGetUrl + "&key=" + uploadKey + "." + type, uploadKey)
  121. }
  122. // if (vm.type == "video" && type == "png") {
  123. // vm.videoPicArr.push({
  124. // Name: uploadKey + '',
  125. // Key: uploadKey + "." + type,
  126. // SystemId: "dataPlatform",
  127. // Type: "image_video",
  128. // CreateTime
  129. // })
  130. // }
  131. vm.$emit("change", vm.imagesArr, vm.defined, vm.videoPicArr);
  132. }
  133. }
  134. };
  135. }
  136. };
  137. reader.readAsArrayBuffer(file);
  138. },
  139. dataURLtoBlob(dataURI, type) {
  140. var binary = atob(dataURI.split(',')[1]);
  141. var array = [];
  142. for (var i = 0; i < binary.length; i++) {
  143. array.push(binary.charCodeAt(i));
  144. }
  145. return new Blob([new Uint8Array(array)], { type: type });
  146. },
  147. creatImg(reader, key) {
  148. var videoDom = document.getElementById('video');
  149. videoDom.src = reader;
  150. let vm = this
  151. videoDom.onloadeddata = function () {
  152. // 这里可以打印视频时长
  153. // 这里取得视频封面
  154. var canvas = document.createElement('canvas');
  155. canvas.width = 300;
  156. canvas.height = 300 * this.videoHeight / this.videoWidth;
  157. canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);
  158. //将canvas的base64位图片转换成图片png的file
  159. var blob = vm.dataURLtoBlob(canvas.toDataURL('image/png'), "image/png")
  160. //将其转换成file对象
  161. var file = new File([blob], "video_image.png", { type: "image/png", lastModified: Date.now() })//blob转file
  162. vm.uploadAndSubmit({ file: file }, key)
  163. }
  164. },
  165. },
  166. watch: {
  167. keysArr: function (val) {
  168. this.imageFalg();
  169. }
  170. },
  171. //自定义指令
  172. directives: {
  173. load: function (el) {
  174. let imgDom = document.createElement("img");
  175. imgDom.style.position = "absolute";
  176. imgDom.style.top = "-999px";
  177. imgDom.style.opacity = 0;
  178. imgDom.src = el.src;
  179. el.src = "";
  180. imgDom.onload = () => {
  181. let width = imgDom.width;
  182. let height = imgDom.height;
  183. if (width > height) {
  184. el.style.height = "100%";
  185. el.style.width = "auto";
  186. el.style.position = "absolute";
  187. el.style.left = "50%";
  188. el.style.top = "0";
  189. el.style.transform = "translateX(-50%)";
  190. el.style.webkitTransform = "translateX(-50%) translateY(0)";
  191. el.style.MozTransform = "translateX(-50%) translateY(0)";
  192. el.style.msTransform = "translateX(-50%) translateY(0)";
  193. el.style.OTransform = "translateX(-50%) translateY(0)";
  194. } else if (width < height) {
  195. el.src = imgDom.src;
  196. el.style.width = "100%";
  197. el.style.height = "auto";
  198. el.style.position = "absolute";
  199. el.style.top = "50%";
  200. el.style.left = "0";
  201. el.style.transform = "translateY(-50%) translateX(0)";
  202. el.style.webkitTransform = "translateY(-50%) translateX(0)";
  203. el.style.MozTransform = "translateY(-50%) translateX(0)";
  204. el.style.msTransform = "translateY(-50%) translateX(0)";
  205. el.style.OTransform = "translateY(-50%) translateX(0)";
  206. } else {
  207. el.style.width = "100%";
  208. el.style.height = "100%";
  209. el.style.position = "absolute";
  210. el.style.top = "0";
  211. el.style.left = "0";
  212. el.style.transform = "translateY(0) translateX(0)";
  213. el.style.webkitTransform = "translateY(0) translateX(0)";
  214. el.style.MozTransform = "translateY(0) translateX(0)";
  215. el.style.msTransform = "translateY(0) translateX(0)";
  216. el.style.OTransform = "translateY(0) translateX(0)";
  217. }
  218. el.src = imgDom.src;
  219. };
  220. }
  221. }
  222. };
  223. </script>
  224. <style lang="less">
  225. #sagaUploads-look-image {
  226. overflow: hidden;
  227. .title {
  228. /*border-left: 8px solid black;*/
  229. margin: 10px 10px 10px 0;
  230. font-weight: 600;
  231. /*text-indent: 10px;*/
  232. display: block;
  233. overflow: hidden;
  234. }
  235. .avatar-uploader {
  236. height: 180px;
  237. width: 180px;
  238. overflow: hidden;
  239. .el-upload {
  240. width: 180px;
  241. height: 180px;
  242. .el-upload-dragger {
  243. width: 180px;
  244. height: 180px;
  245. .el-icon-plus {
  246. display: block;
  247. width: 20px;
  248. height: 20px;
  249. font-size: 20px;
  250. margin: 80px;
  251. }
  252. }
  253. }
  254. }
  255. .pic-name {
  256. position: absolute;
  257. right: 72px;
  258. display: inline-block;
  259. background: #fff;
  260. color: #000;
  261. padding: 3px;
  262. z-index: 99;
  263. border-radius: 8px;
  264. bottom: 5px;
  265. }
  266. .point-look-image {
  267. height: 180px;
  268. margin-bottom: 10px;
  269. position: relative;
  270. overflow: hidden;
  271. img {
  272. z-index: 11;
  273. }
  274. i {
  275. position: absolute;
  276. bottom: 10px;
  277. right: 10px;
  278. background-color: #fff;
  279. padding: 5px;
  280. cursor: pointer;
  281. z-index: 66;
  282. }
  283. }
  284. }
  285. </style>