index.vue 794B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <template>
  2. <div class="uploadClass">
  3. <el-upload
  4. action="#"
  5. list-type="picture-card"
  6. :limit="1"
  7. :on-remove="handleRemove"
  8. :on-change="handleChange"
  9. :auto-upload="false"
  10. >
  11. <i class="el-icon-plus"></i>
  12. </el-upload>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. dialogImageUrl: "",
  20. dialogVisible: false,
  21. };
  22. },
  23. methods: {
  24. handleRemove(file, fileList) {
  25. console.log(file, fileList);
  26. },
  27. handleChange(file, fileList) {
  28. console.log(fileList[0].raw);
  29. },
  30. },
  31. };
  32. </script>
  33. <style>
  34. .uploadClass .el-upload--picture-card {
  35. width: 100px;
  36. height: 100px;
  37. line-height: 106px;
  38. }
  39. .el-upload-list--picture-card .el-upload-list__item {
  40. width: 100px;
  41. height: 100px;
  42. }
  43. </style>