最近做了一个微信小程序,里面需要一个上传图片功能,查阅相关资料实现,下面直接贴代码。
小程序端
小程序端js代码,利用wx.uploadFile上传图片
uploadImg:function(path,itemId,failCallback){
var that=this;
wx.uploadFile({
url: `${that.globalData.url}/imgUpload`,
filePath: path,//wx.chooseImage返回的tempFilePaths
header: {
//自定义header,可以用来身份认证
//'Cookie': 'JSESSIONID='+this.globalData.Cookie
},
name: 'file',
formData: {
//在上传图片时一起传送表单数据
//'itemId': itemId
},
success: function (res) {
var data = res.data
console.log(data)
},fail:function(err){
failCallback(err)
console.log(err)
}
})
}
Java后端
1、上传文件配置
@Configuration
public class UploadConfig {
//显示声明CommonsMultipartResolver为mutipartResolver
@Bean(name = "multipartResolver")
public MultipartResolver multipartResolver() {
CommonsMultipartResolver resolver = new CommonsMultipartResolver();
resolver.setDefaultEncoding("UTF-8");
//resolveLazily属性启用是为了推迟文件解析,以在在UploadAction中捕获文件大小异常
resolver.setResolveLazily(true);
resolver.setMaxInMemorySize(40960);
//上传文件大小 5M 5*1024*1024
resolver.setMaxUploadSize(5 * 1024 * 1024);
return resolver;
}
}
2、上传文件处理类
@RequestParam(“file”)中的file对应小程序的name: ‘file’ ,并且接受表单数据。最终图片上传文件到E:/imgUpload/目录下,并且在数据库中保存item和其对应的图片路径。
@RequestMapping(value = "imgUpload")
public HashMap<String,String> imgUpload(@RequestParam("file") MultipartFile multipartFile, HttpServletRequest request,String itemId) throws IOException {
HashMap<String,String> resultJson=new HashMap();
if (!StringUtils.isEmpty(itemId) ){//equals null
//文件处理类,在数据库中保存文件路径
//Files files=new Files();
//files.setItemId(Long.parseLong(itemId));
//将当前上下文初始化给 CommonsMutipartResolver (多部分解析器)
CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(
request.getSession().getServletContext());
//检查form中是否有enctype="multipart/form-data"
if(multipartResolver.isMultipart(request))
{
//将request变成多部分request
MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
//获取multiRequest 中所有的文件名
Iterator iter=multiRequest.getFileNames();
while(iter.hasNext())
{
//一次遍历所有文件
MultipartFile file=multiRequest.getFile(iter.next().toString());
if(file!=null)
{
String path="E:/imgUpload/"+file.getOriginalFilename();
//上传
file.transferTo(new File(path));
files.setFileName(file.getOriginalFilename());//设置文件名 后期改为具体路径?
//文件处理类,在数据库中保存文件路径
filesService.save(files);
}
}
}
resultJson.put(SessionConstant.API_RESULT,SessionConstant.API_SUCCESS);
}else {
resultJson.put(SessionConstant.API_RESULT,SessionConstant.API_FAIL);
}
return resultJson;
}
3、获取图片文件
在application.properties中配置静态资源映射路径。从loaclhost:9090/imagesApi/文件名/ 可以直接访问图片。
#静态资源地址暴露 图片
spring.mvc.static-path-pattern=/imagesApi/**
spring.resources.static-locations=file:E://imgUpload//