欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue+SSM實現(xiàn)圖片上傳預覽效果

 更新時間:2021年11月25日 16:13:29   作者:Yuki-W  
這篇文章主要為大家詳細介紹了Vue+SSM實現(xiàn)圖片上傳預覽效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

現(xiàn)在的需求是:有一個上傳文件按鈕,當我們點擊按鈕時,可以選擇需要上傳的文件,確定后圖片顯示在界面上。

說明:本項目前端使用的Vue,后臺用的SSM搭建的,服務器是Tomcat,數(shù)據(jù)庫是MySQL

實現(xiàn)思路:

前端界面:當用戶點擊上傳文件按鈕,選中待上傳圖片并點擊確認后,這時應該把圖片數(shù)據(jù)傳給后臺。當后臺經(jīng)過處理后返回結(jié)果,前端在根據(jù)響應結(jié)果做后續(xù)工作。

后端:后臺拿到前端傳過來的數(shù)據(jù)時,將圖片文件存到固定的文件夾下(這個問題是我思考了很久的,我認為應該存在服務器下,原先我是存在本地文件夾下,然后用路徑去引,這樣說實話真的好笨,遇到了好多問題,搞了好久,被自己蠢哭)。文件存入后,返回響應結(jié)果。如果成功直接返回當前圖片的相對路徑,然后前端根據(jù)這個路徑展示圖片。

現(xiàn)在主要思考的問題是如何將圖片資源放在Tomcat下。

實現(xiàn)這個問題,我是在Tomcat下創(chuàng)建了一個虛擬目錄,今后所有的圖片文件視頻等資源都放在這個目錄文件夾下

后端實現(xiàn)上傳圖片步驟如下:

1. 在Tomcat下創(chuàng)建虛擬目錄

在tomcat的根目錄下創(chuàng)建一個名為FileDir的目錄(當然這個目錄也可以建立在其它的地方)

在tomcat的conf/server.xml,配置虛擬目錄。增加下面這行
<Context path="/FileDir" docBase="G:\安裝包\Tomcat\安裝包\Tomcat 7.0\FileDir"/>

添加一張圖片1.jpg到虛擬目錄中,并啟動tomcat測試。訪問:http://localhost:8080/FileDir/1.jpg??梢哉埱蟮綀D片,說明配置成功。

2. 后端配置

引入文件上傳下載jar包:commons-fileupload-1.3.2.jar和commons-io-1.3.2.jar

編寫SpringMVC配置文件,添加如下代碼:

<!-- 配置文件上傳解析器 -->
 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <!-- 設置請求編碼格式 -->
  <property name="defaultEncoding" value="UTF-8"></property>
</bean>

創(chuàng)建一個用于文件上傳的控制器類FileUploadController

package com.wyf.controller;

import java.io.File;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.wyf.po.Result;
import com.wyf.service.FileServlet;

/**
 * 文件上傳控制器
 * 
 * @author ASUS
 *
 */
@RestController
public class FileUploadController {

 @Autowired
 private FileServlet fileServlet;

 /**
  * 執(zhí)行圖片上傳
  * 
  * 解決前端獲取后臺數(shù)據(jù)中文亂碼:produces={"application/json;charset=UTF-8"}
  */
 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST, produces = { "application/json;charset=UTF-8" })
 public Result handleUploadImg(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
  // 判斷所上傳文件是否存在
  if (!file.isEmpty()) {
   // 獲取文件上傳的原始名稱
   String originalFilename = file.getOriginalFilename();
   //存儲圖片的路徑
   String rootPath = "G:\\安裝包\\Tomcat\\安裝包\\Tomcat 7.0\\FileDir\\";
   // 設置上傳文件的保存地址目錄
   String path = "\\upload\\images\\applyShop";
   String dirPath = rootPath + path + "\\";
   File filePath = new File(dirPath);
   // 如果保存文件的地址不存在,就先創(chuàng)建目錄
   if (!filePath.exists()) {
    filePath.mkdirs();
   }
   // 重新命名
   String newFileName = UUID.randomUUID() + "_" + originalFilename;
   try {
    // 使用MultipartFile接口的方法完成文件上傳到指定位置
    file.transferTo(new File(dirPath + newFileName));
   } catch (Exception e) {
    e.printStackTrace();
    return new Result(false, "上傳錯誤");
   }
   // 返回相對路徑
   String srcPath = path + "\\" + newFileName;
   fileServlet.addUploadFIle(srcPath);
   return new Result(true, srcPath);
  }
  return new Result(false, "文件不存在");
 }
}

這里用了一個Result類來返回數(shù)據(jù),用來封裝返回的結(jié)果信息,以JSON格式返回給前端。代碼如下:

public class Result {

 private boolean flag;//處理結(jié)果標識
 private String message;//返回的結(jié)果信息
 /* 省略get()和set()*/
}

