题外话：推荐一个专注于Java开发的网站，做提升学习，价值阅读：Java知音

同时，扫码关注后端技术精选，回复“学习资料”，领取100套小程序源码+小程序开发视频和基本Java经典书籍电子版



在很多的网站都可以实现上传头像，可以选择自己喜欢的图片做头像，从本地上传，下次登录时可以直接显示出已经上传的头像，那么这个是如何实现的呢？

 

下面说一下我的实现过程(只是个人实现思路，实际网站怎么实现的不太清楚)

实现的思路：

工具：MySQL，eclipse

首先，在MySQL中创建了两个表，一个t_user表，用来存放用户名，密码等个人信息，

一个t_touxiang表，用来存放上传的图片在服务器中的存放路径，以及图片名字和用户ID，

T_touxiang表中的用户ID对应了t_user中的id。

 

t_user表SQL：

DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;


 

T_touxiang表SQL：

 

DROP TABLE IF EXISTS `t_touxiang`;
CREATE TABLE `t_touxiang` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `image_path` varchar(255) DEFAULT NULL,
  `user_id` int(11) DEFAULT NULL,
  `old_name` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `img_user` (`user_id`),
  CONSTRAINT `img_user` FOREIGN KEY (`user_id`) REFERENCES `t_user` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;


 

首先，写一个UploadServlet.java，用来处理图片文件的上传，并将图片路径，图片名称等信息存放到t_touxiang数据表中，代码如下：

 

@WebServlet("/UploadServlet.do")
public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void service(HttpServletRequest request, HttpServletResponse response)
	    throws ServletException, IOException {
	// 判断上传表单是否为multipart/form-data类型
	HttpSession session = request.getSession();
	User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话
							 // 中

	if (ServletFileUpload.isMultipartContent(request)) {

	    try {
		// 1. 创建DiskFileItemFactory对象，设置缓冲区大小和临时文件目录
		DiskFileItemFactory factory = new DiskFileItemFactory();
		// System.out.println(System.getProperty("java.io.tmpdir"));//默认临时文件夹

		// 2. 创建ServletFileUpload对象，并设置上传文件的大小限制。
		ServletFileUpload sfu = new ServletFileUpload(factory);
		sfu.setSizeMax(10 * 1024 * 1024);// 以byte为单位 不能超过10M 1024byte =
						 // 1kb 1024kb=1M 1024M = 1G
		sfu.setHeaderEncoding("utf-8");

		// 3.
		// 调用ServletFileUpload.parseRequest方法解析request对象，得到一个保存了所有上传内容的List对象。
		@SuppressWarnings("unchecked")
		List<FileItem> fileItemList = sfu.parseRequest(request);
		Iterator<FileItem> fileItems = fileItemList.iterator();

		// 4. 遍历list，每迭代一个FileItem对象，调用其isFormField方法判断是否是上传文件
		while (fileItems.hasNext()) {
		    FileItem fileItem = fileItems.next();
		    // 普通表单元素
		    if (fileItem.isFormField()) {
			String name = fileItem.getFieldName();// name属性值
			String value = fileItem.getString("utf-8");// name对应的value值

			System.out.println(name + " = " + value);
		    }
		    // <input type="file">的上传文件的元素
		    else {
			String fileName = fileItem.getName();// 文件名称
			System.out.println("原文件名：" + fileName);// Koala.jpg

			String suffix = fileName.substring(fileName.lastIndexOf('.'));
			System.out.println("扩展名：" + suffix);// .jpg

			// 新文件名（唯一）
			String newFileName = new Date().getTime() + suffix;
			System.out.println("新文件名：" + newFileName);// image\1478509873038.jpg

			// 5. 调用FileItem的write()方法，写入文件
			File file = new File("D:/lindaProjects/mySpace/wendao/WebContent/touxiang/" + newFileName);
			System.out.println(file.getAbsolutePath());
			fileItem.write(file);

			// 6. 调用FileItem的delete()方法，删除临时文件
			fileItem.delete();

			/*
			 * 存储到数据库时注意 1.保存源文件名称 Koala.jpg 2.保存相对路径
			 * image/1478509873038.jpg
			 * 
			 */
			if (user != null) {
			    int myid = user.getId();
			    String SQL = "INSERT INTO t_touxiang(image_path,user_id,old_name)VALUES(?,?,?)";
			    int rows = JdbcHelper.insert(SQL, false, "touxiang/" + newFileName, myid, fileName);
			    if (rows > 0) {
				session.setAttribute("image_name", fileName);
				session.setAttribute("image_path", "touxiang/" + newFileName);
				response.sendRedirect(request.getContextPath() + "/upImage.html");
			    } else {

			    }

			} else {
			    session.setAttribute("loginFail", "请登录");
			    response.sendRedirect(request.getContextPath() + "/login.html");
			}

		    }
		}

	    } catch (FileUploadException e) {
		e.printStackTrace();
	    } catch (Exception e) {
		e.printStackTrace();
	    }

	}
    }
}


 

