uploadImgsName.vue 11 KB

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