文件上传，base64和MultipartFile

文件上传，base64和MultipartFile

1.用base64的方式上传

js文件转base64：

function tranformImgToBase64(dom,fileObj) {
    var reader = new FileReader();
    //使用该对象读取file文件
    reader.readAsDataURL(fileObj);
    // dialog.loading.open('图片添加中');
    //读取文件成功后执行的方法函数
    reader.onload = function (e) {
        //获取图片转换后的base64码
        base64 = e.target.result;
    }
}

java上传文件：

public String upload(String localFile) {
    try {
        String baseStr = localFile.split(",")[1];
		//base64解码
        BASE64Decoder decoder = new BASE64Decoder();
        byte[] bytes1 = decoder.decodeBuffer(baseStr);
	    String fileName = "operation"+sformant.format(new Date())+".jpg";
	    //转文件流
        InputStream inputStream = new ByteArrayInputStream(bytes1);
        ftpClient.setControlEncoding("UTF-8"); // 中文支持
		// 设置文件类型（二进制）
        ftpClient.setFileType(FTPClient.BINARY_FILE_TYPE);
        ftpClient.enterLocalPassiveMode();
		// 设置上传目录
        ftpClient.changeWorkingDirectory(ftpUploadDirectory+"operation/");
        ftpClient.storeFile(fileName, inputStream);
        inputStream.close();
        return ftpUploadPath+"operation/" + fileName;
    } catch (IOException e) {
        e.printStackTrace();
    } 
    return "";

ps：上传多个文件时，文件名用时间格式命名会出现文件上传太快，时间没变化，会出现文件覆盖。可以选择用uuid或者自定义增长。

用base64上传会出现的问题：
1.图片太大，后端接收数据为null，抛空指针异常
网络答案：post请求理论上对参数的大小没有限制，但是服务器有限制，tomcat默认是2M，把Tomcat的server.xml里设置一下就好了
注：Tomcat的版本低于等于7，设置maxPostSize=“0” 表示post参数无限大
Tomcat的版本大于等于8，设置maxPostSize=“104857600” 表示post参数最大100MB

ps：我做的是hybris项目，tomcat默认的是5M，但我上传大于1M但不超过2M的数据还是会出现这种情况，建议避免用base64进行文件上传。

2.用MultipartFile进行文件上传

//配置multipart解析器：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <property name="defaultEncoding">
      <value>UTF-8</value>
   </property>
   <property name="maxUploadSize">
      <value>10485760</value>
   </property>
   <property name="maxInMemorySize">
      <value>4096</value>
   </property>
</bean>

ps：用MultipartFile接收文件，需要配置解析器，不然就收不到数据（无法转化）。

js ajax请求进行文件上传

var formData = new FormData()
//循环添加到formData中
imgArr[index].forEach(function (file) {
    formData.append("file", file, file.name);
});
$.ajax({
    url: ACC.config.encodedContextPath + "/fileUpload/uploadImg",
    type: 'POST',
    async: false,
    data: formData,
    processData: false,// 不处理数据
    contentType: false,
    enctype: 'multipart/form-data',
    success: function (result) {
        if (result.code == 0) {
            obj.img = result.src;
        }
    }
});

ps:进行多个文件上传，循环放入formData，参数名和接收的参数名要保持一致。

java接收文件

@RequireHardLogIn
@PostMapping(value = "/uploadImg")
@ResponseBody
public Map<String, Object> uploadImg(MultipartFile[] file, String workDirectory) {
    Map<String, Object> resultMap = new HashMap<>();
    try {
        if (null != file) {
            resultMap.put("code", 0);
            FtpUtil ftpUtil = new FtpUtil();
            List<String> srcList = new ArrayList<>();
            for (int i = 0; i < file.length; i++) {
                String myFileName = file[i].getOriginalFilename();
                String uploadUrl = ftpUtil.upload(file[i], myFileName, workDirectory);
                srcList.add(uploadUrl);
            }
            ftpUtil.disconnet();
            resultMap.put("src", srcList);
            resultMap.put("msg", "文件上传成功!");
        } else {
            resultMap.put("code", 1);
            resultMap.put("msg", "文件为空！");
        }
    } catch (Exception e) {
        resultMap.put("code", 2);
        resultMap.put("msg", "文件上传异常！");
    } finally {
        return resultMap;
    }
}

进行ftp上传和base64原理一样，将文件转成流进行上传即可。