Vue+SSMは画像アップロードのプレビュー効果を実現します

Vue+SSMは画像アップロードのプレビュー効果を実現します

現在の要件は、ファイルのアップロード ボタンがあることです。ボタンをクリックすると、アップロードするファイルを選択し、確認すると、インターフェイスに画像が表示されます。

注:このプロジェクトでは、フロントエンドに Vue、バックエンドに SSM、サーバーに Tomcat、データベースに MySQL を使用します。

実装のアイデア:

フロントエンド インターフェイス: ユーザーがファイルのアップロード ボタンをクリックし、アップロードする画像を選択して確認をクリックすると、画像データがバックエンドに送信されます。バックエンドが処理後に結果を返すと、フロントエンドは応答結果に基づいて後続の作業を実行します。

バックエンド: バックエンドはフロントエンドから送信されたデータを取得すると、画像ファイルを固定フォルダーに保存します (この問題については長い間考えていました。サーバー上に保存する必要があると思います。元々はローカルフォルダーに保存し、パスを使用して参照していました。正直に言うと、これは本当に愚かです。多くの問題に遭遇し、長い時間を費やしました。自分の愚かさに泣きました)。ファイルが保存されると、応答結果が返されます。成功した場合、現在の画像の相対パスが直接返され、フロントエンドはこのパスに従って画像を表示します。

現在の主な問題は、画像リソースを Tomcat の下に配置する方法です。

この問題を解決するために、Tomcat の下に仮想ディレクトリを作成し、すべての画像ファイル、ビデオ、その他のリソースをこのディレクトリ フォルダーに配置します。

バックエンドで写真をアップロードする手順は次のとおりです。

1. Tomcatの下に仮想ディレクトリを作成する

tomcatのルートディレクトリにFileDirという名前のディレクトリを作成します(もちろん、このディレクトリは他の場所に作成することもできます)。

tomcat の conf/server.xml で、仮想ディレクトリを設定します。次の行を追加します
<コンテキスト パス="/FileDir" docBase="G:\インストール パッケージ\Tomcat\インストール パッケージ\Tomcat 7.0\FileDir"/>

仮想ディレクトリに画像 1.jpg を追加し、Tomcat テストを開始します。アクセス: http://localhost:8080/FileDir/1.jpg。写真をリクエストできる場合は、設定が成功したことを意味します。

2. バックエンド構成

ファイルのアップロードとダウンロードの jar パッケージを導入: commons-fileupload-1.3.2.jar と commons-io-1.3.2.jar

SpringMVC 構成ファイルを記述し、次のコードを追加します。

<!-- アップロード パーサーの設定 -->
 <bean id="multipartResolver" クラス="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <!-- リクエストのエンコード形式を設定する -->
  <プロパティ名="defaultEncoding" 値="UTF-8"></プロパティ>
</bean>

ファイルアップロード用のコントローラクラスFileUploadControllerを作成する

パッケージ com.wyf.controller;

java.io.File をインポートします。
java.util.UUID をインポートします。

javax.servlet.http.HttpServletRequest をインポートします。

org.springframework.beans.factory.annotation.Autowired をインポートします。
org.springframework.web.bind.annotation.RequestMapping をインポートします。
org.springframework.web.bind.annotation.RequestMethod をインポートします。
org.springframework.web.bind.annotation.RequestParam をインポートします。
org.springframework.web.bind.annotation.RestController をインポートします。
org.springframework.web.multipart.MultipartFile をインポートします。

com.wyf.po.Result をインポートします。
com.wyf.service.FileServlet をインポートします。

/**
 * ファイルアップロードコントローラー * 
 * @著者 ASUS
 *
 */
