(vue ajax上传图片)
最近在做一个手机端H5页面,需要做图片上传功能,就简单的做一个demo,后端使用的是thinkPHP5,代码此次省略,
下面贴上前端代码,
HTML 代码部分:
<input type="file" id="fileinp" accept="image/*" ref="avatarInput" @change="update" />
<br>
<img :src="avatar" style="display:block;width:35%;margin:20px auto ;border:1px solid #ccc;padding:10px" alt="照片展示区"><br>
<button @click="uploadbtn" >上传</button>
javascript代码部分:
var vapp = new Vue({
el : '#app',
data : {
avatar:"",
imgname:'',
},
created : function(){
},
methods : {
update:function(e){
let that = this
let file = e.target.files[0];
let imgsize = file.size;
if(imgsize > 5242880){
alert("图片大小不能超过5M"); return false;
}
},
uploadbtn:function(){
let that = this
let files = this.$refs.avatarInput.files[0];
let param = new FormData(); //创建form对象
param.append('file',files);//通过append向form对象添加数据
$.ajax({
url:'http://localhost/index.php/index/index/uploadimg',
type:'post',
data:param,
dataType:'json',
processData: false,
contentType:false,
success:function(res){
console.log(res)
that.avatar="http://localhost"+res.src;
},
error:function(err){
console.log(err)
}
})
}
}
});
有做的不好的地方,还请多多包涵