关于vue使用input file如何进行图片上传并显示上传图片
1.首先创建input等代码<div style="display: flex;width: 100%;margin-top: 10px;height: 100px;padding-top: 10px"><label for="uploadImg"><img :src="uploadImgUrl" alt="未发现图片" style="height: 100px;wi
·
- 1.首先创建input等代码
<div style="display: flex;width: 100%;margin-top: 10px;height: 100px;padding-top: 10px">
<label for="uploadImg">
<img :src="uploadImgUrl" alt="未发现图片" style="height: 100px;width: 100px">
</label>
<input type="file" id="uploadImg" style="display: none" accept="image/jpeg,image/x-png,image/gif" v-on:change="uploadImg($event)">
</div>
我们使用了一个div标签包住了上传图片的内容,并将input变迁通过display:none进行了隐藏,使用label进行上传形式的改变,我选择了使用一个图片进行点击时触发事件
- 2.设置vue中data里面的图片数据绑定,这个图片Url就是上面的图片默认展开形式
data () {
return {
/*有个默认上传图片*/
uploadImgUrl:require('../../../assets/MyIcon/uploadImg.png'),
}
}
- 3.开始写js代码了
uploadImg(e){
let that = this;
let file = e.target.files[0];
//KB单位,可以获取图片的大小,到时候可以根据图片大小进行选择上传
let imgSize = file.size/1024;
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
// 图片的 base64 格式, 可以直接当成 img 的 src 属性值
let dataURL = reader.result;
//在这里就可以进行图片地址的获取了,到时候后台上传的图片就是根据这个来的
//that.uploadImgUrl = dataURL;这个就是展示了上传的图片
that.uploadImgUrl = dataURL;
//这里就可以发送请求了,也可以选择之后发送,反正图片地址都获取了
$.ajax({
type:"post",
url:"上传的地址",
async:true,
data:{
imgUrl:dataURL,
avatar_wx:1,
token:token,
uid:uid,
},
success:function(e){
that.avatar=dataURL;
alert('修改成功');
}
});
}
},
下面就是点击后修改的图片
- 4.最后,基本就这样完成了
更多推荐
已为社区贡献3条内容
所有评论(0)