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ログを分割します

推薦する

Trash-Cli: Linux のコマンドラインごみ箱ツール

ゴミ箱は Linux ユーザー、Windows ユーザー、Mac ユーザーにとって非常に一般的なので...

ネイティブ Js で実装されたシンプルなシームレス スクロール カルーセルのサンプル コード

シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で...

MySQL 8.0.15 のインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

Linuxでプロセスが占有するポート番号を表示する

Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...

CSS3で実装されたテキストポップアップ効果

成果を達成する実装コードhtml <div>123WORDPRESS.COM</d...

JS の配列トラバーサルについて、一般的なループをいくつ知っていますか?

序文基本的なデータ構造として、配列とオブジェクトはさまざまなプログラミング言語で重要な役割を果たしま...

HTML 順序なしリスト 箇条書き 画像を使用した CSS の記述

少なくとも 5 冊のベストセラー書籍の順序なしリストを含む HTML ページを作成します。各書籍の前...

vue3 を使用したジグソーパズルゲームのリファクタリングの例

序文プロジェクト内のパズルゲーム(デジタル華容路とも呼ばれる)を再構築するのに 2 日かかりました。...

MySQL の replace と replace into の詳細な例 into_Mysql

MySQL の replace と replace into はどちらも頻繁に使用される関数です。...

Vue でルーティング遷移効果を実装する 4 つの方法

Vue ルーター トランジションは、Vue プログラムにパーソナライズされたエフェクトをすばやく簡単...

nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法

最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...

nginx で SSL 証明書を設定して https サービスを実装する方法

前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...

Node.jsはexpress-fileuploadミドルウェアを使用してファイルをアップロードします

目次プロジェクトを初期化するサーバーの作成クライアントを初期化するコンポーネントの記述ファイルアップ...

ウェブサイトデザインに関するヒント

実は、最近はウェブデザインについてよく耳にするようになりました。インターネット業界は今とても発展して...

HTML 画像 img にハイパーリンクを追加した後の醜い青い境界線の問題を解決する

HTML画像にハイパーリンクを追加すると醜い青い枠線が表示される次のように:解決: CSS スタイル...