vue.js上传图片到服务器，手机也能调用

在网上搜了搜发现<input 里的type=file还真能调起手机的相册功能  还比微信的接口方便，真是被恶心到了。

 

这里用的vue.js开发的前端

 

<div style="margin-top: -6%; float: right;">
    <!-- 选择图片 -->
    <v-btn color="blue" depressed style="color:#FFFFFF;font-size:8px;width:15%;border-radius: 7px;position: absolute;left:72%;top:14%;float: right">点击上传</v-btn>
    <input style="position: absolute;left:76%;top:30%;opacity:0;float: right;" id="inp" type="file"
           accept="image/*"
           @change="chooseImg" />
    <!-- 预览图片 -->
    <canvas style="position: absolute;left:56%;top:12%;" ref="imgPreview"
            height="0"
            width="0"></canvas>
    <!-- 提交图片 -->
    <!--<button @click="uploadImg">提交图片</button>-->
    <!-- 通过后台返回的url向文件服务器请求图片 -->
    <img :src="imgUrlFromServer">
</div>

这是在网上co来的上传图片   挺好用的   选择后的预览都在里面

 

 

chooseImg (event) {
            let file = event.target.files[0]
            //console.log(file);
            let reader = new FileReader()
            let img = new Image()
            // 读取图片
            if(file == null || file == ''){
            	console.log("gg");
            }
            reader.readAsDataURL(file)
            // 读取完毕后的操作
            reader.onloadend = (e) => {
                img.src = e.target.result
                // 这里的e.target就是reader
                // console.log(reader.result)
                // reader.result就是图片的base64字符串
                this.base64 = reader.result
                console.log(this.base64);
            }
            // 预览图片
            let canvas = this.$refs['imgPreview']
            let context = canvas.getContext('2d')
            img.onload = () => {
                img.width = 100
                img.height = 100
                // 设置canvas大小
                canvas.width = 100
                canvas.height = 100
                // 清空canvas
                context.clearRect(0, 0, 100, 50)
                // 画图
                context.drawImage(img, 0, 0, 50, 50)
            }
        },

 

 

依然是co来的js代码0.0

这里直接把图片的base64码放到了参数里，可以直接传给后台解析。

this.getClass().getResource("").getPath();

这样获取到当前路径然后慢慢 getParent(); 获取到图片文件夹

我后台就是直接拿到base64码解码成byte数组   然后用io流传到服务器的某个目录下存起来   数据库里存储的是图片名+.格式

值得注意的是base64码前面会带一些没必要的编码

当我们上传图片的.png的时候是base64：png什么什么的

上传.jpg文件则会带有jpeg   上传图片不需要前面这一串字符   需要截取

if(imgbase64.substring(11,15).equals("jpeg")) {
			imgbase = imgbase64.substring(23, imgbase64.length());
		}else {
			imgbase = imgbase64.substring(22, imgbase64.length());
		}

 

之后调用Base64解码工具类解码完成图片上传

附上解码工具类

 

package addaoil.support.utils;

import java.io.FileOutputStream;

import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;
import java.io.OutputStream;

public class Base64 {
	//base64字符串转化成图片  
    public static boolean GenerateImage(String imgStr,String imgurl)  
    {   //对字节数组字符串进行Base64解码并生成图片  
        if (imgStr == null) { //图像数据为空  
            return false;  
        }
        BASE64Decoder decoder = new BASE64Decoder();
        try   
        {  
            //Base64解码  
            byte[] b = decoder.decodeBuffer(imgStr);  
            for(int i=0;i<b.length;++i)  
            {  
                if(b[i]<0)  
                {//调整异常数据  
                    b[i]+=256;  
                }  
            }  
            //生成jpeg图片  
            String imgFilePath = imgurl;//新生成的图片  
            OutputStream out = new FileOutputStream(imgFilePath);      
            out.write(b);  
            out.flush();  
            out.close();  
            return true;  
        }   
        catch (Exception e)   
        {  
            return false;  
        }  
    }  
}

 

 

BASE64Decoder用不了的话可以百度搜一下。

 

 

 

 

img.onload = () => {
            	img2.width = 1000
                //img2.height = 1000
                let canvas2 = this.$refs['imgPreview']
            	let context2 = canvas.getContext('2d')
                canvas2.width = 1000;
		        canvas2.height = canvas.width * (1000 / img2.width);

		        console.log(this.base64.length);
		        //this.base64 = this.base64.split(',')[1];
		        
                img.width = 100
                img.height = 100
                // 设置canvas大小
                canvas.width = 1000
                canvas.height = 1000
                
                // 清空canvas
                context.clearRect(0, 0, 100, 50)
                // 画图
                context.drawImage(img, 0, 0, 1000, 1000)
                this.base64 = canvas.toDataURL("image/jpeg", 1.0); // 这里就拿到了压缩后的base64图片
                canvas.width = 100
                canvas.height = 100
                context.drawImage(img, 0, 0, 50, 50)
                console.log(this.base64.length);
            }

 图片太大base64码几千万长度的字符串POST都传不了   然后做了个图片压缩   目前15M以下的图上传是没问题的