@レストコントローラ
パブリッククラスFileUploadController{

 オートワイヤード
 プライベートFileServlet fileServlet;

 /**
  * 画像のアップロードを実行* 
  * フロントエンドがバックエンドデータを取得するときに中国語の文字化けが発生する問題を解決します: produces={"application/json; charset=UTF-8"}
  */
 @RequestMapping(値 = "/uploadImg", メソッド = RequestMethod.POST, 生成 = { "application/json; charset=UTF-8" })
 パブリック結果 handleUploadImg(@RequestParam("file") MultipartFile ファイル、HttpServletRequest リクエスト) {
  // アップロードされたファイルが存在するかどうかを確認します if (!file.isEmpty()) {
   // アップロードされたファイルの元の名前を取得します。String originalFilename = file.getOriginalFilename();
   //画像を保存するパスString rootPath = "G:\\インストール パッケージ\\Tomcat\\インストール パッケージ\\Tomcat 7.0\\FileDir\\";
   // アップロードされたファイルの保存ディレクトリを設定します。String path = "\\upload\\images\\applyShop";
   文字列 dirPath = rootPath + パス + "\\";
   ファイル filePath = new File(dirPath);
   // ファイルが保存されているアドレスが存在しない場合は、まずディレクトリを作成します if (!filePath.exists()) {
    ファイルパス.mkdirs();
   }
   // 名前変更 文字列 newFileName = UUID.randomUUID() + "_" + originalFilename;
   試す {
    // MultipartFile インターフェイス メソッドを使用して、指定された場所にファイルをアップロードします。file.transferTo(new File(dirPath + newFileName));
   } キャッチ (例外 e) {
    e.printStackTrace();
    新しい結果を返します(false、"アップロードエラー");
   }
   // 相対パスを返します String srcPath = path + "\\" + newFileName;
   fileServlet.addUploadFile(srcPath);
   新しいResult(true, srcPath)を返します。
  }
  新しい結果を返します(false、「ファイルが存在しません」)。
 }
}

ここでは、Result クラスを使用してデータを返します。このクラスは、返された結果情報をカプセル化し、JSON 形式でフロントエンドに返すために使用されます。コードは次のとおりです。

パブリッククラス Result {

 private boolean flag; //処理結果識別子 private String message; //返される結果情報 /* get() と set() を省略*/
}

フロントエンドの Vue インターフェースはバックエンドにリクエストを送信し、src 属性を動的にバインドして画像パスを取得します。

<テンプレート>
  <div class="アップロード">
    <div class="img-container">
      <!-- プレビュー画像をアップロード -->
      <img :src="src" alt />
    </div>
    <!-- ファイルアップロードの入力 -->
    <form class="input-file" enctype="multipart/form-data" method="post">
      <input type="file" ref="upload" name="uploadImg" id="file" @change="getFile" 複数 />
      <!-- ラベルには入力の一意の ID を指す for 属性があるため、ラベルをクリックすると入力をクリックするのと同じになります -->
      <label for="file">画像をアップロード</label>
    </フォーム>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
     src:require('../../assets/dist/images/admin.jpg'),
     srcPath:''//画像の相対パス};
  },
  メソッド: {
   getFile(e) {
    let files = e.target.files[0]; //アップロードされた画像情報を取得する let formData = new FormData()
       formData.append('ファイル',ファイル)
      this.$axios.post("/api/uploadImg",formData).then(result=>{
       if(結果データフラグ){
            this.srcPath = 結果.データ.メッセージ
            this.src = `/imgURL${this.srcPath}`
            }それ以外{
            console.log(結果.データ.メッセージ)
        }
      })
    }
  }
};
</スクリプト>

この時点で、基本的に写真をアップロードしてプレビューすることができます。しかし、バグや中国語の文字化けがあります。画像パスに中国語の文字が含まれている場合、src を解析できません。私は長い間この問題を解決してきました。

