前端以BASE64码的形式上传图片

　　一直有一个很苦恼的问题困扰着铁柱兄，每次上传图片的时候前端要写一大堆js，然后后台也要写一堆java代码做处理。于是就在想，有没有简单又方便的方法把图片上传。今天算是搞定了。现在发出来做个记录，也给大家做个参考。

　　话不多说，直接上代码，一边做一遍讲解。

　　首先新建一个工程

　　工程名随意取啊，不要太较真。然后进入index.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

 <title>Insert title here</title>

 </head>

 <body>

 <div>

       <input type="file" name="file" onchange="showImg(this)"><!--选择图片-->

                 <img id="getImg"/><!-- 选择后展示的图片 -->

             <input class="" type="button" id="btnBut" name="" > <!-- 提交 -->

  </div>

  <script type="text/javascript">

 function showImg(cell){//获取图片路径赋给img标签，从而展示出所选择的图片

                   document.getElementById('getImg').src= window.URL.createObjectURL(cell.files[0]);

 }

 function image2Base64(img) {//转base64的方法

     var canvas = document.createElement("canvas");

     canvas.width = img.width;

     canvas.height = img.height;

     var ctx = canvas.getContext("2d");

     ctx.drawImage(img, 0, 0, img.width, img.height);

     var dataURL = canvas.toDataURL("image/png");//规定图片是什么格式，image/格式

     return dataURL;

 }

 $("#btnBut").click(function(){

 var imgurl =$('#getImg')[0].src;//获取的图片路径

     var img = new Image();

     img.src=imgurl;

     var base64 = image2Base64(img);

       UploadPic(base64);

 })

 function UploadPic(base64) {

     $.ajax({//把编号带到后台去

         type : 'post',

         url : '${pageContext.request.contextPath}/Img',

         data:{'imageData': base64},

         success : function(data){//成功的事件

         },

         error : function(data){//失败的事件

             alert(data);

         }

     });

 }

 </script>

 </body>

 </html>

　　一定一定要切记，需要jquery.min.js。

　　其实写完jsp之后我还是很满足的。各种加起来也才54行代码，简单易懂。当然，这个界面是根据自己的需要去做的，我这相当于提供了一个基线的版本，你可以根据这个去改造。

　　代码写到这里的时候，图片就已经转为base64码了，后台只管接受就ok。如果在转换的时候出现问题，可以试着alert输出一下，看看具体是哪里出现的问题。如果解决不了，可以放在评论区，我有时间的话会过来看一下，我们一起解决。

　　现在我们把项目跑起来看一下效果。

　　在红框这里加上一句alert语句，看一下图片是否已经转换成base64码。

　　OK，这时图片已经出来了。按正常流程来讲的话，当我点击提交按钮时，alert会输入图片的base64码。现在我来点击一下看看。

　　弹框出来的这个就是图片的base64码。

　　jsp搞定之后，我们现在来写java代码。

package com.tiezhu.action;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet(name="Base64Img",urlPatterns="/Img")

public class Base64Img extends HttpServlet{

	/**

	 *

	 */

	private static final long serialVersionUID = 1L;

	@Override

	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		// TODO Auto-generated method stub

		super.doGet(req, resp);

	}

	@Override

	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		String base64String=req.getParameter("imageData");//获取前端传来的base64码

	　　　　　System.out.println(base64String);

	}

}

　　按流程来讲，现在当我点击提交后，是可以在eclipse的控制台中看到base64码了。来试试看

　　红框里面就是从界面传过来的图片的base64码。

　　当我们得到了base64码之后，就随便你怎么玩了。存数据库也好，转成图片也好。

　　在做项目的时候，我推荐是java转成图片，将图片存储起来后数据库就只需要存图片的名称就好了。这样能节约数据库的存储。

　　这里就不说怎么存数据库了，我们直接把base64码转为图片。

　　

package com.tiezhu.action;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.OutputStream;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.tomcat.util.codec.binary.Base64;

import sun.misc.BASE64Decoder;

@WebServlet(name="Base64Img",urlPatterns="/Img")

public class Base64Img extends HttpServlet{

	/**

	 *

	 */

	private static final long serialVersionUID = 1L;

	@Override

	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		// TODO Auto-generated method stub

		super.doGet(req, resp);

	}

	@Override

	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		String base64String=req.getParameter("imageData");//获取前端传来的base64码

		base64String = base64String.split(",")[1];//去掉base64码的data:image/png;base64,

		System.out.println(base64String);

	        BASE64Decoder decoder = new BASE64Decoder();

	        try {

	            // Base64解码

	            byte[] bytes = decoder.decodeBuffer(base64String);

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

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

	                    bytes[i] += 256;

	                }

	            }

	            // 生成jpeg图片

	            OutputStream out = new FileOutputStream("C:\\ceshi.png");

	            out.write(bytes);

	            out.flush();

	            out.close();

	        } catch (Exception e) {

	        }

	}

}

　　

