Die Komponente vue-cropper realisiert das Zuschneiden und Hochladen von Bildern

importiere { VueCropper } von 'vue-cropper' 
Komponenten:
  VueCropper,
},

Importiere VueCropper von „vue-cropper“ 

Vue.use(VueCropper)

<Vorlage>
  <el-dialog
    Titel="Avatar bearbeiten"
    :visible.sync="dialogFormularSichtbar"
    :Schließen bei Klick-Modal="false"
    An den Hauptteil anhängen
  >
    <label class="btn" for="uploads">Wählen Sie ein Bild aus</label>
    <Eingabe
      Typ="Datei"
      id="Hochladen"
      :Wert="Bilddatei"
      Stil="Position:absolut; Clip:Rechteck(0 0 0 0);"
      akzeptieren="bild/png, bild/jpeg, bild/gif, bild/jpg"
      @change="uploadImg($event, 1)"
    >
    <div Stil="Margin-left:20px;">
      <div Klasse = "show-preview" :style = "{'overflow': 'hidden', 'margin': '5px'}">
        <div: style="Vorschau.div" Klasse="Vorschau" Stil="Breite: 40px;Höhe: 40px;">
          <img :src="vorschau.url" :style="vorschau.img">
        </div>
      </div>
    </div>
    <div Klasse="Schnitt">
      <vueCropper
        ref="Beschneider"
        :img="Option.img"
        :Ausgabegröße="Option.Größe"
        :Ausgabetyp="Option.Ausgabetyp"
        :info="wahr"
        :full="Option.full"
        :kannVerschieben="Option.kannVerschieben"
        :kannBox verschieben="Option.kannBox verschieben"
        :original="Option.original"
        :autoCrop="Option.autoCrop"
        :autoCropWidth="Option.autoCropWidth"
        :autoCropHeight="Option.autoCropHeight"
        :fixedBox="Option.fixedBox"
        @realTime="Echtzeit"
        @imgLoad="imgLoad"
      ></vueCropper>
    </div>
    <div slot="Fußzeile" class="dialog-footer">
      <el-button @click="dialogFormVisible = false" size="small">Abbrechen</el-button>
      <el-button Typ="primary" @click="finish('blob')" Größe="small">OK</el-button>
    </div>
  </el-dialog>
</Vorlage>

<Skript>
importiere { VueCropper } von "vue-cropper";
Standard exportieren {
  Komponenten:
    VueCropper
  },
  Daten() {
    zurückkehren {
      Vorschau: {},
      Modell: falsch,
      Modellquelle: "",
      Dateiname: "",
      imgDatei: "",
      dialogFormVisible: false,
      Option: {
        img: "",
        outputSize: 1, //Bildqualität nach dem Schneiden (0,1-1)
        full: false, // Ausgabe des Originalbildanteils Screenshot Requisitenname full
        Ausgabetyp: "png",
        kannVerschieben: wahr,
        Original: falsch,
        canMoveBox: wahr,
        autoCrop: wahr,
        autoCropWidth: 40,
        autoCropHeight: 40,
        fixedBox: wahr
      }
    };
  },
  Methoden: {
    //Bild hochladen (auf die Schaltfläche „Hochladen“ klicken)
    fertig(Typ) {
      lass selft = dies;
      let formData = neue FormData();
      // Ausgabewenn (Typ === "Blob") {
        selft.$refs.cropper.getCropBlob(data => {
          let img = window.URL.createObjectURL(Daten);
          selft.modell = wahr;
          selft.modelSrc = img;
          formData.append("Datei", Daten, selft.Dateiname);
          selft.$api.writer.userUpload(formData, r => {
            wenn (r.code) {
              selft.$alert.error(r.msg);
            } anders {
              selft.$message({
                Nachricht: r.data.msg,
                Typ: „Erfolg“
              });
              selft.$store.state.userInfo = r.data.data;
              selft.dialogFormVisible = false;
            }
          });
        });
      } anders {
        dies.$refs.cropper.getCropData(data => {});
      }
    },
    //Wähle ein lokales Bild aus uploadImg(e, num) {
      console.log("Bild hochladen");
      var selft = dies;
      //Bild hochladen var file = e.target.files[0];
      selft.fileName = Dateiname;
      wenn (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.ziel.wert)) {
        alert("Der Bildtyp muss einer der folgenden sein: .gif, jpeg, jpg, png, bmp");
        gibt false zurück;
      }
      var reader = neuer FileReader();
      reader.onload = e => {
        Daten lassen;
        wenn (Typ von e.Ziel.Ergebnis === "Objekt") {
          // Array-Puffer in Blob konvertieren. Wenn es Base64 ist, ist es nicht erforderlich. data = window.URL.createObjectURL(new Blob([e.target.result]));
        } anders {
          Daten = e.Ziel.Ergebnis;
        }
        wenn (Zahl === 1) {
          selft.option.img = Daten;
        } sonst wenn (Zahl === 2) {
          selft.example2.img = Daten;
        }
      };
      // In Base64 konvertieren
      // reader.readAsDataURL(Datei)
      // In Blob konvertieren
      Leser.readAsArrayBuffer(Datei);
    },
    zeigen() {
      this.dialogFormVisible = true;
    },
    // Echtzeitvorschaufunktion realTime(data) {
      console.log("Echtzeit");
      this.previews = Daten;
    },
    imgLoad(msg) {
      console.log("imgLoad");
      Konsole.log(Nachricht);
    }
  }
};
</Skript>

<style lang="less">
@import "./userLogo.less";
</Stil>

