小程序上传单个图片

最新推荐文章于 2023-08-11 17:36:21 发布

原创最新推荐文章于 2023-08-11 17:36:21 发布 · 823 阅读

0 ·

CC 4.0 BY-SA版权

xiaochengxu 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一个小程序中实现图片上传功能的方法，并详细展示了使用SSM框架处理上传文件的后端代码。通过wx.chooseImage和wx.uploadFile API选择并上传图片至服务器，后端采用SpringMVC接收文件并保存至指定目录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序界面

shangchuan:function()

{

var that = this

// 上传图片获取路径

wx.chooseImage({

success: function (res) {

console.log('临时路径：' + res.tempFilePaths[0])

console.log(res.tempFilePaths[0].split("/")[3]);

var imgName = res.tempFilePaths[0].split("/")[3];

console.log(res);

that.setData({

imgurl: res.tempFilePaths[0]

});

wx.uploadFile({

url: 'http://localhost:8080/chapter16-shu/uploadFile',

filePath: res.tempFilePaths[0],

name: 'file',

formData:{

'name': imgName

success: function (result) {

console.log("返回路径：" + result.data)

}

})

SSM框架主要代码

   //上传文件3
   @RequestMapping("/uploadFile")
   @ResponseBody
   public Object uploadFile(HttpServletResponse response, HttpServletRequest request, MultipartFile file) {


       String realPath = request.getSession().getServletContext().getRealPath("/temp");
   //System.out.println(realPath);
   File file1 = new File(realPath);
   if(!file1.exists()){
   file1.mkdirs();
   }





   try {
   CommonsMultipartFile cf = (CommonsMultipartFile) file;
   DiskFileItem fi = (DiskFileItem) cf.getFileItem();
   File f1 = fi.getStoreLocation();
   if(!f1.exists()){
       f1.mkdirs();
       }

   InputStream ips = new FileInputStream(f1);
   OutputStream ops = new FileOutputStream(realPath + "/" + request.getParameter("name"));
   byte[] b = new byte[1024];
   int len;
   try {
   while ((len = ips.read(b)) != -1) {
   ops.write(b, 0, len);
   }
   } catch (IOException e) {
   e.printStackTrace();
   } finally {
   // 完毕，关闭所有链接
   try {
   ops.close();
   ips.close();
   } catch (IOException e) {
   e.printStackTrace();
   }
   }

   } catch (FileNotFoundException e) {
   e.printStackTrace();
   }
   return realPath;
   }