在完成图片上传并写入数据库的同时，将图片路径通过session的方式发送到HTML界面

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>更换头像</title>

</head>

<body>

         <formaction="UploadServlet.do" method="post"enctype="multipart/form-data">

                     本地目录：<inputtype="file" name="uploadFile">

           <img src="${image_path}" width="200" height="200">

                <inputtype="submit" value="上传头像"/>

   </form>

</body>

</html>

 

至此，图片上传数据库和本地服务器已经实现，那么如何在HTML界面显示出个人信息以及上传的头像呢？

 

 

首先定义一个PersonServlet类，用来读取数据库的内容，并发送到HTML界面。

代码如下：

@WebServlet("/persons.do")
public class PersonServlet extends HttpServlet {

    private static final long serialVersionUID = -800352785988546254L;

    protected void service(HttpServletRequest request, HttpServletResponse response)
	    throws ServletException, IOException {
	// 判断上传表单是否为multipart/form-data类型
	Touxiang tx=null;
	
	HttpSession session = request.getSession();
	User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话
	if(user!=null){
	    int myid=user.getId();
	    String SQL="SELECT id,image_path,old_name FROM t_touxiang WHERE user_id=?";
	    ResultSet rs=JdbcHelper.query(SQL,myid);
	    String uSQL="SELECT username,password FROM t_user WHERE id=?";
	    ResultSet urs=JdbcHelper.query(uSQL,myid);
	    System.out.println( "我的个人id是: " + myid);
	    final List<Touxiang> touxiang=new ArrayList<>();
	    try {
		if(rs.next())
		{
		    tx=new Touxiang();
		    tx.setId(rs.getInt(1));
		    tx.setImage_path(rs.getString(2));
		    tx.setOld_name(rs.getString(3));
		    touxiang.add(tx);
		}
		if(urs.next()){
		    user.setUsername(urs.getString(1));
		    user.setPassword(urs.getString(2));
		    user.setTouxiang(touxiang);
		}
		
	    } catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	    }
	   
		session.setAttribute("user", user);
		System.out.println( "我的id: " + myid);
		response.sendRedirect( request.getContextPath() + "/person.html");
	}
    }
}


 

在HTML界面接收信息，并显示出来，代码如下：

 

<div>
	<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
      		 <div><a href="$path/upImage.html">更换头像</a></div>
        	
        	#foreach( $ut in  $user.getTouxiang() )
        	 <img src=" $ut.getImage_path()"  width="200" height="200">
        	 #end
        	 <div>我的头像：</div>
        	 <div>我的姓名：$user.getUsername()</div>
        	 <div><a href="$path/myAnswer.do">我的解答</a></div>
		<div><a href="$path/myQuestion.do">我的提问</a></div>
   	 </form>
	</div>
<div>
	<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
      		 <div><a href="$path/upImage.html">更换头像</a></div>
        	
        	#foreach( $ut in  $user.getTouxiang() )
        	 <img src=" $ut.getImage_path()"  width="200" height="200">
        	 #end
        	 <div>我的头像：</div>
        	 <div>我的姓名：$user.getUsername()</div>
        	 <div><a href="$path/myAnswer.do">我的解答</a></div>
		<div><a href="$path/myQuestion.do">我的提问</a></div>
   	 </form>
	</div>

 

