大家好,又见面了,我是你们的朋友全栈君。
html代码:
<div id="headImg">
<div id="myPhoto">
<div class="viewPhoto" @click="monidianji">
<i class="el-icon-plus"></i>
<img :src=imageSave alt="" id="portrait" style="width: 200px;height: 200px" />
</div>
<p>提示:请选择本地图片上传,支持各种图片格式</p>
<div class="listBox">
<input type="file" id="saveImage" name="myphoto">
</div>
<div class="save">
<el-button type="danger" size="small" @click="imageSubmit">上传头像</el-button>
<div style="margin-bottom:70px;padding-top: 30px"><span>{
{uploadDate}}</span></div>
</div>
</div>
</div>
css代码:
#headImg{
margin-left: 50px;
.viewPhoto{
border: 1px rgba(99, 199, 210, 0.79) dashed;
width: 200px;
height: 200px;
}
#saveImage{
display: none;
}
.save{
margin: 30px auto;
}
.viewPhoto{
position: relative;
float: left;
margin-right: 10%;
}
.el-icon-plus{
font-size: 50px;
color: rgba(99, 199, 210, 0.79);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 50%;
text-align: center;
}
}
js代码:
1.双向绑定数据
data:{
return{
imageSave:"",//图片路径
uploadDate:"",//上传时间
}
}
2.模拟点击input file
//图片库模拟点击input file
monidianji(){
document.getElementById('saveImage').click()
}
3.挂载预览图片
mounted(){
this.yulan();//预览图片
},
//实时显示该图片在页面 预览
yulan(){
document.getElementById('saveImage').onchange = function () {
var imgFile = this.files[0];
var fr = new FileReader();
fr.onload = function () {
document.getElementById('portrait').src = fr.result;
};
fr.readAsDataURL(imgFile);
}
}
4.上传图片
//上传
imageSubmit(){
let _this=this
let x = document.getElementById('saveImage').files[0];
let params = new FormData() ; //创建一个form对象
params.append('file',x,x.name); //append 向form表单添加数据
//添加请求头 通过form添加的图片和文件的格式必须是multipart/form-data
let config = {headers:{'Content-Type':'multipart/form-data'}};
//发起ajax请求存放在服务端
this.$axios.post(api.personHeadImg,params,config)
.then(function(res){
_this.imageSave = res.data.lujing;
let mydate=new Date()
_this.uploadDate="上传时间:"+mydate.toLocaleString()
_this.$notify({
type: 'success',
message: '上传成功!',
offset:160
})
}).catch(function (error) {
console.log(error);
_this.$notify({
type: 'warning',
message: '上传失败!',
offset:160
})
})
},
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148359.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...