Vue ページ内の公開マルチタイプ添付画像アップロード領域と適用可能な折りたたみパネル (サンプルコード)

フロントエンドプロジェクトでは、添付ファイルのアップロードは非常に一般的な機能であり、ほぼすべてのアプリ関連プロジェクトで使用されています。通常、フロントエンド UI フレームワークの使用を選択すると、その中にパッケージ化された画像アップロードコンポーネントが見つかりますが、場合によっては、独自のプロジェクトのニーズに適さない可能性があります。この記事で実装された添付ファイルのアップロード領域は、タイプ別に多くの種類の添付ファイルのアップロードをサポートし、特定の条件に応じて特定の種類の添付ファイルのアップロードを具体的に表示できます。この記事は特定のページから直接抽出されたものであり、後で時間をかけて別の添付ファイルのアップロードコンポーネントをカプセル化します。

1. Vueページで添付ファイルに市外局番を表示する

<div class="retuinfo">
          <div class="theadInfo-headline">
            <span></span>
            {{ファイル区分名}}
          </div>
          <折りたたみ v-model="default折りたたみ">
            <パネル v-for="(item,pngIndex) in pngFileArray" v-bind:key="pngIndex" :name="item.num" v-show="item.isshow">
              {{item.name}}
              <div class="obsfilesdiv" slot="コンテンツ">
                <div v-for="(obs,index) in item.files" v-bind:key="index" class="obsfileslist">
                  <input ref="fileImg" type="file" accept="image/*;capture=camera" style="display: none;"
                    @change="setObsFile(item.num,1,obs.FileType,obs.Num,obs.Code)">
                  <label style="color:#6d7180; font-size: 20px;">{{obs.FileType} } <span style="color:red;"
                      v-show="obs.FileType!='その他'">*</span></label>
                  <ul class="obsfilesul">
                    <li v-for="(objitem,objindex) in obs.FileObj" v-bind:key="objindex">
                      <img :src="objitem.imgurl ? objitem.imgurl : fileUrl"
                        @click="showObsFiles(obs.FileFlag,objitem.imgurl)" />
                      <img src="../../../img/other/wrong.png" v-show="objitem.IsCanEdit" class="wrong_class"
                        @click="deleteObsFlie(item.num,index,objindex,objitem.imgid,objitem.imgurl)" />
                    </li>
                    <li style="border: 4px solid #f3f3f3;" @click="PlusClick(obs.FileType,obs.FileFlag,obs.Num)">
                      <img src="../../../img/icon-adds.png" alt="" />
                    </li>
                    <div style="clear:both;"></div>
                  </ul>
                </div>
              </div>
            </パネル>
          </折りたたむ>
        </div>
        <div class="modal" v-show="viewBigImg">
            <div class="img-view-modal" style="text-align: right;">
                <img :src="viewImgURL" style="width: 100%;" @click="hideShow(0)">
                <アイコン type="md-close" style="margin-right: 20px;" size='20' @click="hideShow(0)" />
            </div>
        </div>
      </div>

Vueプロジェクトでは以下のUIフレームワークを導入しています。(すぐに使いたい場合は、まずmain.jsに導入する必要があります) IView、MintUI、Vant IViewが導入されていればこのコードは普通に使えます

2. データバインディング設計

詳細は省きますが、配列やプロパティ制御は理解しやすいです。

pngファイル配列: [{
            数値: '0',
            名前: 「完成車」
            isshow: localStorage.getItem("RoleName").indexOf('銘板品質検査官') != -1 ? true : false,
            ファイル: [ //FileFlag://1:画像; 2:ビデオ 3.その他 {
                ファイルタイプ: '車両銘板画像'、
                コード: '201'、
                数: 0,
                ファイルフラグ: 1,
                ファイルオブジェクト: [],
                ファイルなし: true
              },
              {
                ファイルタイプ: '車両フレームのVIN画像'、
                コード: '207'、
                番号: 1,
                ファイルフラグ: 1,
                ファイルオブジェクト: [],
                ファイルなし: true
              },
              {
                ファイルタイプ: 'ターミナルイメージ'、
                コード: '301'、
                番号: 2,
                ファイルフラグ: 1,
                ファイルオブジェクト: [],
                ファイルなし: true
              }
            ]
          },
          {
            番号: '1',
            名前: 「マイレージ」
            isshow: localStorage.getItem("RoleName").indexOf('アカウントマネージャー') != -1 ? true : false,
            ファイル: [{
                ファイルタイプ: '走行距離計の写真'、
                コード: '701'、
                数: 3,
                ファイルフラグ: 1,
                ファイルオブジェクト: [],
                ファイルなし: true
              }
            ]
          }
        ]、