.schneiden {
    Breite: 300px;
    Höhe: 300px;
    Rand: 0px automatisch;
}

.hh {
    .el-dialog__header {
        Polsterung: 0px;
        Zeilenhöhe: 2;
        Hintergrundfarbe: #f3f3f3;
        Höhe: 31px;
        Rahmen unten: 1px durchgezogen #e5e5e5;
        Hintergrund: #f3f3f3;
        Rahmen oben links – Radius: 5px;
        Rahmen oben rechts – Radius: 5px;
    }
    .el-dialog__title {
        schweben: links;
        Höhe: 31px;
        Farbe: #4c4c4c;
        Schriftgröße: 12px;
        Zeilenhöhe: 31px;
        Überlauf: versteckt;
        Rand: 0;
        Polsterung links: 10px;
        Schriftstärke: fett;
        Textschatten: 0 1px 1px #fff;
    }
    .el-dialog__headerbtn {
        Position: absolut;
        oben: 8px;
        rechts: 10px;
        Polsterung: 0;
        Hintergrund: 0 0;
        Rand: keiner;
        Umriss: 0;
        Cursor: Zeiger;
        Schriftgröße: 16px;
    }
}

.btn {
    Anzeige: Inline-Block;
    Zeilenhöhe: 1;
    Leerzeichen: Nowrap;
    Cursor: Zeiger;
    Hintergrund: #fff;
    Rand: 1px durchgezogen #c0ccda;
    Farbe: #1f2d3d;
    Textausrichtung: zentriert;
    Box-Größe: Rahmenbox;
    Gliederung: keine;
    //Rand: 20px 10px 0px 0px;
    Polsterung: 9px 15px;
    Schriftgröße: 14px;
    Rahmenradius: 4px;
    Farbe: #fff;
    Hintergrundfarbe: #50bfff;
    Rahmenfarbe: #50bfff;
    Übergang: alle 0,2 s mühelos;
    Textdekoration: keine;
    Benutzerauswahl: keine;
}

.show-preview {
    biegen: 1;
    -webkit-flex: 1;
    Anzeige: Flex;
    Anzeige: -webkit-flex;
    Inhalt ausrichten: zentriert;
    -webkit-justify-content: zentrieren;
    .Vorschau {
        Überlauf: versteckt;
        Randradius: 50 %;
        Rand: 1px durchgezogen #cccccc;
        Hintergrund: #cccccc;
    }
}

// HTTP-Anforderungs-Interceptor axios.interceptors.request.use(
  Konfiguration => {Debugger
    let token = sessionStorage.getItem('token')
    wenn (Token) {
      config.headers.Authorization = Token;
    }
    wenn (config && config.url && config.url.indexOf('upload') > 0) {
      config.headers['Inhaltstyp'] = 'multipart/Formulardaten'
    }
    Konfiguration zurückgeben
  },
  err => {
    returniere Promise.reject(err)
  }
)

@RequestMapping("/hochladen")
 öffentliche ResultData-Upload(@RequestParam("Datei") MultipartFile-Datei) {
  gibt userService.upload(Datei) zurück;
 }

@Überschreiben
 öffentlicher ResultData-Upload (MultipartFile-Datei) {
  wenn (!file.isEmpty()) {
   
   StringBuffer requestURL = sessionUtil.getRequestURL();
   int end = requestURL.indexOf("/Benutzer/Upload");
   String Basispfad = requestURL.substring(0, Ende);
   String SavePath = Basispfad + "/static/img/logo/";
   // Dateinamen inklusive Suffix abrufen String fileName = file.getOriginalFilename();

   String saveDbPath = savePath + Dateiname;

   // Unter diesem Pfad gespeichert: Dieser Pfad ist die statische Datei im Projektverzeichnis: (Hinweis: Möglicherweise müssen Sie diese Datei selbst erstellen.)
   // Der Grund für die Platzierung unter „statisch“ besteht darin, dass es statische Dateiressourcen speichert, d. h. der Zugriff ist möglich, indem die lokale Serveradresse eingegeben und der Dateiname über den Browser hinzugefügt wird. String path = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/img/logo/";

   // Diese Methode ist ein Wrapper zum Schreiben von Dateien. Importieren Sie in der Util-Klasse das Paket, um es zu verwenden. Die Methode wird später angegeben. try {
    FileUtil.fileupload(file.getBytes(), Pfad, Dateiname);
    // Erstellen Sie dann die entsprechende Entitätsklasse, fügen Sie den folgenden Pfad hinzu und schreiben Sie dann „User“ über die Datenbankoperationsmethode „user = sessionUtil.getSessionUser();“.
    Benutzer.setLogo(saveDbPath);
    Benutzer, wobei Benutzer = neuer Benutzer();
    woUser.setId(user.getId());
    ConfigHelper.update(Benutzer, "Benutzer", wobeiBenutzer);
    Map<String, Objekt> map = neue HashMap<>();
    map.put("msg", "Avatar erfolgreich geändert");
    map.put("Daten", Benutzer);
    gibt ResultData.ok(map) zurück;
   } Fang (IOException e) {
    log.error("Bild hochladen ==》" + e.getMessage());
    e.printStackTrace();
    returniere ResultData.failed(e.getMessage());
   } Fang (Ausnahme e) {
    log.error("Letztes Bild ==》" + e.getMessage());
    e.printStackTrace();
    returniere ResultData.failed(e.getMessage());
   }

  } anders {
   return ResultData.failed("Bild hochladen fehlgeschlagen");
  }
 }