小程序的图片上传与传统的图片上传方式有一些不一样

如果你有幸看到这篇文章，恭喜你，你可以完美解决了。

话不多说，前后端代码一并奉上：

(基于springmvc )

@Controller

@RequestMapping("/upload")

public class UploadController {

private static final Logger logger = LoggerFactory.getLogger(UploadController.class);

@RequestMapping("/picture")

public void uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception {

//获取文件需要上传到的路径

String path = request.getRealPath("/upload") + "/";

File dir = new File(path);

if (!dir.exists()) {

dir.mkdir();

}

logger.debug("path=" + path);

request.setCharacterEncoding("utf-8"); //设置编码

//获得磁盘文件条目工厂

DiskFileItemFactory factory = new DiskFileItemFactory();

//如果没以下两行设置的话,上传大的文件会占用很多内存，

//设置暂时存放的存储室,这个存储室可以和最终存储文件的目录不同

/**

* 原理: 它是先存到暂时存储室，然后再真正写到对应目录的硬盘上，

* 按理来说当上传一个文件时，其实是上传了两份，第一个是以 .tem 格式的

* 然后再将其真正写到对应目录的硬盘上

*/

factory.setRepository(dir);

//设置缓存的大小，当上传文件的容量超过该缓存时，直接放到暂时存储室

factory.setSizeThreshold(1024 * 1024);

//高水平的API文件上传处理

ServletFileUpload upload = new ServletFileUpload(factory);

try {

List list = upload.parseRequest(request);

FileItem picture = null;

for (FileItem item : list) {

//获取表单的属性名字

String name = item.getFieldName();

//如果获取的表单信息是普通的 文本 信息

if (item.isFormField()) {

//获取用户具体输入的字符串

String value = item.getString();

request.setAttribute(name, value);

logger.debug("name=" + name + ",value=" + value);

} else {

picture = item;

}

}

//自定义上传图片的名字为userId.jpg

String fileName = request.getAttribute("userId") + ".jpg";

String destPath = path + fileName;

logger.debug("destPath=" + destPath);

//真正写到磁盘上

File file = new File(destPath);

OutputStream out = new FileOutputStream(file);

InputStream in = picture.getInputStream();

int length = 0;

byte[] buf = new byte[1024];

// in.read(buf) 每次读到的数据存放在buf 数组中

while ((length = in.read(buf)) != -1) {

//在buf数组中取出数据写到(输出流)磁盘上

out.write(buf, 0, length);

}

in.close();

out.close();

} catch (FileUploadException e1) {

logger.error("", e1);

} catch (Exception e) {

logger.error("", e);

}

PrintWriter printWriter = response.getWriter();

response.setContentType("application/json");

response.setCharacterEncoding("utf-8");

HashMap res = new HashMap();

res.put("success", true);

printWriter.write(JSON.toJSONString(res));

printWriter.flush();

}

你以为就只有java后端代码吗？

前端代码也拿去

wx.uploadFile({

url: 'https://xxxxxx/upload/picture',

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) {

}

})

经过实践检验，有问题可以下方提问。