現在的需求是:有一個上傳文件按鈕,當我們點擊按鈕時,可以選擇需要上傳的文件,確定後圖片顯示在界面上。
說明:本項目前端使用的Vue,後臺用的SSM搭建的,服務器是Tomcat,數據庫是MySQL
實現思路:
前端界面:當用戶點擊上傳文件按鈕,選中待上傳圖片並點擊確認後,這時應該把圖片數據傳給後臺。當後臺經過處理後返回結果,前端在根據響應結果做後續工作。
後端:後臺拿到前端傳過來的數據時,將圖片文件存到固定的文件夾下(這個問題是我思考了很久的,我認爲應該存在服務器下,原先我是存在本地文件夾下,然後用路徑去引,這樣說實話真的好笨,遇到了好多問題,搞了好久,被自己蠢哭)。文件存入後,返回響應結果。如果成功直接返回當前圖片的相對路徑,然後前端根據這個路徑展示圖片。
現在主要思考的問題是如何將圖片資源放在Tomcat下。
實現這個問題,我是在Tomcat下創建了一個虛擬目錄,今後所有的圖片文件視頻等資源都放在這個目錄文件夾下
後端實現上傳圖片步驟如下:
1. 在Tomcat下創建虛擬目錄
- 在tomcat的根目錄下創建一個名爲FileDir的目錄(當然這個目錄也可以建立在其它的地方)
- 在tomcat的conf/server.xml,配置虛擬目錄。增加下面這行
<Context path="/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" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 設置請求編碼格式 -->
<property name="defaultEncoding" value="UTF-8"></property>
</bean>
- 創建一個用於文件上傳的控制器類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;
/**
* 執行圖片上傳
*
* 解決前端獲取後臺數據中文亂碼: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);
// 如果保存文件的地址不存在,就先創建目錄
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類來返回數據,用來封裝返回的結果信息,以JSON格式返回給前端。代碼如下:
public class Result {
private boolean flag;//處理結果標識
private String message;//返回的結果信息
/* 省略get()和set()*/
}
- 前端Vue界面,發送請求給後臺後,通過動態綁定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>
- 到這一步,基本能實現圖片的上傳和預覽。但是有bug,中文亂碼問題。如果圖片路徑帶中文,src解析不出來,這個問題我也解決了很久。
找了各種百度,最後還是用的修改tomcat的server.xml配置文件方法。
我思考了一下出現亂碼的原因,因爲我的圖片資源是通過訪問tomcat拿到的,所以當img標籤動態綁定後臺傳過來的路徑時,提交的方式是get請求。前臺拿到的路徑中文是正確的,但是在tomcat下就會亂碼,tomcat默認的編碼方式是iso8859-1對中文編碼,而前端設置的編碼方式是utf-8,所以就出現了亂碼。
我的解決辦法是修改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"/>