没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
使用使用elementUI实现将图片上传到本地的示例实现将图片上传到本地的示例
今天小编就为大家分享一篇使用elementUI实现将图片上传到本地的示例,具有很好的参考价值,希望对大家有
所帮助。一起跟随小编过来看看吧
查阅饿了吗官方文档可以了解上传组件的使用方法。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("//不存在");
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;
}
/**
* 获取资源路径
资源评论
weixin_38614112
- 粉丝: 3
- 资源: 930
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功