index.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <template>
  2. <div class="component-upload-image">
  3. <el-upload
  4. :action="uploadImgUrl"
  5. list-type="picture-card"
  6. :on-success="handleUploadSuccess"
  7. :before-upload="handleBeforeUpload"
  8. :limit="limit"
  9. :on-error="handleUploadError"
  10. :on-exceed="handleExceed"
  11. name="file"
  12. :on-remove="handleRemove"
  13. :show-file-list="true"
  14. :headers="headers"
  15. :file-list="fileList"
  16. :on-preview="handlePictureCardPreview"
  17. :class="{hide: this.fileList.length >= this.limit}"
  18. >
  19. <i class="el-icon-plus"></i>
  20. </el-upload>
  21. <!-- 上传提示 -->
  22. <div class="el-upload__tip" slot="tip" v-if="showTip">
  23. 请上传
  24. <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
  25. <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
  26. 的文件
  27. </div>
  28. <el-dialog
  29. :visible.sync="dialogVisible"
  30. title="预览"
  31. width="800"
  32. append-to-body>
  33. <img
  34. :src="dialogImageUrl"
  35. style="display: block; max-width: 100%; margin: 0 auto"/>
  36. </el-dialog>
  37. </div>
  38. </template>
  39. <script>
  40. import { getToken } from "@/utils/auth";
  41. export default {
  42. props: {
  43. value: [String, Object, Array],
  44. // 图片数量限制
  45. limit: {
  46. type: Number,
  47. default: 5,
  48. },
  49. // 大小限制(MB)
  50. fileSize: {
  51. type: Number,
  52. default: 5,
  53. },
  54. // 文件类型, 例如['png', 'jpg', 'jpeg']
  55. fileType: {
  56. type: Array,
  57. default: () => ["png", "jpg", "jpeg"],
  58. },
  59. // 是否显示提示
  60. isShowTip: {
  61. type: Boolean,
  62. default: true
  63. }
  64. },
  65. data() {
  66. return {
  67. number: 0,
  68. uploadList: [],
  69. dialogImageUrl: "",
  70. dialogVisible: false,
  71. hideUpload: false,
  72. baseUrl: process.env.VUE_APP_BASE_API,
  73. uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/attach/upload", // 上传的图片服务器地址
  74. headers: {
  75. Authorization: "Bearer " + getToken(),
  76. },
  77. fileList: []
  78. };
  79. },
  80. watch: {
  81. value: {
  82. handler(val) {
  83. if (val) {
  84. // 首先将值转为数组
  85. const list = Array.isArray(val) ? val : this.value.split(',');
  86. // 然后将数组转为对象数组
  87. this.fileList = list.map(item => {
  88. if (typeof item === "string") {
  89. if (item.indexOf(this.baseUrl) === -1) {
  90. item = { name: this.baseUrl + item, url: this.baseUrl + item };
  91. } else {
  92. item = { name: item, url: item };
  93. }
  94. }
  95. return item;
  96. });
  97. } else {
  98. this.fileList = [];
  99. return [];
  100. }
  101. },
  102. deep: true,
  103. immediate: true
  104. }
  105. },
  106. computed: {
  107. // 是否显示提示
  108. showTip() {
  109. return this.isShowTip && (this.fileType || this.fileSize);
  110. },
  111. },
  112. methods: {
  113. // 删除图片
  114. handleRemove(file, fileList) {
  115. const findex = this.fileList.map(f => f.name).indexOf(file.name);
  116. if(findex > -1) {
  117. this.fileList.splice(findex, 1);
  118. this.$emit("input", this.listToString(this.fileList));
  119. }
  120. },
  121. // 上传成功回调
  122. handleUploadSuccess(res) {
  123. // if(res.code == 200) {
  124. // this.$emit("input", res.data.url)
  125. // }
  126. // this.$modal.closeLoading();
  127. this.uploadList.push({ name: res.data.fileName, url: res.data.url });
  128. if (this.uploadList.length === this.number) {
  129. this.fileList = this.fileList.concat(this.uploadList);
  130. this.uploadList = [];
  131. this.number = 0;
  132. this.$emit("input", res.data.url)
  133. // this.$emit("input", this.listToString(this.fileList));
  134. this.$modal.closeLoading();
  135. }
  136. },
  137. // 上传前loading加载
  138. handleBeforeUpload(file) {
  139. let isImg = false;
  140. if (this.fileType.length) {
  141. let fileExtension = "";
  142. if (file.name.lastIndexOf(".") > -1) {
  143. fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
  144. }
  145. isImg = this.fileType.some(type => {
  146. if (file.type.indexOf(type) > -1) return true;
  147. if (fileExtension && fileExtension.indexOf(type) > -1) return true;
  148. return false;
  149. });
  150. } else {
  151. isImg = file.type.indexOf("image") > -1;
  152. }
  153. if (!isImg) {
  154. this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
  155. return false;
  156. }
  157. if (this.fileSize) {
  158. const isLt = file.size / 1024 / 1024 < this.fileSize;
  159. if (!isLt) {
  160. this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
  161. return false;
  162. }
  163. }
  164. this.$modal.loading("正在上传图片,请稍候...");
  165. this.number++;
  166. },
  167. // 文件个数超出
  168. handleExceed() {
  169. this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
  170. },
  171. // 上传失败
  172. handleUploadError() {
  173. this.$modal.msgError("上传图片失败,请重试");
  174. this.$modal.closeLoading();
  175. },
  176. // 预览
  177. handlePictureCardPreview(file) {
  178. this.dialogImageUrl = file.url;
  179. this.dialogVisible = true;
  180. },
  181. // 对象转成指定字符串分隔
  182. listToString(list, separator) {
  183. let strs = "";
  184. separator = separator || ",";
  185. for (let i in list) {
  186. strs += list[i].url.replace(this.baseUrl, "") + separator;
  187. }
  188. return strs != '' ? strs.substr(0, strs.length - 1) : '';
  189. }
  190. }
  191. };
  192. </script>
  193. <style scoped lang="scss">
  194. // .el-upload--picture-card 控制加号部分
  195. ::v-deep.hide .el-upload--picture-card {
  196. display: none;
  197. }
  198. // 去掉动画效果
  199. ::v-deep .el-list-enter-active,
  200. ::v-deep .el-list-leave-active {
  201. transition: all 0s;
  202. }
  203. ::v-deep .el-list-enter, .el-list-leave-active {
  204. opacity: 0;
  205. transform: translateY(0);
  206. }
  207. </style>