邃芒慧影管理端
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

129 行
3.8 KiB

  1. <template>
  2. <div style="width: 100%; height: 100%">
  3. <!-- 上传 -->
  4. <el-upload
  5. :http-request="myUpload"
  6. ref="uploader"
  7. class="avatar-uploader"
  8. accept="image/*"
  9. :before-upload="beforeAvatarUpload"
  10. >
  11. <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
  12. </el-upload>
  13. <!-- 弹框 -->
  14. <el-dialog
  15. get-container="#app"
  16. v-model="dialogVisible"
  17. title="Tips"
  18. width="60%"
  19. :before-close="handleClose"
  20. >
  21. <!-- <img :src="option.img" alt="" /> -->
  22. <!-- 123321 -->
  23. <div style="height: 500px; width: 500px">
  24. <VueCropper
  25. style="height: 500px; width: 500px"
  26. ref="cropper"
  27. :img="option.img"
  28. :outputSize="option.outputSize"
  29. :outputType="option.outputType"
  30. :info="option.info"
  31. :full="option.full"
  32. :autoCropWidth="option.autoCropWidth"
  33. :autoCropHeight="option.autoCropHeight"
  34. :canMove="option.canMove"
  35. :canMoveBox="option.canMoveBox"
  36. :original="option.original"
  37. :autoCrop="option.autoCrop"
  38. :fixed="option.fixed"
  39. :fixedNumber="option.fixedNumber"
  40. :centerBox="option.centerBox"
  41. :infoTrue="option.infoTrue"
  42. :fixedBox="option.fixedBox"
  43. :high="option.high"
  44. :mode="option.mode"
  45. />
  46. </div>
  47. <!-- 底部按钮 -->
  48. <template #footer>
  49. <span class="dialog-footer">
  50. <el-button @click="dialogVisible = false">Cancel</el-button>
  51. <el-button type="primary" @click="dialogVisible = false">
  52. Confirm
  53. </el-button>
  54. </span>
  55. </template>
  56. </el-dialog>
  57. </div>
  58. </template>
  59. <script setup>
  60. import { VueCropper } from "vue-cropper";
  61. import "vue-cropper/dist/index.css";
  62. import { ref } from "vue";
  63. //#region 选择好文件后
  64. const dialogVisible = ref(true); //弹框显隐
  65. function beforeAvatarUpload(file) {
  66. let data = window.URL.createObjectURL(file);
  67. option.value.img = data; //给裁剪图片的路径
  68. dialogVisible.value = true;
  69. }
  70. // 防止组件自动上传报错
  71. function myUpload(params) {}
  72. //#endregion ------------------------
  73. const cropper = ref(null);
  74. const option = ref({
  75. img: "",
  76. outputSize: 0.5, //图片质量
  77. info: false, // 裁剪框的大小信息
  78. // outputType: 'jpeg', // 裁剪生成图片的格式
  79. outputType: "png", // 裁剪生成图片的格式
  80. canScale: true, // 图片是否允许滚轮缩放
  81. autoCrop: true, // 是否默认生成截图框
  82. autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度
  83. autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度
  84. high: true, // 是否按照设备的dpr 输出等比例图片
  85. fixedBox: false, // 固定截图框大小 不允许改变
  86. fixed: false, // 是否开启截图框宽高固定比例
  87. // fixedNumber: [1, 1], // 截图框的宽高比例
  88. full: true, // 是否输出原图比例的截图
  89. canMoveBox: true, // 截图框能否拖动
  90. original: false, // 上传图片按照原始比例渲染
  91. centerBox: true, // 截图框是否被限制在图片里面
  92. infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  93. mode: "100% auto", // 图片默认渲染方式
  94. });
  95. //#region 裁剪图片
  96. //#endregion ------------------------
  97. </script>
  98. <style lang="scss" scoped>
  99. .avatar-uploader .avatar {
  100. width: 100%;
  101. height: 200px;
  102. display: block;
  103. }
  104. .avatar-uploader .el-upload {
  105. border: 1px dashed var(--el-border-color);
  106. border-radius: 6px;
  107. cursor: pointer;
  108. position: relative;
  109. overflow: hidden;
  110. transition: var(--el-transition-duration-fast);
  111. }
  112. .avatar-uploader .el-upload:hover {
  113. border-color: var(--el-color-primary);
  114. }
  115. .el-icon.avatar-uploader-icon {
  116. font-size: 28px;
  117. color: #8c939d;
  118. width: 178px;
  119. height: 178px;
  120. text-align: center;
  121. }
  122. </style>