[JavaScript]将图片base64去头部上传后端，前端 img直接显示base64图片

与Vue结合，使用weui 的上传图片

1.引入css

2.html

   

        

            
            一
        
        

            
        
    

3.获取图片base64去头部，并上传图片base64数据

methods:{
	iconChange: function ($event) {
	      function getObjectURL(file) {
	                var url = null;
	                if (window.createObjectURL != undefined) {
	                    url = window.createObjectURL(file);
	                } else if (window.URL != undefined) { // mozilla(firefox)  
	                    url = window.URL.createObjectURL(file);
	                } else if (window.webkitURL != undefined) { // webkit or chrome  
	                    url = window.webkitURL.createObjectURL(file);
	                }
	                return url;
	            }
	            var _this = this;
	            var file = $event.target.files[0];
	            console.log(file.name);
	            
	           //用文件名name后缀判断文件类型，用size属性判断文件大小不能超过500k ，前端直接判断的好处，免去服务器的压力。
	           
	           if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name) ) {
	           
	               	return layer.alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
	               	
	           }else if (file.size >  500 * 1024) {
	           
	                 return layer.alert("文件太大！请上传不超过500k的图片"); 
	            }
	            var src = getObjectURL(file);//获取文件信息 	
	
	            app.show = true;
	            app.icon = src;
	
	            //base64
	            var reader = new FileReader();
	            reader.onload = function () {
	                // 通过 reader.result 来访问生成的 base64 DataURL
	                var base64 = reader.result;
	                //打印到控制台，按F12查看
	                console.log(base64);
					//去掉头部		
	                app.icon = base64.replace(/\r|\n/g, '').replace('data:image/jgp;base64,', '').replace('data:image/png;base64,', '').replace('data:image/jpeg;base64,','');
	
	            }
	            reader.readAsDataURL(file);
	    }
 },
 computed: {
   imgurl: function () {
           if (this.url.length > 0) {
               return this.url;
           } else {
               this.show = false;
               return '';
           }
       }
   }

4.获取后端传过来的base64加上头部显示图片