圖片的上傳以及Nginx的使用實現上傳圖片的回顯

1.圖片的上傳:

圖片上傳使用的是easyUI的組件,并不是自己實現的.

實現圖片上傳的前提是配置了文件上傳的解析器(applicationContext-mvc.xml):

<!-- 配置文件上傳的解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="10485670"></property><property name="defaultEncoding" value="UTF-8"></property> <!-- 解決文件是中文的問題 --> </bean>

1.1 前端的代碼:

kingEditorParams : {filePostName : "uploadFile",uploadJson : '/pic/upload',dir : "image" },

這是前端common.js實現的封裝的代碼,當一點擊開始上傳的時候,就是訪問的這個路徑,會把圖片發送給服務端(下面這張圖是使用了Nginx反向代理之后實現的圖片回顯的效果)

當一點擊開始上傳之后,會把圖片通過post請求發送給服務端,處理請求的路徑是/pic/upload,文件上傳的名字是uploadFile

1.2 服務端的實現:

FileController:具體的業務放在service層

@Controller public class FileController {@Autowiredprivate FileUploadService fileUploadService;@RequestMapping("/pic/upload")@ResponseBodypublic PicUploadResult uploadPic(MultipartFile uploadFile) {return fileUploadService.uploadPic(uploadFile);} }

controller層接受請求的參數名字是uploadFile(這個是固定的,前端傳過來的),參數的類型是MultipartFile,MultipartFile是一個接口,具體的類型是org.springframework.web.multipart.commons.CommonsMultipartFile,配置的文件上傳解析器會將客戶端傳過來的文件解析成CommonsMultipartFile.

FileUploadService:

@Service

