Implementierungsbeispiel für den Bildupload mit Vue+Element+Springboot

<el-form-item label="Titelbild">
                <el-upload v-model="Datenformular.Titel"
                        Klasse = "Avatar-Uploader"
                        :Grenze="1"
                        Listentyp = "Bildkarte"
                        :on-preview="handleBildkartenvorschau"
                        mehrere
                        :http-request="Datei hochladen"
                        :on-remove="handleEntfernen"
                        :on-change='ÄndernHochladen'
                        :file-list="Bilder">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>

zurückkehren {
                Bilder: [{name: 'food.jpg', url: 'upload/2022/web/20210329194832973.png'}],
                Bild-URL: '',
                fileList: [], // Datei-Upload-Daten (mehrere Dateien in einer)
                dialogImageUrl: '',
                dialogVisible: false,
                Optionen: [],
                Inhalt: '',
                Editoroption: {},
                sichtbar: falsch,
                Datenform: {
                    ID: 0,
                    Titel: '',
                    Inhalt: '',
                    bz: ''
                },
                tempKey: -666666 // Temporärer Schlüssel, der verwendet wird, um das Problem zu lösen, dass der halb ausgewählte Status des Baumelements nicht an die Backend-Schnittstelle übergeben werden kann. # Muss optimiert werden}

changeUpload: function(file, fileList) {//Bildvorschau this.fileList = fileList;
            },
            Datei hochladen(Datei){

            },
            handleRemove(Datei, Dateiliste) {
            },
            handlePictureCardPreview(Datei) {
                this.dialogImageUrl = Datei.URL;
                this.dialogVisible = true;
            },

// Formularübermittlung dataFormSubmit () {
                const form = new FormData() // FormData-Objekt form.append('file', this.fileList);
                form.append('Titel', dieses.Datenformular.Titel);
                form.append('Inhalt', this.$refs.text.value);
                dies.$refs['dataForm'].validate((gültig) => {
                    if (gültig) {
                        dies.$http({
                            URL: diese.$http.adornUrl(`/sys/inform/${!this.dataForm.id ? 'speichern' : 'aktualisieren'}`),
                            Methode: 'post',
                            Daten:Formular
                        }).dann(({data}) => {
                            wenn (Daten && Daten.Code === 0) {
                                diese.$nachricht({
                                    Meldung: „Vorgang erfolgreich“,
                                    Typ: "Erfolg",
                                    Dauer: 1500,
                                    beim Schließen: () => {
                                        this.visible = falsch
                                        dies.$emit('refreshDataList')
                                    }
                                })
                            } anders {
                                dies.$message.error(data.msg)
                            }
                        })
                    }
                })
            }

/**
 * @Autor lyy
 * PC-Hintergrund-Upload-Datei speichern*/
@RequestMapping(Wert = "sys/file/save", Methode = {RequestMethod.POST, RequestMethod.GET})
@Transaktional
öffentliche R speichern(HttpServletRequest-Anfrage) {
    String klassifizieren = request.getParameter("klassifizieren");
    MultipartHttpServletRequest multipartRequest = WebUtils
            .getNativeRequest(Anfrage, MultipartHttpServletRequest.class);
    String Dateiname = "";
    wenn (multipartRequest != null) {
        Iterator<String> Namen = multipartRequest.getFileNames();
        während (namen.hasNext()) {
            Liste<MultipartFile> Dateien = multipartRequest.getFiles(names.next());
            if (files != null && files.size() > 0) {
                für (MultipartFile-Datei: Dateien) {
                    Dateiname = Datei.getOriginalFilename();
                    Zeichenfolge SUFFIX = FileUtil.getFileExt(Dateiname);
                    Datei uFile = neue Datei();
                    uFile.setFileName(Dateiname);
                    uFile.setClassify(klassifizieren);
                    uFile.setCreateTime(neues Datum());
                    uFile.setFileType(SUFFIX);
                    : String-UUID = FileUtil.uuid();
                    versuchen {
                        uFile.setPath(uploadFile(uuid,Datei) +uuid+"."+SUFFIX);
                    } Fang (IOException e) {
                        e.printStackTrace();
                    }
                     fileService.speichern(uFile);
                }
            }
        }
    }
    return R.ok();
}

/**
     * Datei hochladen *@author lyy
     * @param-Datei
     * @zurückkehren
     * @throws IOException
     * @throws IllegalStateException
     */
    öffentliche statische String-Uploaddatei (String-UUID, MultipartFile-Datei) löst IllegalStateException, IOException { aus.
        String defaultUrl = MyFileConfig.getFilePath();
        String-Verzeichnis = java.io.File.separator;
        Zeichenfolge realeURL = StandardURL + Verzeichnis;
        java.io.File realFile = neue java.io.File(realUrl);
        wenn (!realFile.exists() und !realFile.isDirectory()) {
            realFile.mkdirs();
        }
        Zeichenfolge vollständige Datei = echte URL + UUID + "." + FileUtil.getFileExt(file.getOriginalFilename());
        Datei.ÜbertragenAn(neue java.io.Datei(vollständigeDatei));
        String relativePlanUrl = Verzeichnis;
        return relativePlanUrl.replaceAll("\\", "/");
    }