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

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

パッケージ 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 {

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

<テンプレート>
  <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(結果.データ.メッセージ)
        }
      })
    }
  }
};
</スクリプト>

<コネクタ 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"/>