后台

    @RequestMapping("/up")
public JSONObject up(@RequestParam("picFile") MultipartFile picture,HttpServletRequest request) { System.out.println(picture.getContentType()); //获取文件在服务器的储存位置
String path = request.getSession().getServletContext().getRealPath("/upload");
File filePath = new File(path);
System.out.println("文件的保存路径:" + path);
if (!filePath.exists() && !filePath.isDirectory()) {
System.out.println("目录不存在,创建目录:" + filePath);
filePath.mkdir();
} //获取原始文件名称(包含格式)
String originalFileName = picture.getOriginalFilename();
System.out.println("原始文件名称:" + originalFileName); //获取文件类型,以最后一个`.`为标识
String type = originalFileName.substring(originalFileName.lastIndexOf(".") + );
System.out.println("文件类型:" + type);
//获取文件名称(不包含格式)
String name = originalFileName.substring(, originalFileName.lastIndexOf(".")); //设置文件新名称: 当前时间+文件名称(不包含格式)
Date d = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
String date = sdf.format(d);
String fileName = date + name + "." + type;
System.out.println("新文件名称:" + fileName); //在指定路径下创建一个文件
File targetFile = new File(path, fileName); //将文件保存到服务器指定位置
try {
picture.transferTo(targetFile);
System.out.println("上传成功");
//将文件在服务器的存储路径返回
return null;
} catch (IOException e) {
System.out.println("上传失败");
e.printStackTrace();
return null;
} }

前台

<template>
<div>
<el-button type="success"
@click="dialogVisible2 = true">点击打开 Dialog</el-button>
<el-dialog title="上传头像"
:visible.sync="dialogVisible2"
width="30%">
<el-form :model="form">
<el-form-item :label-width="formLabelWidth"
ref="uploadElement">
<el-upload ref="upload"
action="#"
accept="image/png,image/gif,image/jpg,image/jpeg"
list-type="picture-card"
:limit=limitNum
:auto-upload="false"
:on-exceed="handleExceed"
:before-upload="handleBeforeUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="imgChange"
:class="{hide:hideUpload}">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%"
:src="dialogImageUrl"
alt="">
</el-dialog>
</el-form-item>
<el-form-item>
<el-button size="small"
type="primary"
@click="uploadFile">立即上传</el-button>
<el-button size="small"
@click="tocancel">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div> </template> <script>
export default {
data () {
return {
hideUpload: false,
dialogImageUrl: '',
dialogVisible: false,//图片预览弹窗
formLabelWidth: '80px',
limitNum: ,
form: {},
dialogVisible2: false//弹窗
}
},
methods: {
// 上传文件之前的钩子
handleBeforeUpload (file) {
if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
this.$notify.warning({
title: '警告',
message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
})
}
let size = file.size / / /
if (size > ) {
this.$notify.warning({
title: '警告',
message: '图片大小必须小于2M'
})
}
let fd = new FormData();//通过form数据格式来传
fd.append("picFile", file); //传文件
console.log(fd.get('picFile'));
this.api({
url: "/test/up",
method: "post",
data: fd,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((data) => { })
},
// 文件超出个数限制时的钩子
handleExceed (files, fileList) { },
// 文件列表移除文件时的钩子
handleRemove (file, fileList) {
this.hideUpload = fileList.length >= this.limitNum; },
// 点击文件列表中已上传的文件时的钩子
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
uploadFile () {
this.$refs.upload.submit() },
imgChange (files, fileList) {
this.hideUpload = fileList.length >= this.limitNum;
if (fileList) {
this.$refs.uploadElement.clearValidate();
}
},
tocancel () {
this.dialogVisible2 = false }
}
}
</script> <style lang="scss" >
.hide .el-upload--picture-card {
display: none;
}
</style>

vue+element+upload实现头像上传的更多相关文章

  1. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  2. vue 借用element-ui实现头像上传 axios发送请求

    <!-- 上传组件 --> <!-- 总结一下: action 写图片上传请求的路径 去路径哈 show-file-list就是当你上传时,是否会显示出上传的是哪一个图片,一般为fa ...

  3. vue头像上传与文件压缩

    工作中遇到的问题记录:vue开发头像上传组件,后端提供接口,需求为可相册上传,可相机拍摄上传,文件大小限制为2M 需求点分析 移动端调用相册/摄像头实现拍照 图片压缩,当前高像素的相机拍出来的图片都有 ...

  4. vue中使用axios post上传头像/图片并实时显示到页面

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码:   <div id="myPhoto ...

  5. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  6. 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能

    作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...

  7. [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

    很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...

  8. struts 头像上传

    java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...

  9. ASP.NET简单实现APP中用户个人头像上传和裁剪

    最近有个微信项目的用户个人中心模块中,客户要求用户头像不仅仅只是上传图片,还需要能对图片进行裁剪.考虑到flash在IOS和Android上的兼容性问题,于是想着能从js这块入手,在网上发现了devo ...

随机推荐

  1. Android程序员问答题

    前言 最近三个月内,不断地进行移动应用开发在线测试题,也积累了不一样的知识.这也将对android studio有很好的掌握,对将来面试也很有好处.那么我就分享给大家.分享是一种幸福,这是一种质的飞越 ...

  2. Python配置环境变量

    Python安装完成之后,运行cmd(win+R): 在控制台中输入Python,若安装完成,会在控制台中打开Python:   如果Python未添加至环境变量,则会提示"python不是 ...

  3. springboot2.0整合redis作为缓存以json格式存储对象

    步骤1 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spr ...

  4. 「2019-8-13提高模拟赛」树 (tree)

    传送门 Description 你有一个 \(n\)个点的树,第 \(i\)个点的父亲是\(p_i\).每个点有一个权值 \(t_i\) 和一个颜色黑或者白.所有点一开始都是白色. 你要进行 \(m\ ...

  5. 行业大秀:EasyEarth Show!

    EasyEarth三维可视化地理信息云平台是由北京四维益友信息技术有限公司自主研发的新一代面向三维可视化应用领域的基础信息系统平台. EasyEarth以数据管理为核心,围绕7大类基础数据,提供综合管 ...

  6. hive集成kerberos

    1.票据的生成 kdc服务器操作,生成用于hive身份验证的principal 1.1.创建principal # kadmin.local -q “addprinc -randkey hive/yj ...

  7. centos7下配置ftp服务器

    第一步,安装vsftpd这款ftp服务器软件,yum install -y vsftpd 第二步,设置vsftpd服务开机自启动,然后重启服务,查看ftp服务端口,centos6命令如下: #chkc ...

  8. git之fatal: Could not read from remote repository

    问题背景:在git bash中使用hexo g -d命令进行文章发布 详细错误信息: fatal: Could not read from remote repository. Please make ...

  9. 【大数据应用技术】作业十二|Hadoop综合大作业

    本次作业的要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3339 前言 本次作业是在<爬虫大作业>的基础上进行的 ...

  10. MySQL数据库事务的四大特性以及事务的隔离级别

    一.事务的四大特性(ACID) 如果一个数据库声称支持事务的操作,那么该数据库必须要具备以下四个特性: 1.原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚,因 ...