| | |
| | | <div class="cropper-wrapper"> |
| | | <div v-if="isView"> |
| | | <el-image :src="imageUrl" class="view-image"> |
| | | <div slot="error" class="image-slot"> |
| | | <div slot="error" class="image-slot no-cursor"> |
| | | <i class="el-icon-picture-outline"></i> |
| | | </div> |
| | | </el-image> |
| | |
| | | infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 |
| | | }, |
| | | // 防止重复提交 |
| | | loading: false |
| | | loading: false, |
| | | fileName: "" |
| | | } |
| | | }, |
| | | computed: { |
| | | myIsView() { |
| | | return this.isView |
| | | } |
| | | }, |
| | | watch: { |
| | | myIsView() { |
| | | this.setImgMethods() |
| | | } |
| | | }, |
| | | mounted() { |
| | | console.log(this.imageUrl) |
| | | if (!this.isView && this.imageUrl?.length > 0) { |
| | | this.isPreview = true |
| | | this.previewImg = this.imageUrl |
| | | } else { |
| | | this.isPreview = false |
| | | } |
| | | this.setImgMethods() |
| | | }, |
| | | methods: { |
| | | // 设置上传/更换图片显示方法 |
| | | setImgMethods() { |
| | | if (!this.isView && this.imageUrl?.length > 0) { |
| | | this.isPreview = true |
| | | this.previewImg = this.imageUrl |
| | | } else { |
| | | this.isPreview = false |
| | | } |
| | | }, |
| | | // 上传按钮 限制图片大小和类型 |
| | | handleChangeUpload(file, fileList) { |
| | | const isJPG = file.raw.type === "image/jpeg" || file.raw.type === "image/png" |
| | |
| | | return false |
| | | } |
| | | console.log(file, fileList) |
| | | this.fileName = file.name |
| | | // 上传成功后将图片地址赋值给裁剪框显示图片 |
| | | this.$nextTick(async () => { |
| | | // base64方式 |
| | |
| | | this.dialogVisible = false |
| | | this.previewImg = URL.createObjectURL(blob) |
| | | this.isPreview = true |
| | | console.log(blob) |
| | | this.$emit("getImageData", blob) |
| | | // blob转file |
| | | let file = new File([blob], this.fileName, { type: blob.type }) |
| | | // file转formData |
| | | let formData = new FormData() |
| | | formData.append("files", file) |
| | | this.$emit("getImageData", formData) |
| | | }) |
| | | // 获取截图的 base64 数据 |
| | | // this.$refs.cropper.getCropData(data => { |