html内容
<input v-if="uploadingFlag" @change="handleFileChange" ref="inputer" type="file" accept="image/png,image/gif,image/jpeg,image/bmp" mutiple="mutiple" >
js内容
handleFileChange:function (e) {
let inputDOM = this.$refs.inputer;
// 通过DOM取文件数据
this.file = inputDOM.files[0];
this.errText = '';
let size = Math.floor(this.file.size / 1024);
if (size > 4096) {
// 这里可以加个文件大小控制
alert('您上传的图片大了')
return false
}
// 触发这个组件对象的input事件
this.$emit('input', this.file);
// 这里就可以获取到文件的名字了
this.fileName = this.file.name;
// 这里加个回调也是可以的
this.onChange && this.onChange(this.file, inputDOM.value);
// 在获取到文件对象进行预览就行了!
this.imgPreview(this.file);
}
imgPreview :function(file) {
let self = this;
// 看支持不支持FileReader
if (!file || !window.FileReader) return;
if (/^image/.test(file.type)) {
// 创建一个reader
var reader = new FileReader();
// 将图片将转成 base64 格式
reader.readAsDataURL(file);
// 读取成功后的回调
reader.onloadend = function () {
self.userLogo=this.result;
self.upPhoto(self.userLogo);
}
}
}
upPhoto:function(loading){
var self=this;
// self.uploadingLayer=true
self.$http.post(
'/tools/submit_ajax.ashx?action=user_avatar',
{'Filedata':loading,'uptype':'1'},
{emulateJSON: true}
).then(function(data){
var obj=data.data;
console.log(data)
if(obj.status==1){
// self.uploadingLayer=false
}
},function(error){
});
}