vue 上传图片
vue 用 file 的 cahnge获取到上传文件的基本信息然后拿到图片后用 beta64 转化预览图片uploadChange(event){this.files = event.target.files[0]; //用来提交的图片,多个用数组装起来if(event.target.files.length>0){this.$conf.getBas
·
vue 用 file 的 change获取到上传文件的基本信息
<input type="file" name="file" class="upload__input" @change="uploadChange" accept="image/png,image/gif">
<div class="imgSrc">
<img :src="imgDataUrl" >
</div>
然后拿到图片后用 beta64 转化预览图片
uploadChange(event){
if(event.target.files.length>0){
this.files = event.target.files[0]; //提交的图片
this.$conf.getBase64(event.target,(url)=>{
this.imgDataUrl = 'data:image/png;base64,'+url; //显示的图片
});
}
},
beta64方法
getBase64 : function(file,callback){ var maxWidth = 640; if(file.files && file.files[0]){ var thisFile = file.files[0]; if(thisFile.size>2019200){ // mualert.alertBox("图片不能超过800K"); alert("图片不能超过2M"); return }; var reader = new FileReader(); reader.onload = function(event){ var imgUrl = event.target.result; var img = new Image(); img.onload = function(){ var canvasId = 'canvasBase64Imgid', canvas = document.getElementById(canvasId); if(canvas!=null){document.body.removeChild(canvas);} var canvas = document.createElement("canvas"); canvas.innerHTML = 'New Canvas'; canvas.setAttribute("id", canvasId); canvas.style.display='none'; document.body.appendChild(canvas); canvas.width = this.width; canvas.height = this.height; var imageWidth = this.width, imageHeight = this.height; if (this.width > maxWidth){ imageWidth = maxWidth; imageHeight = this.height * maxWidth/this.width; canvas.width = imageWidth; canvas.height = imageHeight; } var context = canvas.getContext('2d'); context.clearRect(0, 0, imageWidth, imageHeight); context.drawImage(this, 0, 0, imageWidth, imageHeight); var base64 = canvas.toDataURL('image/png',1); var imgbase = base64.substr(22); callback(imgbase) //this.imgUrl = } img.src = imgUrl; } reader.readAsDataURL(file.files[0]); } },
提交表单addSub(){ let data = {}; let files = this.files; let param = new FormData(); //创建form对象 if(files!=''){ param.append('file', files,files.name); //单个图片 ,多个用循环 append 添加 }else{ this.$message.error('请添加图片'); } param.append('param', JSON.stringify(data));//添加form表单中其他数据 let config = { headers:{'Content-Type':'multipart/form-data'} }; //添加请求头 this.$ajax.post(this.ajaxUrl +'addStation',param,config) .then(response=>{ var ret = response.data; if(ret.status){ this.$message({ message : '新增成功', type : 'success' }) //清空数据 this.imgDataUrl = ''; this.files = []; }else{ this.msg(ret.msg); } }) },
更多推荐
已为社区贡献17条内容
所有评论(0)