dataUpload.vue 5.8 KB

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