微信小程序上传图片实战案例解析

这次给大家带来微信小程序上传图片实战案例解析，微信小程序上传图片实战案例的注意事项有哪些，下面就是实战案例，一起来看一下。

在网上看了好多小程序上传图片，java后端接收的示例，但是不管在哪个网站看的，代码基本是一样的，都是代码特别多。

所以就自己写一个比较简单的。

 一 小程序端

user.wxml

<view class=&#39;user_head&#39;>
 <view>
  <image src=&#39;{{ptuser.avatarUrl}}&#39; bindtap=&#39;updateHead&#39;></image>
 </view>
 <text>点击选择头像</text>
</view>

user.js

// 更换头像
span style="font-size:18px;color:#FF0000;"> updateHead: function () {
  var that = this
  // 上传图片 获取路径
  wx.chooseImage({
   success: function (res) {
    console.log('临时路径：' + res.tempFilePaths[0])
      wx.uploadFile({
       url: app.globalData.baseUrl + '/file/uploadFile',
       filePath: res.tempFilePaths[0],
       name: 'file',
       success: function (result) {
        console.log("返回路径：" + result.data)
       }
      })
   },
  })
 },

 二 java端

package cn.helloxhs.moudle.common;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.disk.DiskFileItem;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import cn.helloxhs.base.controller.BaseController;

/**
 * 类说明
 *
 * @author 肖荷山
 * @version 创建时间：2017年12月23日 上午11:14:27
 */
@Controller
@RequestMapping("/file")
public class FileController extends BaseController {
  @RequestMapping("/uploadFile")
  @ResponseBody
  public Object uploadFile(HttpServletResponse response, HttpServletRequest request, MultipartFile file) {
    String realPath = request.getSession().getServletContext().getRealPath("/temp");
    try {
      CommonsMultipartFile cf = (CommonsMultipartFile) file;
      DiskFileItem fi = (DiskFileItem) cf.getFileItem();
      File f1 = fi.getStoreLocation();
      InputStream ips = new FileInputStream(f1);
      OutputStream ops = new FileOutputStream(realPath + "/" + "xhs.jpg");
      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;
  }

}

图片存在了项目的temp目录下

简单就好，没其他功能，单纯上传图片。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用微信小程序做出图片上传

如何操作JS生成指随机数与随机序列

以上是微信小程序上传图片实战案例解析的详细内容。更多信息请关注PHP中文网其他相关文章！