3. 製本方法

1. 画像の読み込み方法:

//画像リストを取得する getImageList() {
        this.$indicator.open({
          テキスト: '画像を読み込んでいます...',
          スピナータイプ: 'snake'
        });
        _this = this とします。
        失望させるRequest = {
            'crm_vin': this.parms.crm_vin、
            'crm_vehiclenumber': this.parms.crm_vehiclenumber
          };
        imgListParams = {とする
          "ImageDownRequest": JSON.stringify(downRequest)、
          "ユーザー名": localStorage.getItem("ユーザー名one"),
          "パスワード": localStorage.getItem("パスワード")
        };
        console.log("画像リストパラメータを取得します:", imgListParams);
        _this.$ajax.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //リクエストヘッダーを構成する this.$ajax.post(this.imageListUrl, this.$qs.stringify(imgListParams)).then(resdata => {
          _this.$indicator.close();
          console.log("画像リストデータを取得します:", resdata);
          data = resdata.data とします。
          console.log("変換された画像リストデータ:", data);
          resdata.status が 200 の場合
            _this.$トースト({
              メッセージ: '画像リストの取得に失敗しました! '、
              所要時間: 3000
            });
            戻る;
          }
          // 元の画像リストをクリアします first_this.pngFileArray.forEach((rr,index,array) =>{
            for(var file=0;file<rr.files.length;file++){
              _this.pngFileArray[インデックス].files[ファイル].FileObj = [];
              _this.pngFileArray[インデックス].files[ファイル].IsNoFile = true;
            }
          });
          //ページの各画像分類エリアに画像リストを書き込む for(var i=0;i<data.length;i++){
            _this.pngFileArray.forEach((rr,インデックス,配列) => {
              for(var file=0;file<rr.files.length;file++){
                if(data[i].crm_imagetypeno==rr.files[file].Code){
                  putparm = {
                    "IsCanEdit":false、
                    "imgid": データ[i].crm_careimageId、
                    "imgurl": データ[i].ImageUrl
                  };
                  _this.pngFileArray[インデックス].files[ファイル].FileObj.push(putparm);
                  _this.pngFileArray[インデックス].files[ファイル].IsNoFile = false;
                }
              }
            });

          }
        }).catch(関数(エラー) {
          _this.$indicator.close();
          _this.$トースト({
            メッセージ: エラー、
            所要時間: 3000
          });
        });
      },

2. 画像表示方法

showObsFiles(type, url) { //画像またはビデオを表示 console.log("添付ファイルを表示: " + type);
        if (type == 1) { //画像 this.viewBigImg = true;
          this.viewImgURL = url;
        } else { //ファイル this.$messagebox.alert("ファイルの表示はサポートされていません。PC で操作してください。", "Prompt");
          戻る;
        }
      },

3. 写真のアップロードに関する関連方法

(当初の設計では、写真、ビデオ、その他の種類のファイルのアップロードをサポートすることになっていたが、これはプロジェクトで実装されており、この記事では詳しく説明しません)

PlusClick(タイプ、フラグ、数値) {
        console.log("現在の添付ファイルの種類: " + type);
        console.log("現在の添付ファイル番号: " + num);
        this.currentFileType = タイプ;
        if (flag == 1) { // 画像のアップロード this.$refs.fileImg[num].dispatchEvent(new MouseEvent('click'));
        } else if (flag == 2) { // ビデオのアップロード this.$refs.fileVideo[num].dispatchEvent(new MouseEvent('click'));
        } else { // その他の種類のファイル this.$refs.filElem[num].dispatchEvent(new MouseEvent('click'));
        }
      },
