查閱餓了嗎官方文檔可以了解上傳組件的使用方法。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">上傳到服務器</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("http://.");		String str = sArr[0];		str = str.replaceAll(" ", "");		str = str.replaceAll("http://s+|_", "-");		String result = str+"."+sArr[1];		return result;	} 	/**	 * 獲得文件名前綴	 */	private static String getFilePrefix(String fileName){		fileName = formatFileName(fileName);		String[] sArr = fileName.split("http://.");		return sArr[0];	} 	/**	 * 獲得文件名后綴	 */	private static String getFileSuffix(String fileName){		fileName = formatFileName(fileName);		String[] sArr = fileName.split("http://.");		return sArr[1];	}