uploadFile.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <!--
  2. 上传组件
  3. type: 类型,默认image
  4. identify: key值,通过val获取
  5. disabled: 是否可用
  6. index: 父组件的下标
  7. imageIndex: 图片下标
  8. isShow: 图片的显示
  9. -->
  10. <template>
  11. <div id="saga-upload">
  12. <div id="uploadFile">
  13. <el-upload
  14. class="upload-file"
  15. action
  16. :http-request="uploadAndSubmit"
  17. :show-file-list="false"
  18. drag
  19. >
  20. <el-button
  21. size="small"
  22. :type="isShow ===1 ? 'text':'primary'"
  23. v-if="!readOnly"
  24. >点击上传</el-button>
  25. <span v-if="isShow !== 1 || isShow == undefined">
  26. <div
  27. slot="tip"
  28. class="el-upload__tip"
  29. v-if="!readOnly"
  30. >请上传文件</div>
  31. </span>
  32. </el-upload>
  33. <div
  34. v-if="item && filesArr.length"
  35. v-for="(item,index) in filesArr"
  36. >
  37. <el-button
  38. type="text"
  39. @click="download(item.Key)"
  40. >
  41. {{delFile(item.Name)}}</el-button>
  42. <i
  43. v-if="!readOnly"
  44. class="el-icon-close delete-icon"
  45. style="margin-left:10px; cursor:pointer"
  46. @click="deleteFile(index,item)"
  47. ></i>
  48. </div>
  49. </div>
  50. </div>
  51. </template>
  52. <script>
  53. import tools from "@/utils/scan/tools";
  54. export default {
  55. props: {
  56. keysArr: {
  57. type: [Array, String],
  58. default: function () {
  59. return []
  60. }
  61. },
  62. readOnly: {
  63. type: Boolean,
  64. default: false
  65. },
  66. max: {
  67. type: [Number, String],
  68. default: 6
  69. },
  70. isShow: {
  71. type: Number
  72. },
  73. contextKey: {
  74. type: [String, Object]
  75. },
  76. defined: null
  77. },
  78. data() {
  79. return {
  80. filesArr: []
  81. };
  82. },
  83. created() {
  84. this.fileFalg()
  85. },
  86. methods: {
  87. //判断是否为空
  88. fileFalg() {
  89. let type = typeof (this.keysArr)
  90. if (type == 'string') {
  91. this.filesArr = [this.keysArr]
  92. // this.filesArr = JSON.parse(this.keysArr)
  93. } else {
  94. this.filesArr = tools.deepCopy(this.keysArr)
  95. }
  96. if (!this.keysArr) {
  97. this.filesArr = []
  98. }
  99. },
  100. //处理地址
  101. delFile(name) {
  102. return name.length > 20 ? name.substring(0, 20) + "..." : name
  103. },
  104. resetFile() {
  105. this.filesArr = []
  106. },
  107. //点击下载
  108. download(key) {
  109. console.log(key)
  110. window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")
  111. },
  112. //删除图片
  113. deleteFile(i, key) {
  114. this.filesArr.splice(i, 1);
  115. this.$emit("change", this.filesArr, this.defined);
  116. },
  117. //上传
  118. uploadAndSubmit(item) {
  119. // var form = document.forms["demoForm"];
  120. // if (form["file"].files.length > 0) {
  121. // 寻找表单域中的 <input type="file" ... /> 标签
  122. // var file = form["file"].files[0];
  123. let file = item.file;
  124. // try sending
  125. let reader = new FileReader();
  126. let vm = this;
  127. let fileType = file.name.split(".");
  128. let type = fileType[fileType.length - 1];
  129. let key = "&key=" + fileType[0] + file.uid + "." + type
  130. let CreateTime = tools.formatDate(new Date(file.lastModified))
  131. reader.onloadstart = function () {
  132. // 这个事件在读取开始时触发
  133. };
  134. reader.onprogress = function (p) {
  135. // 这个事件在读取进行中定时触发
  136. };
  137. reader.onUploadProgress = function (progressEvent) {
  138. let percent = (progressEvent.loaded / progressEvent.total * 100) | 0
  139. //调用onProgress方法来显示进度条,需要传递个对象 percent为进度值
  140. uploader.onProgress({percent: percent})
  141. }
  142. reader.onload = function () {
  143. // 这个事件在读取成功结束后触发
  144. };
  145. reader.onloadend = function () {
  146. // 这个事件在读取结束后,无论成功或者失败都会触发
  147. if (reader.error) {
  148. } else {
  149. // document.getElementById("bytesRead").textContent = file.size;
  150. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  151. var xhr = new XMLHttpRequest();
  152. xhr.open(
  153. /* method */
  154. "POST",
  155. /* target url */
  156. "/image-service/common/file_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" + key
  157. /*, async, default to true */
  158. );
  159. //xhr.overrideMimeType("application/octet-stream");
  160. xhr.send(reader.result);
  161. xhr.onreadystatechange = function () {
  162. if (xhr.readyState == 4) {
  163. console.log(xhr)
  164. if (xhr.status == 200) {
  165. let fileObject = {
  166. Key: key.split("=")[1],
  167. Type: type,
  168. Name: file.name,
  169. CreateTime,
  170. SystemId: 'dataPlatform'
  171. }
  172. vm.filesArr.push(fileObject);
  173. if(vm.isShow === 1) {
  174. let oFile = {}
  175. oFile[vm.contextKey] = vm.filesArr
  176. vm.$emit("change", oFile, vm.defined);
  177. } else {
  178. vm.$emit("change", vm.filesArr, vm.defined);
  179. }
  180. } else {
  181. this.$message.error(res.data.ResultMsg)
  182. }
  183. }
  184. };
  185. }
  186. };
  187. reader.readAsArrayBuffer(file);
  188. }
  189. },
  190. watch: {
  191. keysArr: function (val) {
  192. this.fileFalg()
  193. }
  194. }
  195. };
  196. </script>
  197. <style lang="less">
  198. #saga-upload {
  199. .dill-image {
  200. position: absolute;
  201. right: 0;
  202. top: 0;
  203. font-size: 20px;
  204. }
  205. .el-upload-dragger {
  206. width: 180px;
  207. height: 180px;
  208. }
  209. img {
  210. position: absolute;
  211. top: 0;
  212. bottom: 0;
  213. left: 0;
  214. right: 0;
  215. width: 100%;
  216. height: 100%;
  217. }
  218. #uploadFile {
  219. .upload-file {
  220. overflow: hidden;
  221. .el-upload-dragger {
  222. width: inherit;
  223. height: inherit;
  224. border: none;
  225. }
  226. }
  227. }
  228. }
  229. </style>