<template> <div class="app-wrapper"> <nav-bar></nav-bar> <app-main></app-main> <visual-config ref="visualConfig" @openCropper="openCropper"></visual-config> <image-cropper :open.sync="showCropper" :img="uploadImageUrl" :show-preview="false" @onCropped="onCropped"></image-cropper> </div> </template> <script> import NavBar from "@/views/layout/NavBar.vue"; import AppMain from "@/views/layout/AppMain.vue"; import visualConfig from "@/components/visualConfig/index.vue"; import imageCropper from "@/components/imageCropper/index.vue"; import { mapGetters } from "vuex"; export default { name: "layout", components: { NavBar, AppMain, visualConfig, imageCropper, }, data() { return { showCropper: false, uploadImageUrl: "", }; }, computed: { ...mapGetters(["settings"]), }, methods: { openCropper(url) { this.uploadImageUrl = url; this.showCropper = true; }, onCropped(data) { this.uploadImageUrl = window.URL.createObjectURL(data); this.showCropper = false; const { logo } = this.settings; const spliceLength2 = logo.lastIndexOf("/"); const imageFullName = logo.slice(spliceLength2 + 1); const imageName = imageFullName.split(".")[0]; //blob杞琭ile const file = new File([data], `${imageName}-鍓-${new Date()}.jpg`, { type: "contentType", lastModified: Date.now(), }); this.$refs.visualConfig.uploadAvatar({ file: file }); }, }, }; </script> <style scoped></style>