setObsFile(classify, type, obsFileType, num, code) { // 画像を crm に保存します var _this = this;
        var inputFile; //ファイル ストリーム console.log("画像分類: " + classify + " " + obsFileType + " " + num) + "画像エンコーディング: " + code;
        （タイプ == 1）の場合{
          入力ファイル = this.$refs.fileImg[num].files[0];
          this.$refs.fileImg[num].value = '';
        }
        var ファイル名 = 入力ファイル名;
        入力ファイルの場合
          戻る;
        }
        inputFile.type == 'image/jpg' || inputFile.type == 'image/jpeg' || inputFile.type == 'image/png' || の場合、
          入力ファイルタイプ ==
          '画像/gif') {} そうでない場合 {
          this.$messagebox.alert("写真をアップロードしてください", "プロンプト");
          戻る;
        }
        _this.$indicator.open({
          テキスト: 'ファイルのアップロード中、お待ちください...',
          スピナータイプ: 'snake'
        });
        // 画像を圧縮し、base64 ファイル ストリームに変換します。var reader = new FileReader();
        入力ファイルを読み取り、URL にデータを返します。
        reader.onloadend = 関数(e) {
          結果を this.result とします。
          console.log('********非圧縮画像サイズ********:' + result.length / 1024)
          _this.pulic.dealImage(結果、{}、関数(base64) {
            console.log('********圧縮画像サイズ********:' + base64.length / 1024)
            _this.putObsFile(分類、ファイル名、base64、obsFileType、コード);
          });
          //reader.result.substring(this.result.indexOf(',')+1);
          // 'data:image/png;base64,'+reader.result
        }
      },
      putObsFile(classify, fileName, base64, obsFileType, code) { // アップロードされた公開画像ファイルを抽出します。メソッド var _this = this;
        usernameone = this.$Base64.encode("administrator"); とします。
        password = this.$Base64.encode("pass@word1"); とします。
        parmsImages = {とします
          crm_newenergyid: localStorage.getItem("crm_newenergyid"),
          vin: _this.parms.crm_vin、
          crm_vehiclenumber: _this.parms.crm_vehiclenumber、
          ケアタイプ: コード、
          作成者: localStorage.getItem("SystemUserId"),
          画像文字列: base64.split(",")[1],
          ユーザー名: usernameone、
          パスワード: パスワード
        }
        パラメータ = {
          画像メッセージ: JSON.stringify(parmsImages)
        }
        console.log(JSON.stringify(parmsImages));
        console.log(JSON.stringify(parms));
        _this.$ajax.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //リクエストヘッダーを構成する _this.$ajax.post(_this.imageSaveUrl, _this.$qs.stringify(parms))
          .then(resdata => {
            _this.$indicator.close();
            console.log("インターフェース応答データ:", resdata);
            data = resdata.data とします。
            console.log("変換された応答データ:", data);
            resdata.status が 200 の場合
              _this.$トースト({
                メッセージ: '保存に失敗しました!インターフェース呼び出し例外'、
                所要時間: 3000
              });
              戻る;
            }
            //アップロードされた画像の URL をページの画像分類 URL に書き戻します。console.log("現在の分類のすべての画像タイプ: " + JSON.stringify(_this.pngFileArray[parseInt(classify)].files));
            for (var i = 0; i < _this.pngFileArray[parseInt(classify)].files.length; i++) { //現在のカテゴリの画像タイプ配列を走査し、背景から返されたデータを割り当てます if (obsFileType == _this.pngFileArray[parseInt(classify)].files[i].FileType) {
                //画像ファイルのパスなどを設定します。putparm
                putparm = {
                  "IsCanEdit":true,
                  "imgid": data.crm_careimageId、
                  "imgurl": データ.ImageUrl
                };
                _this.pngFileArray[parseInt(classify)].files[i].FileObj.push(putparm);
                _this.pngFileArray[parseInt(classify)].files[i].IsNoFile = false;
              }
            }
            _this.$messagebox.alert("添付ファイルが正常にアップロードされました", "プロンプト");
          }).catch(エラー => {
            console.log(JSON.stringify(err));
            _this.$トースト({
              メッセージ: 「アップロードに失敗しました」
              所要時間: 1500
            });
            _this.$indicator.close();
          });
      },

4. 写真を削除する方法

（この記事では、未投稿の画像のみ削除できます。投稿済みの画像、つまりページが最初に読み込まれたときに取得された画像は削除できません。）

