uploadFiles.vue 4.8 KB

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