使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例
查閱餓了嗎官方文檔可以了解上傳組件的使用方法。http://element.eleme.io/#/zh-CN/component/upload
前臺(tái)的頁(yè)面代碼為:
<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的方法見(jiàn)官方文檔
上傳到本地,需要在后臺(tái)建立一個(gè)接口進(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());//瀏覽器不允許使用絕對(duì)路徑
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)建一個(gè)緩沖區(qū)
byte buffer[] = new byte[1024];
//判斷輸入流中的數(shù)據(jù)是否已經(jīng)讀完的標(biāo)識(shí)
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();
//刪除處理文件上傳時(shí)生成的臨時(shí)文件
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));
}
/**
* 注意:不同的瀏覽器提交的文件名是不一樣的,有些瀏覽器提交上來(lái)的文件名是帶有路徑的,如: 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實(shí)現(xiàn)將圖片上傳到本地的示例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法
本篇文章主要介紹了使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
vue-cli之引入Bootstrap問(wèn)題(遇到的坑,以及解決辦法)
這篇文章主要介紹了vue-cli之引入Bootstrap問(wèn)題(遇到的坑,以及解決辦法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
解決vue-router在同一個(gè)路由下切換,取不到變化的路由參數(shù)問(wèn)題
今天小編就為大家分享一篇解決vue-router在同一個(gè)路由下切換,取不到變化的路由參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
el-tree的實(shí)現(xiàn)葉子節(jié)點(diǎn)單選的示例代碼
本文主要介紹了el-tree的實(shí)現(xiàn)葉子節(jié)點(diǎn)單選的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
裝飾者模式在日常開(kāi)發(fā)中的縮影和vue中的使用詳解
這篇文章主要為大家介紹了裝飾者模式在日常開(kāi)發(fā)中的縮影和vue中的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
vue實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果(示例代碼)
這篇文章主要介紹了vue中實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果,本文通過(guò)圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02