public class FileUploadServiceImpl implements FileUploadService {

/*** Spring容器如何動態的獲取數據* @Value : 實現數據的動態獲取* 說明:@value 注解可以直接為String或者基本類型賦值* 同時,可以利用spring的機制可以為array , list , mapp , set properties 賦值* * 注意事項:* 1.在SSM框架中,該注解需要依賴@Service注解(Spring容器內部才能使用) 在Controller注解可能不好使* SpringMVC容器 跟 Spring容器 是兩個不同的容器* 2.如果使用SpringBoot則任何地方都能用*/ @Value("${image.localDir}") private String localDir; @Value("${image.urlPre}") private String urlPre;@Override public PicUploadResult uploadPic(MultipartFile uploadFile) { // 圖片上傳PicUploadResult result = new PicUploadResult();// 1.判斷是否為圖片 abc.jpgString fileName = uploadFile.getOriginalFilename();// 使用正則表達式進行判斷if (!fileName.matches("^.*(jpg|png|gif)$")) { // . 代表任意的字符 * 代表有任意多個 的// 表示不是圖片result.setError(1);return result;}try {/*** ImageIO是javax下面的一個工具類*/// 2.判斷是否為惡意程序 uploadFile.getInputStream() 文件流BufferedImage bufferedImage = ImageIO.read(uploadFile.getInputStream());// 3.獲取圖片寬度和高度 (圖片寬高為 0 ,則圖片是假的圖片)int height = bufferedImage.getHeight();int width = bufferedImage.getWidth();if (height == 0 || width == 0) {result.setError(1); // 假圖片return result;}// 4.準備文件存儲的路徑()// String localDir = "d:/file/"; // 本地文件夾// 5.實現分文件存儲 yyyy/MM/dd 以 天 為單位 分文件String dateDir = new SimpleDateFormat("yyyy/MM/dd").format(new Date());// 6.形成保存圖片的文件夾 d:/file/yyyy/MM/dd (文件存儲的根目錄)String picDir = localDir + dateDir;// 7.生成文件夾File picFile = new File(picDir); // 文件夾的文件執行if (!picFile.exists()) { // 文件夾不存在 就創建文件夾picFile.mkdirs();}// 8.重命名上傳的文件名字 (避免重名)String uuid = UUID.randomUUID().toString().replace("-", ""); // asa22exac-adsfafadsf-3fddsfds// 生成隨機數int randomNum = new Random().nextInt(999); // 生成隨機數 (0-999)// 獲取文件的后綴名String fileType = fileName.substring(fileName.lastIndexOf(".")); // .jpg// 拼文件名String realFileName = uuid + randomNum + fileType; // 真實的文件名稱// 9生成文件的本地磁盤的路徑 d:/file/yyyy/MM/dd/wqrwadasfiuoew800.jpgString localPath = picDir + "/" + realFileName;// 10實現文件的上傳uploadFile.transferTo(new File(localPath));// 11添加文件的寬度,高度 需要返回result.setHeight(height + "");result.setWidth(width + "");// 12準備文件的虛擬路徑// http://image.jt.com/file/2018/05/07/radweedwsaf210.jpg// String urlPre = "http://image.jt.com/";String urlPath = urlPre + dateDir + "/" + realFileName;result.setUrl(urlPath);} catch (IOException e) { // 不是圖片會拋異常e.printStackTrace();result.setError(1); // 表示為惡意程序return result;}return result;} }

分析:客戶端上傳文件,需要先判斷上傳的文件是不是圖片,先使用正則表達式進行第一層過濾,如果正則的驗證過了之后,但是可能是偽圖片,所以還得使用ImageIO來將上傳的文件進行轉換成BufferedImage,如果轉換失敗,那么可能不是圖片,轉換成功之后,還得獲取圖片的寬,高,如果寬高任何一個為0,就說明轉換之后不是圖片,也就說明上傳的不是圖片.

---

如果這些驗證都過了,說明上傳的文件是圖片,那么我們就需要將圖片保存起來.由于上傳的圖片名字是固定的,而且保存的時候如果使用原始的圖片名字的話,很可能 會出現名字沖突的問題,為了盡可能地避免重現保存圖片出現沖突的問題,就需要服務端生產隨機的名字,這里采用一種更安全的做法,先使用UUID生成一串隨機數, 但是這種方式生成的隨機數是根據時間戳來生成的(同一毫秒值生成的uuid隨機數可能會一樣),所以還得使用Randoom再生成隨機的數字,將uuid生成的隨機串 (去掉'-')加上生成的隨機數字組成圖片的名字,這種情況出現重名的概率比較小

---

注意拿到了圖片文件之后,還需要將圖片文件保存,所有的圖片都保存在一個大的文件夾下(d:/file),但是這個文件夾路徑是不能寫死的,得用配置文件進行配置,還有 一點就是圖片的回顯需要一個虛擬的路徑.圖片上傳之后,

圖片的上傳之后的回顯是由easyUI來實現的,但是要求是從服務端返回個數據的頁面的json數據是有要求的,

{"error":0,"url":"圖片的保存路徑","width":圖片的寬度,"height":圖片的高度}

參數說明： 0代表是一張圖片，如果是0，前臺才可以解析并顯示。1代表不是圖片， 不顯示如果不設置寬度和高度，則默認用圖片原來的大小，所以不用設置

---

返回的就是 PicUploadResult

public class PicUploadResult {private Integer error=0; //圖片上傳錯誤不能拋出，拋出就無法進行jsp頁面回調，所以設置這個標識，0表示無異常，1代表異常private String url;private String width;private String height; ~~~ 此處省略get,set方法

這個返回的對象里面的url需要在服務端進行封裝,封裝的就是easyUI實現回顯圖片的虛擬路徑,這個url是虛擬路徑:

理解這個url(虛擬路徑) : 圖片有專門的圖片服務器,圖片的存儲也是在專門的服務器里面,異常easyUI要進行圖片的回顯,就需要訪問圖片服務器.目前我們這個 項目保存圖片是保存在d:file里面,目前的水平只能做到保存在本機(還做不到保存在別的服務器),但是做圖片回顯的時候,我們就希望模擬實現那種跨服務器的 圖片訪問(現在用的是同一臺主機),所以返回的url是一個虛擬路徑,http://image.jt.com/.這就相當于當圖片回顯時,訪問的是這個域名下的圖片.

為了實現程序的可擴展性,可以把兩個變量寫在配置文件里面,一個是localDir(圖片保存的本地根目錄),還有一個是urlPre(圖片回顯時需要訪問的網址)

有了這個properties配置文件之后,好需要加載這個配置文件(在applicationContext里面進行加載)

<bean id="placeholderConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"><!-- 設定參數 Resource[] locations 數組類型 --><property name="locations"><!-- 可以加多個 --><list><value>classpath:/properties/jdbc.properties</value><value>classpath:/properties/image.properties</value></list> <!-- 或者array --></property></bean>

這樣在service層就可以直接使用@Value()注解進行動態地賦值注入了

總結

以上是生活随笔為你收集整理的如何实现图片的上传-(上传到本地)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。