現在の要件は、ファイルのアップロード ボタンがあることです。ボタンをクリックすると、アップロードするファイルを選択し、確認すると、インターフェイスに画像が表示されます。 注:このプロジェクトでは、フロントエンドに Vue、バックエンドに SSM、サーバーに Tomcat、データベースに MySQL を使用します。 実装のアイデア:フロントエンド インターフェイス: ユーザーがファイルのアップロード ボタンをクリックし、アップロードする画像を選択して確認をクリックすると、画像データがバックエンドに送信されます。バックエンドが処理後に結果を返すと、フロントエンドは応答結果に基づいて後続の作業を実行します。 バックエンド: バックエンドはフロントエンドから送信されたデータを取得すると、画像ファイルを固定フォルダーに保存します (この問題については長い間考えていました。サーバー上に保存する必要があると思います。元々はローカルフォルダーに保存し、パスを使用して参照していました。正直に言うと、これは本当に愚かです。多くの問題に遭遇し、長い時間を費やしました。自分の愚かさに泣きました)。ファイルが保存されると、応答結果が返されます。成功した場合、現在の画像の相対パスが直接返され、フロントエンドはこのパスに従って画像を表示します。 現在の主な問題は、画像リソースを Tomcat の下に配置する方法です。 この問題を解決するために、Tomcat の下に仮想ディレクトリを作成し、すべての画像ファイル、ビデオ、その他のリソースをこのディレクトリ フォルダーに配置します。 バックエンドで写真をアップロードする手順は次のとおりです。 1. Tomcatの下に仮想ディレクトリを作成する tomcatのルートディレクトリにFileDirという名前のディレクトリを作成します(もちろん、このディレクトリは他の場所に作成することもできます)。 tomcat の conf/server.xml で、仮想ディレクトリを設定します。次の行を追加します 仮想ディレクトリに画像 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 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 入力テキストボックスの長さをコンテンツに応じて変更する方法
>>: Tomcat8はcronologを使用してCatalina.Outログを分割します
ゴミ箱は Linux ユーザー、Windows ユーザー、Mac ユーザーにとって非常に一般的なので...
シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で...
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...
Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...
成果を達成する実装コードhtml <div>123WORDPRESS.COM</d...
序文基本的なデータ構造として、配列とオブジェクトはさまざまなプログラミング言語で重要な役割を果たしま...
少なくとも 5 冊のベストセラー書籍の順序なしリストを含む HTML ページを作成します。各書籍の前...
序文プロジェクト内のパズルゲーム(デジタル華容路とも呼ばれる)を再構築するのに 2 日かかりました。...
MySQL の replace と replace into はどちらも頻繁に使用される関数です。...
Vue ルーター トランジションは、Vue プログラムにパーソナライズされたエフェクトをすばやく簡単...
最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...
前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...
目次プロジェクトを初期化するサーバーの作成クライアントを初期化するコンポーネントの記述ファイルアップ...
実は、最近はウェブデザインについてよく耳にするようになりました。インターネット業界は今とても発展して...
HTML画像にハイパーリンクを追加すると醜い青い枠線が表示される次のように:解決: CSS スタイル...