vue 上传图片

落日映苍穹つ 2022-06-02 23:05 216阅读 0赞

vue 用 file 的 change获取到上传文件的基本信息

然后拿到图片后用 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);
    		}
    	})  
    },