vue+el-upload は複数ファイルの動的アップロードを実現します

<div class="vue-box">
           <div class="title-line">
                            その他の必要な証明書<el-button type="primary" size="mini" style="height: 20px;padding-top: 3px !important;margin-left: 50px" icon="el-icon-plus" @click="handleAddDetails">行を追加</el-button>
                            <el-button type="primary" size="mini" style="height: 20px;padding-top: 3px !important;margin-left: 50px" icon="el-icon-plus" @click="doFileUpload()">アップロード</el-button>
            </div>
            <el-テーブル
                    :row-class-name="rowClassName取引"
                    :data="テーブルデータ"
                    スタイル="幅: 100%;">
                <el-テーブル列
                        プロパティ="id"
                        幅="50"
                        label="シリアル番号">
                </el-table-column>
                <el-テーブル列
                        prop="カード名"
                        幅= "180"
                        label="証明書名">
                    <!--<テンプレート スロット スコープ="スコープ">
                        <el-input size="mini" v-model="テーブルデータ[scope.row.id-1].cardName"></el-input>
                    </テンプレート>-->
                </el-table-column>
                <el-テーブル列
                        prop="カード番号"
                        幅= "180"
                        label="ID番号">
                    <!--<テンプレート スロット スコープ="スコープ">
                        <el-input size="mini" v-model="テーブルデータ[scope.row.id-1].cardNo"></el-input>
                    </テンプレート>-->
                </el-table-column>
                <el-テーブル列
                        プロパティ="開始日"
                        幅= "180"
                        label="開始日">
                    <!--<テンプレート スロット スコープ="スコープ">
                        <el-日付ピッカー
                                v-model="テーブルデータ[scope.row.id-1].startDate"
                                スタイル="幅: 80%;"
                                サイズ="ミニ"
                                値の形式="yyyy-MM-dd"
                                タイプ="日付"
                                placeholder="日付を選択">
                        </el-date-picker>
                    </テンプレート>-->
                </el-table-column>
                <el-テーブル列
                        プロパティ="終了日"
                        幅= "180"
                        label="終了日">
                    <!--<テンプレート スロット スコープ="スコープ">
                        <el-日付ピッカー
                                v-model="テーブルデータ[scope.row.id-1].endDate"
                                スタイル="幅: 80%;"
                                サイズ="ミニ"
                                値の形式="yyyy-MM-dd"
                                タイプ="日付"
                                placeholder="日付を選択">
                        </el-date-picker>
                    </テンプレート>-->
                </el-table-column>
                <el-テーブル列
                        prop="アドレス"
                        label="添付ファイル">
                    <テンプレート スロット スコープ="スコープ">
                        <el-アップロード
                                :ref="スコープ行カード名"
                                :http-request="動的アップロード"
                                :before-upload="beforeUploadFile(scope.row)"
                                :on-remove="アップロード削除"
                                :before-remove="アップロード前に削除"
                                :on-preview="アップロードプレビュー"
                                名前="アップロード"
                                :limit="1"
                                :data="スコープ行カード名"
                                :on-exceed="アップロードハンドル超過"
                                :file-list="テーブルデータ[scope.row.id-1].fileアップロードリスト">
                            <el-button size="mini" type="info">クリックしてアップロード</el-button>
                        </el-アップロード>
                    </テンプレート>
                </el-table-column>
                <el-テーブル列
                        プロパティ="日付"
                        幅="80"
                        label="アクション">
                    <テンプレート スロット スコープ="スコープ">
                        <el-button size="mini" type="warning" @click="handleDeleteDetails(scope.row)">削除</el-button>
                    </テンプレート>
                </el-table-column>
            </el-table>
            
            <el-dialog title="証明書情報" :visible.sync="addCardVisible" width="40%">
                <el-form :model="ファイル情報">
                    <el-form-item label="証明書名" :label-width="ラベル幅">
                        <el-input v-model="fileInfo.cardName" autocomplete="off" style="width: 100%;"></el-input>
                    </el-form-item>
                    <el-form-item label="ID番号" :label-width="ラベル幅">
                        <el-input v-model="fileInfo.cardNo" オートコンプリート="オフ" スタイル="幅: 100%;"></el-input>
                    </el-form-item>
                    <el-form-item label="有効日" :label-width="labelWidth">
                        <el-date-picker type="date" placeholder="有効日" value-format="yyyy-MM-dd" v-model="fileInfo.startDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="有効期限" :label-width="ラベル幅">
                        <el-date-picker type="date" placeholder="有効期限" value-format="yyyy-MM-dd" v-model="fileInfo.endDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-form>
                <div スロット="フッター" クラス="ダイアログ フッター">
                    <el-button @click="addCardVisible = false">キャンセル</el-button>
                    <el-button type="primary" @click="addFileDetail">OK</el-button>
                </div>
            </el-ダイアログ>