deleteObsFlie(classify,num,index,id,url) { //添付ファイルを削除する var _this = this;
        this.$messagebox.confirm('この画像を削除してもよろしいですか?', "確認").then(action => {
          var del_param = {
            "id": id、
            "url": URL
          };
          _this.$indicator.open({
            テキスト: 「写真を削除しています。お待ちください...」
            スピナータイプ: 'snake'
          });
          _this.$ajax.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //リクエストヘッダーを構成する _this.PromiseCall(_this.DelImgFilesURL, _this.$qs.stringify(del_param))
            .then(データ => {
              _this.$indicator.close();
              console.log(JSON.stringify(データ));
              if (データステータス != 200) {
               _this.$messagebox.alert("画像の削除に失敗しました", "prompt");
               戻る;
              }
              _this.pngFileArray[parseInt(classify)].files[num].FileObj.splice(index, 1);
              _this.$トースト({
                メッセージ: 「画像が正常に削除されました」
                所要時間: 1500
              });
            }).catch(エラー => {
              _this.doCatch(エラー);
              _this.$トースト({
                メッセージ: '画像の削除に失敗しました'+エラー、
                所要時間: 1500
              });
              _this.$indicator.close();
            });
        });
      },

4. CSSスタイル

.retuinfo{
    幅: 96%;
    高さ: 自動;
    上マージン: 20px;
    左マージン: 2%;
    背景色: #F5F7FA;
    境界線の半径: 15px;
  }
.theadInfo-見出し {
    幅: 100%;
    高さ: 80px;
    背景: #F3F3F3;
    ディスプレイ: フレックス;
    左パディング: 30px;
    アイテムの位置を中央揃えにします。
    フォントサイズ: 28px;
    色: #666666;
    境界線の半径: 15px;
  }
  .theadInfo-見出しスパン {
    幅: 6px;
    高さ: 32px;
    背景: #5576AB;
    境界線の半径: 3px;
    右マージン: 10px;
  }
.ivu-collapse-header {
    高さ: 40px;
    アイテムの位置を中央揃えにします。
    ディスプレイ: フレックス;
  }
.obsfilesdiv {
    幅: 100%;
    高さ: 自動;
    上マージン: .5rem;
    下部マージン: 50px;
}
.obsファイルリスト{
    幅: 100%;
    高さ: 自動;
    パディング: 0.5rem 0.5rem;
    背景: #fff;
}
.obsfilesul {
    幅: 100%;
    高さ: 自動;
    パディング下部: 8px;
}
.obsfilesul li {
    幅: 120ピクセル;
    高さ: 120px;
    フロート: 左;
    上マージン: .3rem;
    オーバーフロー: 非表示;
    右マージン: .3rem;
    境界線: なし;
}
.obsfilesul li img {
    幅: 100%;
    高さ: 100%;
}
.画像リスト{
    幅: 100%;
    上マージン: .5rem;
    マージン下部: 6rem;
}
.モーダル{
    背景色: #A9A9A9;
    位置: 固定;
    zインデックス: 99;
    左: 0;
    上: 0;
    幅: 100%;
    高さ: 100%;
    パディングトップ: 4rem;
    /*不透明度: 0.5;*/
    アイテムの位置を中央揃えにします。
    /*body要素の垂直中心を定義します*/
    コンテンツの中央揃え: 中央;
    /*本文内の要素の水平中心を定義します*/
}
.modal画像{
    アニメーション名: ズーム;
    アニメーション期間: 0.6秒;
    表示: ブロック;
    パディング: 10px;
    マージン: 自動;
    最大幅: 100%;
    最大高さ: 100%;
    ボックスの影: 0 2px 6px rgb(0, 0, 0, 0), 0 10px 20px rgb(0, 0, 0, 0);
    境界線の半径: 12px;
    境界線: 1px 白の実線;
    位置: 絶対;
    上位: 50%;
    変換: translateY(-50%);
}
.showname{
    幅: 100ピクセル;
    高さ: 60px;
    位置: 相対的;
    上部：-4.5rem;
    空白: 通常;
    単語区切り: 全区切り;
    単語折り返し: 単語を区切る;
}
.間違ったクラス{
    幅: 30% !重要;
    高さ: 30% !重要;
    位置: 相対的;
    上部: -3.8rem;
    左: 2.6rem;
}
.間違ったクラス{
    幅: 4% !重要;
    高さ: 4% !重要;
    位置: 相対的;
    /*上: -5.2em;*/
    左: 0.5rem;
}

最後に、実際の効果図を添付します。

これで、Vue ページ内の公開マルチタイプ添付画像アップロード領域と、該当する折りたたみパネルに関するこの記事は終了です。Vue マルチタイプ添付画像アップロードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: