uploadEquipmentSvg.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <div class="upload-equipment-svg">
  3. <el-upload
  4. class="upload-svg"
  5. action="#"
  6. :on-preview="handlePreview"
  7. :on-remove="handleRemove"
  8. :before-remove="beforeRemove"
  9. multiple
  10. drag
  11. :file-list="fileList"
  12. :show-file-list="false"
  13. :http-request="uploadSvg"
  14. >
  15. <div class="el-upload__text">将多个设备图标svg文件拖到此处,或<em>点击上传</em></div>
  16. </el-upload>
  17. <div class="file-list">
  18. <h1>svg文件名:键值</h1>
  19. <div class="file" v-for="file in fileList" :key="file.name">{{ file.svgName }} : {{ file.key }}</div>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. /**
  25. * 上传设备svg图标页面
  26. */
  27. import { imgServeUpload } from "@/api/imageservice";
  28. export default {
  29. name: "icon",
  30. props: {},
  31. data() {
  32. return {
  33. fileList: [],
  34. };
  35. },
  36. components: {},
  37. beforeMount() {},
  38. mounted() {
  39. window.__svg = this;
  40. },
  41. methods: {
  42. // 上传svg文件
  43. uploadSvg(resData) {
  44. const { file } = resData;
  45. // eslint-disable-next-line @typescript-eslint/no-this-alias
  46. const that = this;
  47. const fileReader = new FileReader();
  48. fileReader.readAsDataURL(file); //读取图片
  49. // console.log(file);
  50. const ftype = file.type;
  51. const fname = file.name;
  52. const uploadKey = file.uid;
  53. const imgType = ftype.split(".")[ftype.length - 1];
  54. fileReader.addEventListener("load", function () {
  55. // 读取完成
  56. const res = fileReader.result;
  57. //将canvas的base64位图片转换成图片png的file
  58. const blob = that.dataURLtoBlob(res, ftype);
  59. //将其转换成file对象
  60. const file = new File([blob], fname, {
  61. type: ftype,
  62. lastModified: Date.now(),
  63. }); //blob转file
  64. // try sending
  65. const reader = new FileReader();
  66. const fileType = file.name.split(".");
  67. const imgType = fileType[fileType.length - 1];
  68. const CreateTime = that.formatDate(new Date(file.lastModified));
  69. reader.onloadend = function () {
  70. // 这个事件在读取结束后,无论成功或者失败都会触发
  71. // eslint-disable-next-line no-empty
  72. if (reader.error) {
  73. } else {
  74. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  75. const xhr = new XMLHttpRequest();
  76. xhr.open("POST", `${imgServeUpload}${uploadKey}.${imgType}`);
  77. xhr.send(reader.result);
  78. xhr.onreadystatechange = function () {
  79. if (xhr.readyState == 4) {
  80. if (xhr.status == 200) {
  81. const key = uploadKey + "." + imgType;
  82. console.log(key, fname);
  83. const svgName = fname.split(".svg")[0];
  84. that.fileList.push({ svgName, key });
  85. that.$message.success("上传成功!");
  86. }
  87. }
  88. };
  89. }
  90. };
  91. reader.readAsArrayBuffer(file);
  92. });
  93. },
  94. dataURLtoBlob(dataURI, type) {
  95. const binary = atob(dataURI.split(",")[1]);
  96. const array = [];
  97. for (let i = 0; i < binary.length; i++) {
  98. array.push(binary.charCodeAt(i));
  99. }
  100. return new Blob([new Uint8Array(array)], { type: type });
  101. },
  102. formatDate(now) {
  103. const year = now.getFullYear();
  104. const month = now.getMonth() + 1;
  105. const date = now.getDate();
  106. const hour = now.getHours();
  107. const minute = now.getMinutes();
  108. const second = now.getSeconds();
  109. return (
  110. year +
  111. "-" +
  112. month +
  113. "-" +
  114. (date > 10 ? date : "0" + date) +
  115. " " +
  116. hour +
  117. ":" +
  118. (minute > 10 ? minute : "0" + minute) +
  119. ":" +
  120. (second > 10 ? second : "0" + second)
  121. );
  122. },
  123. handleRemove(file, fileList) {
  124. console.log(file, fileList);
  125. },
  126. handlePreview(file) {
  127. console.log(file);
  128. },
  129. beforeRemove(file, fileList) {
  130. return this.$confirm(`确定移除 ${file.name}?`);
  131. },
  132. },
  133. };
  134. </script>
  135. <style lang='less' scoped>
  136. .upload-equipment-svg {
  137. width: 100%;
  138. height: 100%;
  139. padding: 50px;
  140. /deep/ .el-upload-dragger {
  141. display: flex;
  142. justify-content: center;
  143. align-items: center;
  144. }
  145. .file-list {
  146. margin-top: 10px;
  147. user-select: text !important;
  148. .file {
  149. user-select: text !important;
  150. }
  151. }
  152. }
  153. </style>