</div>

nodeVue = new Vue({
    el: '.vue-box',
    データ： {
        ラベル幅: '150px',
        テーブルデータ: [],
        アップロードパラメータ:{
            ファイルタグ名: ''
        },
        合計ファイルリスト:[],
        合計ファイル名リスト:[],
        addCardVisible:false、
        ファイル情報:{
            カード名:''、
            カード番号:''、
            開始日：''、
            終了日:''
        }
    },
    方法:{
        // ファイル関連 uploadRemove:function(file) {
            that = this とする;
            // ファイルリストからファイルを削除する for(let i=0;i<that.totalFileNameList.length;i++){
                if (that.totalFileNameList[i].fileName === file.name) {
                    that.totalFileNameList.splice(i,1)
                }
            }
            for(let i=0;i<that.totalFileList.length;i++){
                if (that.totalFileList[i].name === file.name) {
                    that.totalFileList.splice(i,1)
                }
            }
        },
        // アップロードファイルのパラメータ設定 beforeUploadFile:function(row) {
            console.log(行.カード名);
            this.uploadParams.fileTagName=行.カード名
            this.uploadParams.fid=行ID
        },
        // ファイルをダウンロードするには、ファイルリスト内のファイルをクリックしてダウンロードします uploadPreview:function(file){
            console.log(ファイル);
        },
        アップロードハンドル超過:関数(ファイル、ファイルリスト) {
            this.$message.warning(`現在、ファイルの選択は 1 つに制限されています`);
        },
        uploadBeforeRemove:function(ファイル) {
            これを返します。$confirm(`${ file.name } を削除してもよろしいですか?`);
        },
        // 添付ファイル行を追加し、行追加ポップアップウィンドウを開きます handleAddDetails(){
            that = this とする;
            that.addCardVisible = true;
            that.fileInfo.cardName = '';
            that.fileInfo.cardNo = '';
            that.fileInfo.startDate = '';
            that.fileInfo.endDate = '';
        },
        // テーブルデータに行を追加する addFileDetail(){
            that = this とする;
            if (that.tableData == 未定義) {
                that.tableData = 新しい配列();
            }
            obj = {} とします。
            オブジェクトID = 0;
            obj.cardName = that.fileInfo.cardName;
            obj.cardNo = that.fileInfo.cardNo;
            obj.startDate = that.fileInfo.startDate;
            obj.endDate = that.fileInfo.endDate;
            obj.fileUploadedList=[];
            that.tableData.push(obj);
            that.addCardVisible = false;
        },
        // 行を削除する handleDeleteDetails(row){
            that = this とする;
            that.tableData.splice(行.id-1、1);
            // ファイル リストと関連リストのデータを同時に削除します。let tmpFileName = '';
            for(let i=0;i<that.totalFileNameList.length;i++){
                if (that.totalFileNameList[i].cardName === row.cardName) {
                    tmpFileName = that.totalFileNameList[i].fileName; // 一時的に保存してから削除します that.totalFileNameList.splice(i,1);
                }
            }
            for(let i=0;i<that.totalFileList.length;i++){
                if (that.totalFileList[i].name === tmpFileName) {
                    that.totalFileList.splice(i,1)
                }
            }
        },
        rowClassNameDeal({行、行インデックス}) { 
            //各行のインデックスを row.id に入れます。このメソッドは、テーブル内のシリアル番号を生成するために使用されます。テーブルの内容を入力するときは、各行を異なる v-model にバインドする必要があります。
            行ID = 行インデックス+1;
        },
        // カスタムアップロード、フロントエンドにファイルを一時的に保存するだけ dynamicUpload(content){
            that = this とする;
            コンテンツデータの長さが0の場合
                that.$message.warning(`証明書の名前を入力してください!!!`);
                $refs[content.data].clearFiles();
                false を返します。
            }
            for(let i=0;i<that.totalFileNameList.length;i++){
                if (that.totalFileNameList[i].fileName === content.file.name) {
                    that.$message.warning('ファイルはアップロードされました。アップロードするファイルを再度選択してください!!!');
                    $refs[content.data].clearFiles();
                    false を返します。
                }
            }
            // 転送するファイルのリストにファイルを追加します that.totalFileList.push(content.file)
            ファイル名データ = {
                カード名: コンテンツ.データ、
                ファイル名: コンテンツ.ファイル名
            }
            // totalFileNameList はファイルとテーブルの内容の関係を格納します。ここではライセンス名のみが関連付けられています。that.totalFileNameList.push(fileNameData)
        },
        // アップロード操作を実行し、ファイルとテーブル情報をバックグラウンドに送信します doFileUpload(){
            that = this とする;
            （その合計ファイルリストの長さが0の場合）{
                that.$message.warning("ファイルをアップロードしてください!!!");
                戻る;
            }
            // ファイルをアップロードするには、FormData を使用する必要があります。processData および contentType パラメータを設定する必要があります。そうしないと、アップロードは失敗します。const params = new FormData();
            // バックエンドが取得するときにテーブルデータとの関連付けを容易にするために、アップロードされた各ファイルに名前を付けます for (let i = 0; i < that.totalFileList.length; i++) {
                パラメータを追加します(that.totalFileList[i].name, that.totalFileList[i]);
            }
            params.append("fileNameList", JSON.stringify(that.totalFileNameList));
            $.ajax({
                url:baseurl+"/testupload/fileUpload",
                タイプ:"POST",
                データ型: "json",
                processData: false, //データパラメータをシリアル化するために使用されます。これは false である必要があります。
                contentType: false, //必須データ:params,
                成功:function(res){
                    that.$message.warning('アップロードに成功しました');
                }
            });
        }
    },
    作成: 関数(){       
    }
})