至此，一个基于Java的头像上传服务器，路径存储在MySQL，并在HTML界面读取出来的功能就基本实现了。头像上传之前进行处理等操作，可以选择一些插件来完成。这里只是简单的实现了基本功能。

 

 

补充

对于图片上传，这里只是简单的用Servlet实现了一下最基本的功能，仅提供思路。如果使用spring等框架，他都对图片上传做了很好的封装，应该更加容易。

后台实现图片上传应该来说比较容易，但是比较头疼的是图片上传原生的按钮丑出天际，这里推荐俩实用的上传控件，应该算比较好看。

 

1，H5实现的图片上传，可多张上传，可点击可拖拽上传，大概是这个样子：



基本的使用介绍和下载地址：http://blog.csdn.net/weixin_36380516/article/details/70352689

 

2，jQuery图像裁剪插件，大概长这样



 

不仅提供上传，还有裁剪等功能，UI做的也美，

地址：http://www.jq22.com/jquery-info318

 

我先看一下《颈椎病康复指南》再给大家说怎么实现的这两个功能，毕竟只是一个新手，解决这种复杂点的问题（相对而言），还是需要花费大量时间的，这篇文章花了两天的时间才实现的功能，现在就记录一下使用springboot怎么实现文件上传下载的。
我这里使用的是 springboot 2.0.3，不需要导入相关jar包，2.x 的版本已经整合进去了，直接使用即可。
spring官网提供了 springboot 的文件上传下载案例，这是网址：https://spring.io/guides/gs/uploading-files/，使用的是流的输出，对于我这个新手来说，直接不理解，所以略过，通过网上查阅大量资料，终于把问题解决了。下面的案例是 springboot2.x 图片上传与回显。我使用的工具是idea。
1、创建idea默认的springboot项目，我的版本是2.0.3
2、创建一个控制层FileController
package com.rainy.controller;

import org.apache.catalina.servlet4preview.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import java.io.*;
import java.util.UUID;

/**
 * 文件上传
 */
@Controller
public class FileController {

    @GetMapping(value = "/file")
    public String file() {
        return "file";
    }

    @PostMapping(value = "/fileUpload")
    public String fileUpload(@RequestParam(value = "file") MultipartFile file, Model model, HttpServletRequest request) {
        if (file.isEmpty()) {
            System.out.println("文件为空空");
        }
        String fileName = file.getOriginalFilename();  // 文件名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));  // 后缀名
        String filePath = "D://temp-rainy//"; // 上传后的路径
        fileName = UUID.randomUUID() + suffixName; // 新文件名
        File dest = new File(filePath + fileName);
        if (!dest.getParentFile().exists()) {
            dest.getParentFile().mkdirs();
        }
        try {
            file.transferTo(dest);
        } catch (IOException e) {
            e.printStackTrace();
        }
        String filename = "/temp-rainy/" + fileName;
        model.addAttribute("filename", filename);
        return "file";
    }
}

3、创建MyWebMvcConfigurer，这里是配置资源映射路径，详细点的介绍看这篇文章：https://blog.csdn.net/qq_38762237/article/details/81283241
/**
 * 资源映射路径
 */