前端Vue界面,發(fā)送請求給后臺后,通過動態(tài)綁定src屬性,獲取拿到的圖片路徑

<template>
  <div class="upload">
    <div class="img-container">
      <!-- 上傳預覽圖片 -->
      <img :src="src" alt />
    </div>
    <!-- 文件上傳的input -->
    <form class="input-file" enctype="multipart/form-data" method="post">
      <input type="file" ref="upload" name="uploadImg" id="file" @change="getFile" multiple />
      <!-- label一個 for 屬性指向input的唯一 id ,這樣點擊label就相當于點擊input -->
      <label for="file">上傳圖片</label>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
     src:require('../../assets/dist/images/admin.jpg'),
     srcPath:''//圖片相對路徑
    };
  },
  methods: {
   getFile(e) {
    let files = e.target.files[0]; //獲取上傳圖片信息
  let formData = new FormData()
       formData.append('file',files)
      this.$axios.post("/api/uploadImg",formData).then(result=>{
       if(result.data.flag){
            this.srcPath = result.data.message
            this.src = `/imgURL${this.srcPath}`
            }else{
            console.log(result.data.message)
        }
      })
    }
  }
};
</script>

到這一步,基本能實現(xiàn)圖片的上傳和預覽。但是有bug,中文亂碼問題。如果圖片路徑帶中文,src解析不出來,這個問題我也解決了很久。

找了各種百度,最后還是用的修改tomcat的server.xml配置文件方法。
我思考了一下出現(xiàn)亂碼的原因,因為我的圖片資源是通過訪問tomcat拿到的,所以當img標簽動態(tài)綁定后臺傳過來的路徑時,提交的方式是get請求。前臺拿到的路徑中文是正確的,但是在tomcat下就會亂碼,tomcat默認的編碼方式是iso8859-1對中文編碼,而前端設置的編碼方式是utf-8,所以就出現(xiàn)了亂碼。

我的解決辦法是修改tomcat的server.xml配置文件

在tomcat的server.xml中找到

<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>

將這行修改為

<!--解決地址欄輸入中文亂碼問題在<Connector中加入 useBodyEncodingForURI="true" URIEncoding="UTF-8" -->
<!--useBodyEncodingForURI="true":代表get和post請求用一樣的編碼  -->
<!--URIEncoding="UTF-8":請求編碼為utf-8  -->
<Connector URIEncoding="UTF-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"     useBodyEncodingForURI="true"/>

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能

    vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能

    這篇文章主要介紹了vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • Vue3中實現(xiàn)發(fā)送網(wǎng)絡請求功能(最新推薦)

    Vue3中實現(xiàn)發(fā)送網(wǎng)絡請求功能(最新推薦)

    Axios是一個基于Promise的HTTP客戶端,可以在瀏覽器和Node.js中用于發(fā)送HTTP請求,本文主要介紹在Vue3中實現(xiàn)發(fā)送網(wǎng)絡請求功能,感興趣的朋友一起看看吧
    2023-12-12
  • Vue中的路由配置項meta使用解析

    Vue中的路由配置項meta使用解析

    這篇文章主要介紹了Vue中的路由配置項meta使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue中組件的name屬性含義和用法示例

    vue中組件的name屬性含義和用法示例

    組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-12-12
  • vue項目實現(xiàn)圖片上傳功能

    vue項目實現(xiàn)圖片上傳功能

    這篇文章主要為大家詳細介紹了vue項目實現(xiàn)圖片上傳功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • 一篇超詳細的Vue-Router手把手教程

    一篇超詳細的Vue-Router手把手教程

    這篇文章主要給大家介紹了關(guān)于Vue-Router的相關(guān)資料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應用,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2021-08-08
  • Vue+ElementUI技巧之自定義表單項label的文字提示方法

    Vue+ElementUI技巧之自定義表單項label的文字提示方法

    這篇文章主要給大家介紹了關(guān)于Vue+ElementUI技巧之自定義表單項label文字提示的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2024-02-02
  • vue+element-ui+sortable.js實現(xiàn)表格拖拽功能

    vue+element-ui+sortable.js實現(xiàn)表格拖拽功能

    這篇文章主要為大家詳細介紹了vue+element-ui+sortable.js實現(xiàn)表格拖拽功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue3實現(xiàn)數(shù)字滾動特效實例詳解

    vue3實現(xiàn)數(shù)字滾動特效實例詳解

    這篇文章主要為大家介紹了vue3實現(xiàn)數(shù)字滾動特效實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • vue引入element-ui之后,頁面是空白的問題及解決

    vue引入element-ui之后,頁面是空白的問題及解決

    這篇文章主要介紹了vue引入element-ui之后,頁面是空白的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01

最新評論