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

前端代码:

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("上传失败,请稍后重试");

});

}

}

};

后端代码

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的进度条没有了,由于不是很需要就没有去研究。小白进阶,有童鞋发现问题请指正。