vue图片上传及java存储图片(亲测可用)

1.前言

    在使用elementui的upload组件时,我一直无法做到上传的图片和其他数据一起提交。单纯的上传文件,java的存储图片的方式也有局限性。

    我知道的后端保存图片有两种方式:一种是直接存储到数据库中(base65和blob都能做到),一种是存储在服务器上的一个文件夹,数据库保存图片地址.　　

    开始我选择了base64 但是mysql貌似不允许这么长的存储长度(没有百度直接否掉了),后面就使用存储在服务器上。

2.代码

   流程是,前端选择好图片并且填充好想要填写的数据,点提交就提交到后台进行上传和其他操作。图片名称我在前端进行修改,因为我貌似没有在 MultipartRequest 类中发现修改    图片名称的方法  api地址: http://www.servlets.com/cos/javadoc/com/oreilly/servlet/MultipartRequest.html  

   项目依赖cos.jar  百度云下载地址: 链接：https://pan.baidu.com/s/1NLxxo9JTBp93A1mZ7hIWaA 密码：gf5y

   前端代码:

  

<template>
<div>
<el-upload class="upload-demo" action="auto" :http-request="uploadSectionFile" list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
</el-upload>
<el-button size="small" type="primary" @click="upload">提交</el-button>
</div>
</template>
<script>
export default {
  data() {
    return {
      uploadFile: ""
    };
  },
  methods: {
    uploadSectionFile(param) {
      let fileObj = param.file;

      const isLt2M = fileObj.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
      if (fileObj.type === "image/jpeg") {
        this.uploadFile = new File([fileObj], new Date().getTime() + ".jpg", {
          type: "image/jpeg"
        });
      } else if (fileObj.type === "image/png") {
        this.uploadFile = new File([fileObj], new Date().getTime() + ".png", {
          type: "image/png"
        });
      } else {
        this.$message.error("只能上传jpg/png文件");
        return;
      }
    },
    upload() {
      var param = new FormData(); // FormData 对象
      param.append("file", this.uploadFile); // 文件对象
      param.append("name", "ziguiyu"); // 其他参数
      this.$axios({
        method: "post",
        url: "/GradeSystem/upload.do",
        data: param
      })
        .then(response => {
         this.$message({
          message: '上传成功',
          type: 'success'
        });
        })
        .catch(error => {
          this.$message.error("上传失败,请稍后重试");
        });
    }
  }
};
</script>

　　后端代码

 

package org.huangxb.course.service;


import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Enumeration;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.huangxb.course.util.makeDirectory;

import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;


public class UploadImg extends HttpServlet {

	    protected void doPost(HttpServletRequest request, HttpServletResponse response)
	            throws ServletException, IOException {

	    	// 设置大小限制（单位：字节）
	    	final int permitedSize = 2097152;

	    	try {               
	    		String type = "";
	    		String name = "";
	    		String originalFilename = "";
	    		String filename = "";
	    		
	    		//上传目录
	    		Calendar  cal  =  Calendar.getInstance();
	    		String uploadDate = new SimpleDateFormat( "yyyyMMdd").format(cal.getTime());//以日期为文件夹名称
	    		String strDirectory = "images/"+uploadDate;
	    		String uploadPath = request.getSession().getServletContext().getRealPath("/") + strDirectory;
	    		makeDirectory.mkDirectory(uploadPath);
	    		// 获取句柄
	    		MultipartRequest multipartRequest = new MultipartRequest(request, uploadPath, 
	    		                 permitedSize, "ISO-8859-1", new DefaultFileRenamePolicy()); 
	    	        
	    		// 取得文件
	    		Enumeration files = multipartRequest.getFileNames();       
	    	        
	    		// 取得文件详细信息 
	    		while (files.hasMoreElements()) { 
	    		       name = (String)files.nextElement();
	    		       type = multipartRequest.getContentType(name); 
	    		       filename = multipartRequest.getFilesystemName(name); 
	    		       originalFilename = multipartRequest.getOriginalFileName(name);	       
	    		       File currentFile = multipartRequest.getFile(name);
	    		}
	    		
	    		// 取得其它非文件字段
	    		Enumeration params = multipartRequest.getParameterNames();
	    		
	    		while (params.hasMoreElements()) {
	    		    String param = (String)params.nextElement();
	    		    String value = multipartRequest.getParameter(param);
	    		}                      
	    	} catch (Exception exception) { 
	    		response.sendError(response.SC_METHOD_NOT_ALLOWED);
	    	} finally { 
	    	}
	        
	    }
	   
}

　　

package org.huangxb.course.util;

import java.io.File;

public class makeDirectory {//创建目录的类
	public static boolean mkDirectory(String path) {
		File file = null;
		try {
			file = new File(path);
			if (!file.exists()) {
				return file.mkdirs();
			}
			else{
				return false;
			}
		} catch (Exception e) {
		} finally {
			file = null;
		}
		return false;
	}

}

　　在测试时,发现upload的进度条没有了,由于不是很需要就没有去研究。小白进阶,有童鞋发现问题请指正。