@コントローラ
@RequestMapping("/testupload")
パブリッククラスRegisterController{

 // 添付ファイルはリクエストから取得されます @RequestMapping("/fileUpload")
    @レスポンス本文
    パブリック ServerResponse ファイルアップロード(HttpServletRequest リクエスト、文字列 fileNameList){
        試す{
            if(ファイル名リスト == null){
                throw new Exception("アップロードする前にファイルを選択してください!!!");
            }
            // 1. アップロード場所 String path = "E:\\uploadfile";
            //パスが存在するかどうかを判断します File file = new File(path);
            ファイルが存在する場合（）{
                ファイル.mkdirs();
            }
            // 文字列形式でアップロードされた関連データ情報を処理します。JSONArray jsonArray = JSON.parseArray(fileNameList);
            // 連想リストを走査する for(Object object : jsonArray){
                JSONオブジェクト jsonObject = JSON.parseObject(object.toString());
                System.out.println(jsonObject.getString("カード名"));
                // ファイルを取得する MultipartFile file1 = ((MultipartHttpServletRequest) request).getFile(jsonObject.getString("fileName"));
                // ファイル情報を取得します。String filename = file1.getOriginalFilename();
                System.out.println(ファイル名);
                // ファイルを保存します。file1.transferTo(new File(path, filename));
            }
        }catch (例外 e) {
            ログエラー(e.getMessage());
            ServerResponse.createByErrorMessage(e.getMessage()); を返します。
        }
        ServerResponse.createBySuccess() を返します。
    }
}