@Configuration
public class MyWebAppConfigurer implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/temp-rainy/**").addResourceLocations("file:D:/temp-rainy/");
    }
}

4、jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <form action="/fileUpload" method="post" enctype="multipart/form-data">
        <label>上传图片</label>
        <input type="file" name="file"/>
        <input type="submit" value="上传"/>
    </form>
    <p>图片:</p>
    <img src="${filename }"/>
</body>
</html>


注意一点：我是使用jsp引擎来渲染，因为我不会用 Thymeleaf，添加jsp页面，springboot使用jsp页面是需要进行配置jsp整合的，默认的是 Thymeleaf 的页面，简单的就是HTML页面
springboot配置jsp页面的方法：https://blog.csdn.net/qq_38762237/article/details/81283352


如果有什么问题的话，可以告诉我，QQ：3210054449，或者评论留言，这是我的首页：https://blog.csdn.net/qq_38762237，都是我在学习过程中遇到的一些问题做的记录。、

交流

图片上传并预览

HTML
<div class="file-box">
    <img id="preview" />
    <input type="text" id="imgfield" class="txt" placeholder="预览">
    <input type="file" name="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" οnchange="imgPreview(this)" >	
</div>

css
.file-box {
    position: relative;
    display: inline-block;
}
.file-box img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: -30px;
    left: 0;
    display: inline-block;
    border: none;
}
.file-box .txt,.file-box .file {
    width: 70px;
    height: 36px;
    position: absolute;
    top: -20px;
    left: 100px;
    text-align: center;
}

JS
function imgPreview(fileDom) {
	//判断是否支持FileReader
	if(window.FileReader) {
		var reader = new FileReader();
	} else {
		alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
	}
	//获取文件
	var file = fileDom.files[0];
	var imageType = /^image\//;
	//是否是图片
	if(!imageType.test(file.type)) {
		alert("请选择图片！");
		return;
	}
	//读取完成
	reader.onload = function(e) {
		//获取图片dom
		var img = document.getElementById("preview");
		//图片路径设置为读取的图片
		img.src = e.target.result;
	};
	reader.readAsDataURL(file);
}

上传图片提交ajax
如果想把图片信息通过ajax传给后端，则需要通过new FormData()  上传图片信息，然后使用 append() 方法向该对象里添加字段，具体代码如下：
(注：以下代码在图片预览成功后执行，也就是在reader.readAsDataURL(file);	后)
var formData = new FormData(); 
formData.append('file', $('#input_file')[0].files[0]);  //添加图片信息的参数
formData.append('sizeid',123);  //添加其他参数
$.ajax({
    url: '/material/uploadFile',
    type: 'POST',
    cache: false, //上传文件不需要缓存
    data: formData,
    processData: false, // 告诉jQuery不要去处理发送的数据
    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
    success: function (data) {
        var rs = eval("("+data+")");
        if(rs.state==1){
            tipTopShow('上传成功！');
        }else{
            tipTopShow(rs.msg);
        }
    },
    error: function (data) {
        tipTopShow("上传失败");
    }
})  

上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容，这篇文章单独介绍一下element UI 图片上传控件的使用。首先要安装element并中引入，安装引入过程这里不再赘述。

1.引用element 上传控件。

 <el-upload
        action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址（跨域）
        list-type="picture-card"
        accept="image/*"
        :limit="imgLimit"
        :file-list="productImgs"
        :multiple="isMultiple"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :on-exceed="handleExceed"
        :on-error="imgUploadError">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>

2.js

export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        productImgs: [],
        isMultiple: true,
        imgLimit: 6
      }
    },
    methods: {
      handleRemove(file, fileList) {//移除图片
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {//预览图片时调用
        console.log(file);
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      beforeAvatarUpload(file) {//文件上传之前调用做一些拦截限制
        console.log(file);
        const isJPG = true;
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleAvatarSuccess(res, file) {//图片上传成功
        console.log(res);
        console.log(file);
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      handleExceed(files, fileList) {//图片上传超过数量限制
        this.$message.error('上传图片不能超过6张!');
        console.log(file, fileList);
      },
      imgUploadError(err, file, fileList){//图片上传失败调用
        console.log(err)
        this.$message.error('上传图片失败!');
      }
    }
  }

3.controller

 @RequestMapping(value = "/imgUpload")
    public Wrapper imgUpload(HttpServletRequest req, MultipartHttpServletRequest multiReq)
            throws IOException {
        System.out.println("---" + fileUploadPath);//我这里用的springboot 在application.properties中配置，使用@Value 获取的文件上传目录

        MultipartFile file = multiReq.getFile("file");
        String originalFilename = file.getOriginalFilename();
        String suffix = originalFilename.substring(originalFilename.indexOf("."));
        String localFileName = MD5Util.md5(file.getInputStream()) + suffix;
        File localFile = new File(fileUploadPath + localFileName);
        if (!localFile.exists()) {
            localFile.createNewFile();

            FileOutputStream fos = new FileOutputStream(
                    localFile);
            FileInputStream fs = (FileInputStream) multiReq.getFile("img").getInputStream();
            byte[] buffer = new byte[1024];
            int len = 0;
            while ((len = fs.read(buffer)) != -1) {
                fos.write(buffer, 0, len);
            }
            fos.close();
            fs.close();

        } else {
            log.info("文件已存在！！");
        }

        return WrapMapper.wrap(
                Wrapper.SUCCESS_CODE,
                Wrapper.SUCCESS_MESSAGE,
                "http://localhost:8080/img/" + localFileName);//这里是我执行封装的返回结果，也可以使用map,
    }

4.MD5工具类

import java.io.*;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;

public class MD5Util {

    private static char[] Digit = {'0', '1', '2', '3', '4', '5', '6', '7', '8',
            '9', 'a', 'b', 'c', 'd', 'e', 'f'};

    public static String getMd5Sum(String inputStr)
            throws NoSuchAlgorithmException {
        MessageDigest digest = MessageDigest.getInstance("MD5");
        byte[] inputStrByte = inputStr.getBytes();
        digest.update(inputStrByte, 0, inputStrByte.length);

        byte[] md5sum = digest.digest();

        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < 16; i++) {
            char[] ob = new char[2];
            ob[0] = Digit[md5sum[i] >> 4 & 0x0F];
            ob[1] = Digit[md5sum[i] & 0x0F];
            String s = new String(ob);
            sb.append(s);
        }

        return sb.toString();
    }

    /**
     * 对字符串进行 MD5 加密
     *
     * @param str
     *            待加密字符串
     *
     * @return 加密后字符串
     */
    public static String md5(String str) {
        MessageDigest md5 = null;
        try {
            md5 = MessageDigest.getInstance("MD5");
            md5.update(str.getBytes("UTF-8"));
        } catch (NoSuchAlgorithmException e) {
            throw new RuntimeException(e.getMessage());
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException(e.getMessage());
        }
        byte[] encodedValue = md5.digest();
        int j = encodedValue.length;
        char finalValue[] = new char[j * 2];
        int k = 0;
        for (int i = 0; i < j; i++) {
            byte encoded = encodedValue[i];
            finalValue[k++] = Digit[encoded >> 4 & 0xf];
            finalValue[k++] = Digit[encoded & 0xf];
        }

        return new String(finalValue);
    }

    /**
     * 签名字符串
     *
     * @param text
     *            需要签名的字符串
     * @param sign
     *            签名结果
     * @return 签名结果
     */
    public static boolean verify(String text, String sign) {
        String mysign = md5(text);
        if (mysign.equals(sign)) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * 对文件进行 MD5 加密
     *
     * @param file
     *            待加密的文件
     *
     * @return 文件加密后的 MD5 值
     * @throws IOException
     */
    public static String md5(File file) throws IOException {
        FileInputStream is = new FileInputStream(file);
        return md5(is);

    }


    public static String md5(InputStream inputStream) throws IOException {

        MessageDigest md5 = null;
        try {
            md5 = MessageDigest.getInstance("MD5");
            int n = 0;
            byte[] buffer = new byte[1024];
            do {
                n = inputStream.read(buffer);
                if (n > 0) {
                    md5.update(buffer, 0, n);
                }
            } while (n != -1);
            inputStream.skip(0);
        } catch (NoSuchAlgorithmException e) {
            throw new RuntimeException(e.getMessage());
        } finally {
            inputStream.close();
        }

        byte[] encodedValue = md5.digest();

        int j = encodedValue.length;
        char finalValue[] = new char[j * 2];
        int k = 0;
        for (int i = 0; i < j; i++) {
            byte encoded = encodedValue[i];
            finalValue[k++] = Digit[encoded >> 4 & 0xf];
            finalValue[k++] = Digit[encoded & 0xf];
        }
        return new String(finalValue);
    }
}


5.效果


6.主要参考文档 element 官方中文文档，文档中好多属性介绍很笼统不够详细，个人感觉比较坑。