vue 解码base64_js上传文件并进行base64编码--vue

前端：

onUpload: function(event) {

var self = this;

// 利用fileReader对象获取file

var file = event.target.files[0];

var filesize = file.size;

var filename = file.name;

var filetype = file.type;

var suffix = ".png";

var objUrl = this.getObjectURL(file);

if(objUrl) {

document.getElementById('img1').src = objUrl;

}

console.log(file);

// 2,621,440   2M

if(filesize > 2101440) {

// 图片大于2MB

}

if(!/image\/\w+/.test(file.type)) {

alert("请确保文件为图像类型");

return;

}

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e) {

// 读取到的图片base64 数据编码 将此编码字符串传给后台即可

var imgcode = e.target.result;

var imgfile = imgcode;

//console.log(imgcode);

if(filetype == "image/jpeg") { //data:image/jpeg;base64,base64编码的jpeg图片数据

suffix = ".jpg";

imgfile = imgfile.replace("data:image/jpeg;base64,", "");

} else if(filetype == "image/png") { //data:image/png;base64,base64编码的png图片数据

suffix = ".png";

imgfile = imgfile.replace("data:image/png;base64,", "");

} else {

alert("请上传jpg，png格式");

return;

}

console.log(imgfile);

$.post(request + "personCenter/replaceBase64Image.shtml", {

suffix: suffix,

imgStr: imgfile

},

function(data) {

console.log(data);

if(data != null) {

self.imgFilePath = data;

//回显示，或 v-bind:src ...document.getElementById('img3').src =basePath+self.imgFilePath;

}

});

}

},

getObjectURL: function(file) {

var url = null;

if(window.createObjectURL != undefined) {

url = window.createObjectURL(file); //basic

} else if(window.URL != undefined) {

url = window.URL.createObjectURL(file);

} else if(window.webkitURL != undefined) {

url = window.webkitURL.createObjectURL(file);

}

return url;

}

}

后台部分：

/**

* base64转化成文件保存。返回路径

*/

@RequestMapping("replaceBase64Image")

@ResponseBody

public String replaceBase64Image(HttpServletResponse response, HttpServletRequest request, String suffix,

String imgStr) {

response.setHeader("Access-Control-Allow-Origin", "*");

Logger logger = Logger.getLogger("person");

BASE64Decoder decoder = new BASE64Decoder();

String ext = "";

if (".jpg".equalsIgnoreCase(suffix) || ".png".equalsIgnoreCase(suffix)) {

ext = suffix;

}

SimpleDateFormat dateformat = new SimpleDateFormat("yyyy/MM/dd/HH");

/// 构建文件保存的目录/

String logoPathDir = "/upload/filepath/mypic/"; // dateformat.format(new Date());

/// 得到文件保存目录的真实路径/

String logoRealPathDir = request.getSession().getServletContext().getRealPath(logoPathDir);

// ** 根据真实路径创建目录*

File logoSaveFile = new File(logoRealPathDir);

if (!logoSaveFile.exists()) {

logoSaveFile.mkdirs();

}

String imgFilePath = logoRealPathDir;

try {

// Base64解码

byte[] b = decoder.decodeBuffer(imgStr);

for (int i = 0; i < b.length; ++i) {

if (b[i] < 0) {// 调整异常数据

b[i] += 256;

}

}

//

// 生成文件名

String files = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date())

+ (new Random().nextInt(9000) % (9000 - 1000 + 1) + 1000) + ext;

// 生成文件路径

String filename = imgFilePath + "/" + files;

try {

// 生成文件

File imageFile = new File(filename);

imageFile.createNewFile();

if (!imageFile.exists()) {

imageFile.createNewFile();

}

OutputStream imageStream = new FileOutputStream(imageFile);

imageStream.write(b);

imageStream.flush();

imageStream.close();

} catch (Exception e) {

e.printStackTrace();

}

//

/*

* OutputStream out = new FileOutputStream(imgFilePath+ ".png"); out.write(b);

* out.flush(); out.close();

*/

logger.debug(filename);

return logoPathDir + files;

} catch (Exception e) {

logger.debug("0");

return "0";

}

}