关于小程序&VUE上传文件的java处理方法

简述

相关文章有很多，在此记录一下用起来个人一直在用的一种方式：使用servlet来独立处理文件上传，获取前端的文件之后向CDN同步，最后返回文件的最终相对路径，由前端访问CDN服务来展示图片；

使用servlet的方便性在于可以跟项目实现零耦合，方便快速移植。

好了，废话不多说，直接上代码，注释都在代码里了；

java处理servlet

package com.TVMall.web.filter;

import com.TVMall.core.util.FileUtil;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.lang.StringUtils;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

/**
* Project:
*
* File: MicroSoftUpLoadFilter
*
* Description: 小程序&VUE formData上传图片servlet
*
* @author: MikeLC
*
* @date: 2017/11/14 上午 10:04
*
* Copyright ( c ) 2017
*
*/
public class MicroSoftUpLoadFilter extends HttpServlet {
private static final long serialVersionUID = 1L;

//文件目录
private String uploadFilePath = "D:\\temp";
File tempFile;

//打印日志
protected Log logger = LogFactory.getLog(this.getClass());

/**
* @see HttpServlet#HttpServlet()
*/
public MicroSoftUpLoadFilter() {
super();
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(4096);//缓冲区大小
factory.setRepository(tempFile);//缓冲区目录
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setSizeMax(4194304);//最大文件尺寸,4MB
SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String resultPath = "";
List<String> ressultPathList = new ArrayList<String>();
String relatePath = "";

try {
List<FileItem> fileItems = upload.parseRequest(request);
Iterator<FileItem> i = fileItems.iterator();
boolean flag = false;//判断recordId是否为空
String value = "";
while(i.hasNext()){
FileItem fileItem = i.next();
String fileName = fileItem.getName();

if (fileItem.getFieldName() != null) {//formData中的数据
if (fileItem.isFormField()) {//一般的表单域,即获取formData中的参数
value = fileItem.getString("utf-8");
System.out.println(value);
if (StringUtils.isEmpty(value)) {
flag = true;
}
//
if(fileItem.getFieldName().equals("relatePath")){
relatePath = value;
}
}
}
//
if(fileName != null){
String path = FileUtil.buildImgPath(request,relatePath);
String realPath = request.getRealPath(path);
File filePath = new File(realPath);
if (!filePath.exists()) {
try {
filePath.mkdirs();
} catch (Exception e) {
e.printStackTrace();
}
}
File file = new File(filePath + "/" + fileName);
fileItem.write(file);
//同步
FileUtil.sendFileOperate(file,request,relatePath);
//
resultPath = path +"/"+ fileName;
ressultPathList.add(resultPath);
}
}
//
//byte[] jsonStr = JSON.toJSONBytes(ressultPathList);
byte[] jsonStr = resultPath.getBytes();
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
//response.getOutputStream().write(jsonStr);
//
PrintWriter pw = response.getWriter();
pw.write(resultPath);

System.out.println("upload success");
} catch (Exception e) {
e.printStackTrace();
logger.info("upload throw exception!");
}
}

}

配置servlet

<!-- 图片上传 -->
<servlet>
<description></description>
<display-name>MicroSoftUpLoadFilter</display-name>
<servlet-name>MicroSoftUpLoadFilter</servlet-name>
<servlet-class>com.TVMall.web.filter.MicroSoftUpLoadFilter</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MicroSoftUpLoadFilter</servlet-name>
<url-pattern>/wxUpload/*</url-pattern>
</servlet-mapping>

前端代码

微信小程序

wx.uploadFile({
url: 'https://xxxxxx/upload/tongue',
filePath: filePath,//图片路径，如tempFilePaths[0]
name: 'image',
header : {
"Content-Type": "multipart/form-data"
},
formData:
{
userId: 12345678 //附加信息为用户ID
},
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {

}
})

Vue

<script>
export default {
name : 'MoUpload',
props : {
accepts : { //允许的上传类型
type : String,
default : 'image/jpeg,image/jpg,image/png,image/gif'
},
flag : [String, Number], //当前上传标识,以便于在同一个监听函数中区分不同的上传域
maxSize : {
type : Number,
default : 0 //上传大小限制
},
},
methods: {
upload (event) {
let file = event.target.files[0]
const self = this
const flag = this.flag
if (file) {
if (this.maxSize) {
//todo filter file
}
//filter file, 文件大小,类型等过滤
//如果是图片文件
// const reader = new FileReader()
// const imageUrl = reader.readAsDataURL(file)
// img.src = imageUrl //在预览区域插入图片

const formData = new FormData()
formData.append('file', file)

//获取token
this.$http.get(`/api/token/`)
.then(response => {
const result = response.body
formData.append('token', result.token)
formData.append('key', result.key)
//提交给七牛处理
self.$http.post('https://up.qbox.me/', formData, {
progress(event) {
//传递给父组件的progress方法
self.$emit('progress', parseFloat(event.loaded / event.total * 100), flag)
}
})
.then(response => {
const result = response.body
if (result.hash && result.key) {
//传递给父组件的complete方法
self.$emit('complete', 200 , result, flag)
//让当前target可以重新选择
event.target.value = null
} else {
self.$emit('complete', 500, result, flag)
}
}, error => self.$emit('complete', 500, error.message), flag)
})
}
}
}
}
</script>

推荐文章

在研究Vue的上传中，这篇文章描述的很细致，强烈推荐；