uploadImg.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <el-upload
  3. class="avatar-uploader"
  4. :http-request="uploadAndSubmit"
  5. :show-file-list="false"
  6. accept="image/*"
  7. action=""
  8. drag
  9. style="position: relation"
  10. >
  11. <i class="el-icon-plus avatar-uploader-icon"></i>
  12. </el-upload>
  13. </template>
  14. <script>
  15. export default {
  16. props: {
  17. keyName: {
  18. type: String,
  19. default: ""
  20. }
  21. },
  22. methods: {
  23. uploadAndSubmit(item) {
  24. // var form = document.forms["demoForm"];
  25. // if (form["file"].files.length > 0) {
  26. // 寻找表单域中的 <input type="file" ... /> 标签
  27. // var file = form["file"].files[0];
  28. let file = item.file;
  29. // try sending
  30. let reader = new FileReader();
  31. let vm = this;
  32. let fileType = file.name.split('.')
  33. let type = fileType[fileType.length -1]
  34. reader.onloadstart = function() {
  35. // 这个事件在读取开始时触发
  36. };
  37. reader.onprogress = function(p) {
  38. // 这个事件在读取进行中定时触发
  39. };
  40. reader.onload = function() {
  41. // 这个事件在读取成功结束后触发
  42. };
  43. reader.onloadend = function() {
  44. // 这个事件在读取结束后,无论成功或者失败都会触发
  45. if (reader.error) {
  46. } else {
  47. // document.getElementById("bytesRead").textContent = file.size;
  48. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  49. var xhr = new XMLHttpRequest();
  50. xhr.open(
  51. /* method */ "POST",
  52. /* target url */
  53. "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=" +
  54. file.uid + '.' + type
  55. /*, async, default to true */
  56. );
  57. //xhr.overrideMimeType("application/octet-stream");
  58. xhr.send(reader.result);
  59. xhr.onreadystatechange = function() {
  60. if (xhr.readyState == 4) {
  61. if (xhr.status == 200) {
  62. vm.$emit("getKey", file.uid + '.' + type, vm.keyName);
  63. }
  64. }
  65. };
  66. }
  67. };
  68. reader.readAsArrayBuffer(file);
  69. }
  70. }
  71. };
  72. </script>
  73. <style lang="less">
  74. .point-pic {
  75. .avatar-uploader {
  76. height: 180px;
  77. width: 180px;
  78. overflow: hidden;
  79. .el-upload {
  80. width: 100%;
  81. height: 100%;
  82. .el-upload-dragger{
  83. width: 100%;
  84. height: 100%;
  85. .el-icon-plus{
  86. display: block;
  87. width: 20px;
  88. height: 20px;
  89. font-size: 20px;
  90. margin: 80px;
  91. }
  92. }
  93. }
  94. }
  95. }
  96. .el-dialog__body{
  97. max-height: 600px;
  98. overflow-y: auto;
  99. }
  100. </style>