使用elementUI實現(xiàn)將圖片上傳到本地的示例
查閱餓了嗎官方文檔可以了解上傳組件的使用方法。http://element.eleme.io/#/zh-CN/component/upload
前臺的頁面代碼為:
<el-upload class="upload-demo" ref="upload" action="http://127.0.0.1:20001/Administration/MediaApiLhUploadHandler" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" > <el-button slot="trigger" size="small" type="primary">選取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務(wù)器</el-button> </el-upload>
具體的綁定method的方法見官方文檔
上傳到本地,需要在后臺建立一個接口進(jìn)行接收,接口代碼如下:
@Override public void handle(List<FileItem> fileItemList, NetUpMediaapiImgUpload up, NetDownMediaapiImgUpload down, HttpServletResponse response) { System.out.println("path:"+getBasePath()); if (!CommUtil.isEmpityList(fileItemList)) { List<String> paths=new ArrayList(); for (FileItem fileItem : fileItemList) { String path = writeFile(fileItem); paths.add("../../static/img/"+fileItem.getName());//瀏覽器不允許使用絕對路徑 logger.info("上傳成功:" + path); logger.info("更新數(shù)據(jù)"); } down.setAllPath(paths); } } public static String writeFile(FileItem file){ String fileName = getFileName(file.getName()); fileName = formatFileName(fileName); fileName = getFilePrefix(fileName)+'.'+getFileSuffix(fileName); String path = getBasePath()+"/xmob-web/static/img/"; //path="E:\\xmob\\trunk\\xmob-web\\static\\img\\";//圖片應(yīng)該放在WEB文件夾的static目錄下 File desFile = new File(path); if (!desFile .exists() && !desFile .isDirectory()) { System.out.println("http://不存在"); desFile .mkdir(); } String result = null; try { InputStream in = file.getInputStream(); FileOutputStream out = new FileOutputStream(path+"/"+fileName); //創(chuàng)建一個緩沖區(qū) byte buffer[] = new byte[1024]; //判斷輸入流中的數(shù)據(jù)是否已經(jīng)讀完的標(biāo)識 int len = 0; //循環(huán)將輸入流讀入到緩沖區(qū)當(dāng)中,(len=in.read(buffer))>0就表示in里面還有數(shù)據(jù) while((len=in.read(buffer))>0){ //使用FileOutputStream輸出流將緩沖區(qū)的數(shù)據(jù)寫入到指定的目錄(path)當(dāng)中 out.write(buffer, 0, len); } in.close(); out.close(); //刪除處理文件上傳時生成的臨時文件 file.delete(); result = path+"/"+fileName; } catch (Exception e) { e.printStackTrace(); } return result; } /** * 獲取資源路徑 * @return */ private static String getBasePath(){ String template_dir = System.getProperty("user.dir"); return template_dir.substring(0,template_dir.lastIndexOf(File.separator)); } /** * 注意:不同的瀏覽器提交的文件名是不一樣的,有些瀏覽器提交上來的文件名是帶有路徑的,如: c:\a\b\1.txt,而有些只是單純的文件名,如:1.txt * 處理獲取到的上傳文件的文件名的路徑部分,只保留文件名部分 * @param fileName * @return */ private static String getFileName(String fileName){ fileName = fileName.substring(fileName.lastIndexOf(File.separator)+1); return fileName; } /** * 格式化文件名 * @param fileName * @return */ private static String formatFileName(String fileName){ String[] sArr = fileName.split("\\."); String str = sArr[0]; str = str.replaceAll(" ", ""); str = str.replaceAll("\\s+|_", "-"); String result = str+"."+sArr[1]; return result; } /** * 獲得文件名前綴 */ private static String getFilePrefix(String fileName){ fileName = formatFileName(fileName); String[] sArr = fileName.split("\\."); return sArr[0]; } /** * 獲得文件名后綴 */ private static String getFileSuffix(String fileName){ fileName = formatFileName(fileName); String[] sArr = fileName.split("\\."); return sArr[1]; }
以上這篇使用elementUI實現(xiàn)將圖片上傳到本地的示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js項目中管理每個頁面的頭部標(biāo)簽的兩種方法
這篇文章主要介紹了Vue.js項目中管理每個頁面的頭部標(biāo)簽的兩種方法,需要的朋友可以參考下2018-06-06vue watch偵聽器有無immediate的運(yùn)行順序問題
這篇文章主要介紹了vue watch偵聽器有無immediate的運(yùn)行順序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08一文詳解Vue的響應(yīng)式原則與雙向數(shù)據(jù)綁定
使用 Vue.js 久了,還是不明白響應(yīng)式原理和雙向數(shù)據(jù)綁定的區(qū)別?今天,我們就一起來學(xué)習(xí)一下,將解釋它們的區(qū)別,快跟隨小編一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08vue.js實現(xiàn)用戶評論、登錄、注冊、及修改信息功能
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)用戶評論、登錄、注冊、及修改信息功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05vue3如何解決各場景l(fā)oading過度(避免白屏尷尬!)
在開發(fā)的過程中點擊提交按鈕,或者是一些其它場景總會遇到loading加載,下面這篇文章主要給大家介紹了關(guān)于vue3如何解決各場景l(fā)oading過度的相關(guān)資料,避免白屏尷尬,需要的朋友可以參考下2023-03-03