您好,登錄后才能下訂單哦!
查閱餓了嗎官方文檔可以了解上傳組件的使用方法。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 size="small" type="success" @click="submitUpload">上傳到服務器</el-button> </el-upload>
具體的綁定method的方法見官方文檔
上傳到本地,需要在后臺建立一個接口進行接收,接口代碼如下:
@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("更新數據"); } 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\\";//圖片應該放在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); //創建一個緩沖區 byte buffer[] = new byte[1024]; //判斷輸入流中的數據是否已經讀完的標識 int len = 0; //循環將輸入流讀入到緩沖區當中,(len=in.read(buffer))>0就表示in里面還有數據 while((len=in.read(buffer))>0){ //使用FileOutputStream輸出流將緩沖區的數據寫入到指定的目錄(path)當中 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實現將圖片上傳到本地的示例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。