uploadFiles.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <template>
  2. <div id="uploadFile">
  3. <el-upload
  4. class="upload-file"
  5. action
  6. drag
  7. :show-file-list="false"
  8. :http-request="uploadAndSubmit">
  9. <i class="el-icon-upload"></i>
  10. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  11. </el-upload>
  12. <div v-show="item && filesArr.length" v-for="(item,index) in filesArr" :key="item.Key">
  13. <p class="file-list">
  14. <span class="file-name" :title="item.Name">{{item.Name}}</span>
  15. <!-- <i title="下载" class="el-icon-download" style="margin-left:10px; cursor:pointer" @click="download(item)"></i>-->
  16. <span v-if="!readOnly"
  17. title="删除"
  18. class="el-icon-circle-close file-icon"
  19. @click="deleteFile(index,item)"></span>
  20. </p>
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. import tools from "@/utils/tools";
  26. export default {
  27. props: {
  28. keysArr: {
  29. type: [Array, String],
  30. default: function () {
  31. return []
  32. }
  33. },
  34. readOnly: {
  35. type: Boolean,
  36. default: false
  37. },
  38. defined: null,
  39. },
  40. data() {
  41. return {
  42. filesArr: [],
  43. };
  44. },
  45. created() {
  46. this.fileFalg()
  47. // this.resetFile()
  48. },
  49. computed: {},
  50. methods: {
  51. //判断是否为空
  52. fileFalg() {
  53. let type = typeof (this.keysArr)
  54. if (type == 'string') {
  55. this.filesArr = [this.keysArr]
  56. } else {
  57. this.filesArr = tools.deepCopy(this.keysArr)
  58. }
  59. this.filesArr = tools.deepCopy(this.keysArr)
  60. if (!this.keysArr) {
  61. this.filesArr = []
  62. }
  63. },
  64. resetFile() {
  65. this.filesArr = []
  66. },
  67. //点击下载
  68. // download(item) {
  69. // if (item.Key) {
  70. // let a = document.createElement("a");
  71. // a.href = `/image-service/common/file_get/${item.Key}?systemId=dataPlatform`;
  72. // a.download = `${item.Name}`;
  73. // a.click();
  74. // document.body.removeChild(a);
  75. // } else {
  76. // this.$message({
  77. // message: "无该获取该文件资源链接!",
  78. // type: "error"
  79. // });
  80. // }
  81. // },
  82. //删除图片
  83. deleteFile(i, key) {
  84. this.filesArr.splice(i, 1);
  85. this.$emit("change", this.filesArr, this.defined);
  86. },
  87. //上传
  88. uploadAndSubmit(item) {
  89. let file = item.file;
  90. let size = item.file.size;
  91. if (size > 50 * 1024 * 1024) { //文件大于50M
  92. this.$message.error('文件不可大于50M,请重新上传')
  93. return false
  94. } else {
  95. let reader = new FileReader();
  96. let vm = this;
  97. let fileType = file.name.split(".");
  98. let type = fileType[fileType.length - 1];
  99. let key = "&key=" + fileType[0] + file.uid + "." + type
  100. // let CreateTime = tools.formatDate(new Date(file.lastModified))
  101. reader.onloadstart = function () {
  102. // 这个事件在读取开始时触发
  103. };
  104. reader.onprogress = function (p) {
  105. // 这个事件在读取进行中定时触发
  106. let value = (p.loaded / size) * 100;
  107. };
  108. reader.onload = function () {
  109. // 这个事件在读取成功结束后触发
  110. };
  111. reader.onloadend = function () {
  112. // 这个事件在读取结束后,无论成功或者失败都会触发
  113. if (reader.error) {
  114. } else {
  115. // document.getElementById("bytesRead").textContent = file.size;
  116. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  117. var xhr = new XMLHttpRequest();
  118. xhr.open(
  119. /* method */
  120. "POST",
  121. /* target url */
  122. "/image-service/common/file_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" + key
  123. /*, async, default to true */
  124. );
  125. //xhr.overrideMimeType("application/octet-stream");
  126. xhr.send(reader.result);
  127. xhr.onreadystatechange = function () {
  128. if (xhr.readyState == 4) {
  129. console.log(xhr)
  130. if (xhr.status == 200) {
  131. let fileObject = {
  132. Key: key.split("=")[1],
  133. Type: type,
  134. Name: file.name,
  135. // CreateTime,
  136. SystemId: 'dataPlatform'
  137. }
  138. vm.filesArr.push(fileObject);
  139. vm.$emit("change", vm.filesArr, vm.defined);
  140. } else {
  141. this.$message.error(res.data.ResultMsg)
  142. }
  143. }
  144. };
  145. }
  146. };
  147. reader.readAsArrayBuffer(file);
  148. }
  149. }
  150. },
  151. watch: {
  152. keysArr: function (val) {
  153. this.fileFalg()
  154. }
  155. }
  156. };
  157. </script>
  158. <style lang="less" scoped>
  159. #uploadFile {
  160. .file-list {
  161. border: 1px solid #E9E9E9;
  162. height: 48px;
  163. width: 360px;
  164. line-height: 48px;
  165. border-radius: 4px;
  166. margin-bottom: 10px;
  167. .file-name {
  168. display: inline-block;
  169. margin-left: 10px;
  170. width: 300px;
  171. overflow: hidden;
  172. text-overflow: ellipsis;
  173. white-space: nowrap;
  174. }
  175. .file-icon {
  176. float: right;
  177. cursor: pointer;
  178. line-height: 48px;
  179. margin-right: 15px
  180. }
  181. }
  182. }
  183. </style>