index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <template>
  2. <div>
  3. <el-upload
  4. :disabled="disabledUpload"
  5. ref="upload"
  6. v-if="type === 'file' ? true : hideUpload"
  7. :action="action"
  8. :headers="headers"
  9. :data="data"
  10. :show-file-list="false"
  11. :list-type="type === 'file' ? '':'picture-card'"
  12. :before-upload="beforeUpload"
  13. :on-success="onSuccess"
  14. :on-progress="onProgress"
  15. >
  16. <el-button v-if="type === 'file'" type="primary" style="margin:0">{{ title }}</el-button>
  17. <i v-else slot="default" class="el-icon-plus" />
  18. </el-upload>
  19. <div class="upload-img" v-if="type === 'file' ? false : hideUpload === false">
  20. <el-image :src="newUrl" />
  21. <span v-if="disabled === false" class="upload-btn">
  22. <i class="el-icon-delete" @click="handleRemove" />
  23. </span>
  24. </div>
  25. </div>
  26. </template>
  27. <script>
  28. // import { client } from '@/api/oss'
  29. import { getToken } from "@/utils/auth";
  30. export default {
  31. props: {
  32. type: {
  33. type: String,
  34. default: "image",
  35. },
  36. // 图片
  37. url: {
  38. type: String,
  39. default: "",
  40. },
  41. // 隐藏删除按钮
  42. disabled: {
  43. type: Boolean,
  44. default: false,
  45. },
  46. },
  47. data() {
  48. return {
  49. // 额外参数
  50. data: {
  51. multipartFile: new FormData(),
  52. },
  53. // 文件大小
  54. size: 0,
  55. // 请求头
  56. headers: {
  57. Authorization: "Bearer " + getToken(),
  58. },
  59. // 上传地址
  60. action: "",
  61. // 隐藏上传按钮
  62. hideUpload: true,
  63. // 禁用上传按钮
  64. disabledUpload: false,
  65. // 按钮标题
  66. title: "上传文件",
  67. // 图片
  68. newUrl: "",
  69. };
  70. },
  71. watch: {
  72. url(val) {
  73. this.newUrl = val;
  74. this.hideUpload = val ? false : true
  75. },
  76. },
  77. mounted() {
  78. if (this.url) {
  79. this.newUrl = this.url;
  80. this.hideUpload = false;
  81. }
  82. this.action =
  83. this.type === "image"
  84. ? `${process.env.VUE_APP_BASE_API}/system/file/picture/upload`
  85. : `${process.env.VUE_APP_BASE_API}/system/file/file/upload`;
  86. },
  87. methods: {
  88. // 上传服务器之前提交文件
  89. beforeUpload(file) {
  90. this.data.multipartFile = file;
  91. this.size = file.size;
  92. this.disabledUpload = true;
  93. },
  94. // 上传成功
  95. onSuccess(file) {
  96. this.hideUpload = false;
  97. this.disabledUpload = false;
  98. this.newUrl = file.data;
  99. this.title = "上传成功";
  100. this.$emit("success", {
  101. file: this.newUrl,
  102. size: this.size,
  103. });
  104. },
  105. // 上传时 进度条
  106. onProgress(file) {
  107. this.title = `${parseInt(file.percent - 1)}%`;
  108. },
  109. // 删除
  110. handleRemove() {
  111. this.hideUpload = true;
  112. this.$emit("delete", (this.newUrl = ""));
  113. },
  114. // httpRequest(e) {
  115. // client.put(e.file.name, e.file).then(res => {
  116. // console.log(res);
  117. // })
  118. // },
  119. },
  120. };
  121. </script>
  122. <style lang="scss" scoped>
  123. .upload-img {
  124. position: relative;
  125. width: 148px;
  126. height: 148px;
  127. .upload-btn {
  128. position: absolute;
  129. top: 50%;
  130. left: 50%;
  131. width: 100%;
  132. height: 100%;
  133. transform: translate(-50%, -50%);
  134. transition: all 0.3s;
  135. background: rgb(0 0 0 / 50%);
  136. color: #fff;
  137. text-align: center;
  138. line-height: 148px;
  139. font-size: 24px;
  140. opacity: 0;
  141. i {
  142. cursor: pointer;
  143. }
  144. }
  145. .upload-btn:hover {
  146. opacity: 1;
  147. }
  148. }
  149. </style>