lookFile.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <div class="exhibition-file">
  3. <div v-if="Object.keys(exhibitionFile.list).length">
  4. <div v-for="(val,key,i) in exhibitionFile.list" :key="i">
  5. <div class="" v-for="(j,index) in val">
  6. <p class="title">
  7. <span class="iconfont icon-juxing"></span>
  8. {{key}}
  9. </p>
  10. <div v-if="j.fileList !=undefined && j.fileList.length">
  11. <div v-for="(item,index) in j.fileList" class="content">
  12. <!-- 图标-->
  13. <div class="file-box" >
  14. <div class="file-box-left ">
  15. <div class="file-box-left-content ">
  16. <span class="iconfont icon-Excel excel fs20"></span>
  17. </div>
  18. </div>
  19. <div class="file-box-center">
  20. <p style="margin-top: 20px" :title="item.Name"> {{delFile(item.Name)}}</p>
  21. <p> {{item.CreateTime}}</p>
  22. </div>
  23. <div class="file-box-right ">
  24. <a
  25. style="height: 88px;cursor: pointer;color: #555"
  26. class="iconfont icon-download1 df fs20"
  27. :href="`/image-service/common/file_get/${item.Key}?systemId=dataPlatform`"
  28. :download="item.Name"
  29. />
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <div v-else style="text-align: center;margin: 10px auto">暂无数据</div>
  35. </div>
  36. </div>
  37. </div>
  38. <div v-else style="text-align: center;margin: 10px auto">暂无数据</div>
  39. </div>
  40. </template>
  41. <script>
  42. export default {
  43. props: ['exhibitionFile'],
  44. data() {
  45. return {};
  46. },
  47. created() {
  48. },
  49. methods: {
  50. //处理地址
  51. delFile(name) {
  52. return name && name.length > 14 ? name.substring(0, 14) + "..." : name
  53. },
  54. //删除图片
  55. deleteFile(i, key) {
  56. this.filesArr.splice(i, 1);
  57. this.$emit("change", this.filesArr, this.defined);
  58. },
  59. //上传
  60. uploadAndSubmit(item) {
  61. // var form = document.forms["demoForm"];
  62. // if (form["file"].files.length > 0) {
  63. // 寻找表单域中的 <input type="file" ... /> 标签
  64. // var file = form["file"].files[0];
  65. let file = item.file;
  66. // try sending
  67. let reader = new FileReader();
  68. let vm = this;
  69. let fileType = file.name.split(".");
  70. let type = fileType[fileType.length - 1];
  71. let key = "&key=" + fileType[0] + file.uid + "." + type
  72. let CreateTime = tools.formatDate(new Date(file.lastModified))
  73. reader.onloadstart = function () {
  74. // 这个事件在读取开始时触发
  75. };
  76. reader.onprogress = function (p) {
  77. // 这个事件在读取进行中定时触发
  78. };
  79. reader.onload = function () {
  80. // 这个事件在读取成功结束后触发
  81. };
  82. reader.onloadend = function () {
  83. // 这个事件在读取结束后,无论成功或者失败都会触发
  84. if (reader.error) {
  85. } else {
  86. // document.getElementById("bytesRead").textContent = file.size;
  87. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  88. var xhr = new XMLHttpRequest();
  89. xhr.open(
  90. /* method */
  91. "POST",
  92. /* target url */
  93. "/image-service/common/file_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" + key
  94. /*, async, default to true */
  95. );
  96. //xhr.overrideMimeType("application/octet-stream");
  97. xhr.send(reader.result);
  98. xhr.onreadystatechange = function () {
  99. if (xhr.readyState == 4) {
  100. console.log(xhr)
  101. if (xhr.status == 200) {
  102. let fileObject = {
  103. Key: key.split("=")[1],
  104. Type: type,
  105. Name: file.name,
  106. CreateTime,
  107. SystemId: 'dataPlatform'
  108. }
  109. vm.filesArr.push(fileObject);
  110. vm.$emit("change", vm.filesArr, vm.defined);
  111. } else {
  112. this.$message.error(res.data.ResultMsg)
  113. }
  114. }
  115. };
  116. }
  117. };
  118. reader.readAsArrayBuffer(file);
  119. }
  120. },
  121. };
  122. </script>
  123. <style lang="less" scoped>
  124. .exhibition-file {
  125. .icon-download1:hover {
  126. color: #409eff;
  127. cursor: pointer;
  128. }
  129. .title {
  130. /*border-left: 8px solid black;*/
  131. margin: 10px;
  132. font-weight: 600;
  133. /*text-indent: 10px;*/
  134. display: block;
  135. overflow: hidden;
  136. }
  137. .df {
  138. display: flex;
  139. justify-content: center;
  140. align-items: center;
  141. }
  142. .file-box {
  143. border: 1px solid #eee;
  144. margin: 10px;
  145. height: 88px;
  146. .file-box-left {
  147. display: inline-block;
  148. width: 20%;
  149. height: 100%;
  150. overflow: hidden;
  151. text-align: center;
  152. .file-box-left-content {
  153. background: #eeeeee;
  154. width: 50px;
  155. height: 50px;
  156. margin: 20px 14px;
  157. .excel{
  158. display: block;
  159. padding-top: 5px;
  160. }
  161. }
  162. }
  163. .file-box-center {
  164. display: inline-block;
  165. width: 58%;
  166. height: 100%;
  167. overflow: hidden;
  168. text-align: center;
  169. }
  170. .file-box-right {
  171. display: inline-block;
  172. width: 19%;
  173. height: 100%;
  174. overflow: hidden;
  175. a:hover {
  176. color: #409eff !important;
  177. }
  178. }
  179. }
  180. .df {
  181. display: flex;
  182. justify-content: center;
  183. align-items: center;
  184. }
  185. .fs20 {
  186. font-size: 20px;
  187. }
  188. .list-name {
  189. text-align: center;
  190. }
  191. }
  192. </style>