Baidu をいろいろ検索して、最終的に tomcat の server.xml 設定ファイルを変更する方法を使用しました。
文字化けの原因を考えてみたところ、画像リソースをTomcatにアクセスして取得していたため、imgタグをバックグラウンドから渡されたパスに動的にバインドした際に、送信方法がgetリクエストになっていたことが原因だと思われます。フロントで取得した中国語のパスは正しいのですが、Tomcatでは文字化けしてしまいます。Tomcatのデフォルトのエンコード方式は中国語エンコードがiso8859-1で、フロントエンドで設定したエンコード方式はutf-8なので、文字化けした文字が出てしまいます。

私の解決策は、tomcat server.xml構成ファイルを変更することです。

tomcatのserver.xmlで見つかりました

<コネクタ connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>

この行を次のように変更します

<!-- アドレス バーの中国語文字化けの問題を解決するには、<Connector --> に useBodyEncodingForURI="true" URIEncoding="UTF-8" を追加します。
<!--useBodyEncodingForURI="true": 取得リクエストと投稿リクエストで同じエンコーディングが使用されることを意味します -->
<!--URIEncoding="UTF-8": リクエストのエンコーディングは utf-8 です -->
<コネクタ URIEncoding="UTF-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" useBodyEncodingForURI="true"/>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue+Element+Springboot画像アップロードの実装例
  • 写真をアップロードして顔を認識する Vue+axios サンプルコード
  • Vue で axios を使用して画像をアップロードするときに発生する問題
  • Vue.jsクラウドストレージで画像アップロード機能を実現
  • Vue ページ内の公開マルチタイプ添付画像アップロード領域と適用可能な折りたたみパネル (サンプルコード)

<<:  入力テキストボックスの長さをコンテンツに応じて変更する方法

>>:  Tomcat8はcronologを使用してCatalina.Outログを分割します

推薦する

Linux の一般的なコマンドとショートカット キーの紹介

目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....

JS を使用してファイルを操作する (FileReader は --node の fs を読み取ります)

目次JS はファイルを読み取る FileReader書類イベントとメソッド基本的な使い方イベント処理...

Vue でルートをジャンプする方法をご存知ですか?

目次最初の方法: router-link (宣言型ルーティング) 2番目の方法: router.pu...

JavaScript Canvas で三目並べゲームを実装

この記事では、JavaScript Canvasで三目並べゲームを実装するための具体的なコードを参考...

マインスイーパゲームを実装するための jQuery プラグイン (3)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する方法に関する3番目の記事...

Linux Crontab シェル スクリプトを使用して第 2 レベルのスケジュールされたタスクを実装する方法

1. シェルスクリプトcrontab.shを書く #!/bin/bash step=1 #ステップ間...

シンプルな画像ドラッグ効果を実現する js

この記事では、簡単な画像ドラッグ効果を実現するためのjsの具体的なコードを参考までに紹介します。具体...

MySQLシリーズ マルチテーブル結合クエリ92および99構文例詳細チュートリアル

目次1. デカルト積現象2. 接続クエリの知識ポイントのまとめ1) 結合クエリとは何ですか? 2) ...

Sysbench の MySQL ベンチマーク プロセスの分析

序文1.ベンチマークは、テスト オブジェクトのクラスの特定のパフォーマンス指標の定量的、再現可能、比...

MySQLで最新のトランザクションIDを照会する方法

前に書いた内容: ビジネス ロジックの判断を行うために、最新のトランザクション ID を表示する必要...

CSSがページのレンダリングをブロックするかどうかについての簡単な説明

おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知って...

Docker を使用して ELK 環境を迅速にデプロイする方法の詳細な説明 (最新バージョン 5.5.1)

Linux サーバーに Docker をインストールした後、関連する公式 Docker イメージを...

Docker 入門インストールチュートリアル (初心者版)

ドクター紹介: Docker はコンテナ関連の技術です。簡単に言うと、さまざまなソフトウェアを実行で...

Mysql WorkBench のインストールと設定のグラフィックチュートリアル

この記事では、Mysql WorkBenchのインストールと設定のグラフィックチュートリアルを参考ま...

Saltstack に Zabbix サービスをデプロイする方法を説明します

目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...