　　做到这里，文章到这里就结束了。其实在这里有一个坑，一开始我没注意到，一直以为是导的包有问题。后面才发现，是base64的问题，原来从前端传过来的base64码是不能这么直接转成功图片的，虽然能够生成文件，但是文件根本打不开。需要对传过来的base64码做

base64String = base64String.split(",")[1];//去掉base64码的data:image/png;base64,
这个处理。
好了。本次文章到这里就结束了。如果文章对你有用，请多支持铁柱兄。

前端以BASE64码的形式上传图片的更多相关文章

  1. input[type=file]上传图片及转为base64码以及预览

    <input type="file" id="imgurl" capture="camera" accept="image/ ...

  2. uniapp上传图片转base64码

    uni.chooseImage({ count: 9, success: res => { this.imageList = this.imageList.concat(res.tempFile ...

  3. uniapp上传图片转base64码案例

    uni.chooseImage({ count: 9, success: res => { this.imageList = this.imageList.concat(res.tempFile ...

  4. base64码通过http传输 +号变 空格 问题解决

    通过七牛云base64上传图片,通过官方示例上传成功后,根据示例改了一个controller. 通过前端往后端传base64码形式进行测试.死活不通过,七牛报400. 仔细排查后发现,示例转换的bas ...

  5. JS将本地图片转化成base64码

    在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能. 1.首先在html里定义一个input输入框: BASE64图 ...

  6. base64码通过http传输 +号变 空格 以及 图片编码后字符串较长导致POST提交失败 问题解决

    场景:图片上传OSS存储,接口拿字符串去接前端传的base64码,服务器打印入参传的值,发现和前端打印的值有所区别,服务器中打印的值所有+号全部变成空格. 解决办法: Java中使用:url = ur ...

  7. MUI使用H5+Api调取系统相册多图选择及转base64码

    伟大的哲学家曾说过"写代码,一定要翻文档" 这次我们需要用到的是调取系统相册进行多图上传,先奉上html5+api关于系统相册的文档链接链接:HTML5+ API Referenc ...

  8. LODOP直接用base64码输出图片

    Lodop中的ADD_PRINT_IMAGE,也可以直接输出base64码图片,不用加img标签,如果加了img标签,会被当做超文本对待,受浏览器引擎解析的影响. 什么时候使用base64码直接输出比 ...

  9. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. Centos7部署k8s[v1.16]高可用[keepalived]集群

    实验目的 一般情况下,k8s集群中只有一台master和多台node,当master故障时,引发的事故后果可想而知. 故本文目的在于体现集群的高可用,即当集群中的一台master宕机后,k8s集群通过 ...

  2. 从零开始的JSON库

    从零开始的JSON库 项目地址 jsoncpp ,此项目受到 leptjson 启发,实现了最基本的功能,仅作学习使用. 提供简单的 parse() 和 generate() 方法将 JSON 文本解 ...

  3. 面试中常问的五种IO模型和BIO，NIO，AIO

    一,五种IO模型: 一个IO操作可以分为两个步骤:发起IO请求和实际的IO操作例如:1.操作系统的一次写操作分为两步:第一步,将数据从用户空间拷贝到系统空间:第二步,从系统空间往网卡写.2.一次读操作 ...

  4. 通过pycharm使用git和github的步骤（图文详解）

    一.在Pycharm工具中配置集成Git和GitHub.1.集成Git. 打开Pycharm,  点击File-->Settins-->Version Control-->Git 然 ...

  5. D 楼房重建

    时间限制 : - MS   空间限制 : - KB  评测说明 : 1s,256m 问题描述 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊 ...

  6. 最大子矩阵hdu1559（二维前缀和）

    最大子矩阵hdu1559 Problem Description 给你一个m×n的整数矩阵,在上面找一个x×y的子矩阵,使子矩阵中所有元素的和最大. Input 输入数据的第一行为一个正整数T,表示有 ...

  7. 用python写项目之图书管理系统

    1.功能介绍: (1).添加新书:输入要添加的书名.存放的书架号.价格. (2).修改书架:输入要书名,然后对其修改书架号.价格 (3).删除书架:输入书名,然后对应删除书名.书架号.价格 (4).查 ...

  8. VAuditDemo-任意文件读取

    任意文件读取是属于文件操作漏洞的一种. 一般任意文件读取漏洞可以读取配置信息.甚至系统重要文件. 严重的话,就可能导致SSRF,进而漫游内网. 文件操作漏洞 任意文件删除--删除lock 任意文件复制 ...

  9. php依赖注入与容器,Container,控制反转

    依赖注入与Ioc容器 概念: 容器:可以理解为用来存放某个东西的物品(篮子?),存放的东西取决于你想往里面放点什么.在这里,我们是存放某个类,类的描述或者一个返回类实例的闭包函数. Ioc(Inver ...

  10. 汇编 RET 和 CALL

    https://blog.csdn.net/u013018721/article/details/51264199 1.我们先来实践一下 ret 指令 DATA SEGMENT A DB 12H B ...