查閱餓了嗎官方文件可以瞭解上傳元件的使用方法。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>
 

上傳到本地，需要在後臺建立一個介面進行接收，介面程式碼如下：

@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("//不存在");
			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];
	}