Vue+Element+Springboot画像アップロードの実装例

<el-form-item label="カバー画像">
                <el-upload v-model="dataForm.title"
                        クラス="アバターアップローダー"
                        :limit="1"
                        リストタイプ="絵カード"
                        :on-preview="ハンドルPictureCardPreview"
                        複数
                        :http-request="アップロードファイル"
                        :on-remove="ハンドル削除"
                        :on-change='changeUpload'
                        :file-list="画像">
                    <i class="el-icon-plus"></i>
                </el-アップロード>
            </el-form-item>

戻る {
                画像: [{name: 'food.jpg', url: 'upload/2022/web/20210329194832973.png'}],
                画像URL: ''、
                fileList: [], // ファイルアップロードデータ（複数のファイルを1つにまとめたもの）
                ダイアログイメージURL: ''、
                ダイアログ表示: false、
                オプション: [],
                コンテンツ： ''、
                エディターオプション: {},
                表示: 偽、
                データフォーム: {
                    id: 0,
                    タイトル： ''、
                    コンテンツ： ''、
                    bz: ''
                },
                tempKey: -666666 // 一時キー。ツリー項目の半選択状態をバックエンド インターフェイスに渡すことができない問題を解決するために使用されます。# 最適化対象}

changeUpload: function(file, fileList){//プレビュー画像 this.fileList = fileList;
            },
            アップロードファイル(ファイル){

            },
            handleRemove(ファイル、ファイルリスト) {
            },
            handlePictureCardPreview(ファイル) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

// フォーム送信 dataFormSubmit() {
                const form = new FormData() // FormData オブジェクト form.append('file', this.fileList);
                フォームにタイトルを追加します。
                form.append('content', this.$refs.text.value);
                this.$refs['dataForm'].validate((valid) => {
                    （有効）の場合{
                        this.$http({
                            url: this.$http.adornUrl(`/sys/inform/${!this.dataForm.id ? 'save' : 'update'}`),
                            メソッド: 'post'、
                            データ:フォーム
                        }).then(({データ}) => {
                            if (データ && データコード === 0) {
                                this.$メッセージ({
                                    メッセージ: 「操作は成功しました」
                                    タイプ: '成功'、
                                    期間: 1500、
                                    閉じる時: () => {
                                        this.visible = false
                                        this.$emit('refreshDataList')
                                    }
                                })
                            } それ以外 {
                                this.$message.error(データ.msg)
                            }
                        })
                    }
                })
            }

/**
 * @著者 lyy
 * PCバックグラウンドアップロードファイルを保存する*/
@RequestMapping(値 = "sys/file/save", メソッド = {RequestMethod.POST, RequestMethod.GET})
@トランザクション
パブリック R 保存(HttpServletRequest リクエスト) {
    文字列分類 = request.getParameter("分類");
    マルチパートHttpServletRequest マルチパートリクエスト = WebUtils
            .getNativeRequest(リクエスト、MultipartHttpServletRequest.class);
    文字列ファイル名 = "";
    マルチパートリクエストが null の場合
        イテレータ<String> names = multipartRequest.getFileNames();
        (names.hasNext()) の間 {
            リスト<MultipartFile> files = multipartRequest.getFiles(names.next());
            if (files != null && files.size() > 0) {
                for (MultipartFile ファイル: ファイル) {
                    ファイル名 = file.getOriginalFilename();
                    文字列 SUFFIX = FileUtil.getFileExt(fileName);
                    ファイル uFile = new File();
                    uFile.setFileName(ファイル名);
                    uFile.setClassify(分類する);
                    uFile.setCreateTime(新しい日付());
                    uFile.setFileType(SUFFIX);
                    文字列 uuid = FileUtil.uuid();
                    試す {
                        uFile.setPath(uploadFile(uuid,file) +uuid+"."+SUFFIX);
                    } キャッチ (IOException e) {
                        e.printStackTrace();
                    }
                     fileService.save(uFile);
                }
            }
        }
    }
    R.ok() を返します。
}

/**
     * ファイルをアップロード *@author lyy
     * @param ファイル
     * @戻る
     * @throwsIOException 例外をスローします
     * @throwsIllegalStateException 例外をスローします
     */
    パブリック静的文字列 uploadFile(文字列 uuid、MultipartFile ファイル) は IllegalStateException、IOException をスローします {
        文字列 defaultUrl = MyFileConfig.getFilePath();
        文字列ディレクトリ = java.io.File.separator;
        文字列 realUrl = defaultUrl + ディレクトリ;
        java.io.File 実ファイル = 新しい java.io.File(実 URL);
        実際のファイルが存在する場合 (!realFile.exists() && !realFile.isDirectory()) {
            実際のファイル。
        }
        文字列 fullFile = realUrl + uuid + "." + FileUtil.getFileExt(file.getOriginalFilename());
        file.transferTo(新しい java.io.File(fullFile));
        文字列 relativePlanUrl = ディレクトリ;
        relativePlanUrl.replaceAll("\\", "/") を返します。
    }