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代碼格式化功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08Vue3中實現(xiàn)發(fā)送網(wǎng)絡請求功能(最新推薦)
Axios是一個基于Promise的HTTP客戶端,可以在瀏覽器和Node.js中用于發(fā)送HTTP請求,本文主要介紹在Vue3中實現(xiàn)發(fā)送網(wǎng)絡請求功能,感興趣的朋友一起看看吧2023-12-12Vue+ElementUI技巧之自定義表單項label的文字提示方法
這篇文章主要給大家介紹了關(guān)于Vue+ElementUI技巧之自定義表單項label文字提示的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02vue+element-ui+sortable.js實現(xiàn)表格拖拽功能
這篇文章主要為大家詳細介紹了vue+element-ui+sortable.js實現(xiàn)表格拖拽功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04