diff --git a/package-lock.json b/package-lock.json index 2fa210d..1fd084b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6905,6 +6905,11 @@ "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", "dev": true }, + "image-conversion": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/image-conversion/-/image-conversion-2.1.1.tgz", + "integrity": "sha512-hnMOmP7q2jxA+52FZ+wHNhg3fdFRlgfngsQH2JQHEQkafY7tj/8F15e6Rv/RxDegc872jvyaRHwMbkTZK1Cjbg==" + }, "import-cwd": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", diff --git a/package.json b/package.json index bc80aa1..4def737 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "echarts": "^4.8.0", "element-theme": "^2.0.1", "element-ui": "^2.13.0", + "image-conversion": "^2.1.1", "js-cookie": "^2.2.1", "mavon-editor": "^2.6.17", "postcss-px2rem": "^0.3.0", diff --git a/src/assets/images/style/10.png b/src/assets/images/style/10.png new file mode 100644 index 0000000..cdd602f Binary files /dev/null and b/src/assets/images/style/10.png differ diff --git a/src/assets/images/style/11.png b/src/assets/images/style/11.png new file mode 100644 index 0000000..be4e654 Binary files /dev/null and b/src/assets/images/style/11.png differ diff --git a/src/assets/images/style/12.png b/src/assets/images/style/12.png new file mode 100644 index 0000000..041b374 Binary files /dev/null and b/src/assets/images/style/12.png differ diff --git a/src/assets/images/style/13.png b/src/assets/images/style/13.png new file mode 100644 index 0000000..5b0c915 Binary files /dev/null and b/src/assets/images/style/13.png differ diff --git a/src/assets/images/style/14.png b/src/assets/images/style/14.png new file mode 100644 index 0000000..5b0c915 Binary files /dev/null and b/src/assets/images/style/14.png differ diff --git a/src/assets/images/style/15.png b/src/assets/images/style/15.png new file mode 100644 index 0000000..5a03308 Binary files /dev/null and b/src/assets/images/style/15.png differ diff --git a/src/assets/images/style/16.png b/src/assets/images/style/16.png new file mode 100644 index 0000000..82c48dd Binary files /dev/null and b/src/assets/images/style/16.png differ diff --git a/src/assets/images/style/19.png b/src/assets/images/style/19.png new file mode 100644 index 0000000..041b374 Binary files /dev/null and b/src/assets/images/style/19.png differ diff --git a/src/assets/images/style/22.png b/src/assets/images/style/22.png new file mode 100644 index 0000000..55814b1 Binary files /dev/null and b/src/assets/images/style/22.png differ diff --git a/src/assets/images/style/23.png b/src/assets/images/style/23.png new file mode 100644 index 0000000..042b8ea Binary files /dev/null and b/src/assets/images/style/23.png differ diff --git a/src/assets/images/style/24.png b/src/assets/images/style/24.png new file mode 100644 index 0000000..41e9e34 Binary files /dev/null and b/src/assets/images/style/24.png differ diff --git a/src/assets/images/style/25.png b/src/assets/images/style/25.png new file mode 100644 index 0000000..93cdafa Binary files /dev/null and b/src/assets/images/style/25.png differ diff --git a/src/assets/images/style/27.png b/src/assets/images/style/27.png new file mode 100644 index 0000000..5b0c915 Binary files /dev/null and b/src/assets/images/style/27.png differ diff --git a/src/components/img-upload/Cropper.vue b/src/components/img-upload/Cropper.vue index 81591e8..6d3d827 100644 --- a/src/components/img-upload/Cropper.vue +++ b/src/components/img-upload/Cropper.vue @@ -45,7 +45,7 @@ type="primary" :loading="isUpload" :disabled="isDisabled" - @click.prevent="uploadImg('base64')"> + @click.prevent="uploadImg('blob')"> 上传 @@ -57,7 +57,7 @@ import { VueCropper } from 'vue-cropper' -// console.log(VueCropper); +import {compress, compressAccurately} from 'image-conversion' export default { components: { VueCropper @@ -79,7 +79,9 @@ export default { // 截图框比例 fixedNumber: { type: Array, - default: [1, 0.26] + default: () => { + return [1, 0.26] + } }, fixed: { type: Boolean, @@ -138,7 +140,9 @@ export default { const that = this if (type === 'blob') { this.$refs.cropper.getCropBlob(data => { - that.$emit('upload', data) + compress(data, 0.6).then(res => { + that.$emit('upload', res) + }) }) } else { this.$refs.cropper.getCropData(data => { diff --git a/src/components/modules/content.vue b/src/components/modules/content.vue index 45f472f..7afe0b7 100644 --- a/src/components/modules/content.vue +++ b/src/components/modules/content.vue @@ -123,9 +123,8 @@ export default { }, // 图片裁剪上传事件 customUpload(data) { - const blob = this.dataURItoBlob(data) const formData = new FormData() - formData.append('file', blob, this.file.name) + formData.append('file', data, this.file.name) this.imgUpload(formData) }, // 压缩图片 diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue index baa2587..0ee65b1 100644 --- a/src/layouts/header/index.vue +++ b/src/layouts/header/index.vue @@ -6,7 +6,7 @@