uploadImgs.vue 10 KB

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