lookVideo.vue 9.5 KB

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