中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

使用elementUI實現將圖片上傳到本地的示例

發布時間:2020-10-03 15:27:35 來源:腳本之家 閱讀:209 作者:萬萬沒想到367 欄目:web開發

查閱餓了嗎官方文檔可以了解上傳組件的使用方法。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實現將圖片上傳到本地的示例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

贞丰县| 湖州市| 太和县| 怀来县| 龙川县| 柯坪县| 泰宁县| 黄龙县| 洛浦县| 同德县| 施秉县| 海兴县| 临夏市| 西盟| 孝昌县| 新巴尔虎左旗| 谢通门县| 焦作市| 桂林市| 克什克腾旗| 尚志市| 明水县| 神木县| 凤阳县| 古丈县| 大姚县| 通许县| 微博| 荥阳市| 荔浦县| 江达县| 石河子市| 达拉特旗| 淮阳县| 根河市| 泰和县| 泰顺县| 鄂托克前旗| 辽中县| 错那县| 武穴市|