「小程序JAVA实战」小程序头像图片上传（上）（43）

在微信小程序中，有很多的场景是用来上传图片的，有的图片是拍摄获得，有的直接选择手机端的相册。源码：https://github.com/limingios/wxProgram.git 中No.15

官方组件的介绍

• 图片选择API

官方网站：https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html

• 文件上传API
  > 官方网站：https://developers.weixin.qq.com/miniprogram/dev/api/network-file.html

增加头像的点击事件

<view>

  <view class='container'>
      <image src="{{faceUrl}}" class="face" bindtap='uploadFace'></image>
    <label class='nickname'>{{nickname}}</label>
      <button size='mini' class='primary' bindtap='uploadVideo'> 上传作品</button>
      <button size='mini' type='' class='logout' bindtap='logout'>注销</button>

        <button size='mini' type='' class='follow' data-followType='0' bindtap='followMe'>已关注</button>

        <button size='mini' type='primary' class='follow' data-followType='1' bindtap='followMe'>关注我</button>


    <view class='container-row'>
      <label class='info-items'>{{fansCounts}} 粉丝</label>
      <label class='info-items'>{{followCounts}} 关注</label>
      <label class='info-items'>{{receiveLikeCounts}} 获赞</label>
    </view>
  </view>

</view>

<view class="line"></view>

// pages/mine/mine.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    faceUrl: "../../resource/images/noneface.png",
    nickname: "昵称",
    fansCounts: 0,
    followCounts: 0,
    receiveLikeCounts: 0,
  },
  /**
   * 用户注销
   */
  logout:function(e){
    var user = app.userInfo;
    wx.showLoading({
      title: '正在注销中。。。'
    });
    wx.request({
      url: app.serverUrl + "/logout?userId="+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data);
        var status = res.data.status;
        wx.hideLoading();
        if (status == 200) {
          wx.showToast({
            title: "用户注销成功~！",
            icon: 'none',
            duration: 3000
          })
          app.userInfo = null;
          wx.redirectTo({
            url: '../userRegister/userRegister',
          })

        } else if (status == 500) {
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 3000
          })
        }
      }
    })
  },
  /**
   * 头像上传
   */
  uploadFace:function(e){
    var user = app.userInfo;
    var me = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        if (tempFilePaths.length>0){
          console.log(tempFilePaths[0]);
              wx.uploadFile({
                url: app.serverUrl + "/user/uploadFace?userId=" + user.id, //仅为示例，非真实的接口地址
                filePath: tempFilePaths[0],
                name: 'file',
                success: function (res) {
                  var data = JSON.parse(res.data);
                  console.log(data);
                   wx.hideLoading();
                  if (data.status == 200) {
                    wx.showToast({
                      title: "用户上传成功~！",
                      icon: 'none',
                      duration: 3000
                    })
                    me.setData({
                      faceUrl: app.serverUrl+data.data
                    })


                  } else if (data.status == 500) {
                    wx.showToast({
                      title: data.msg,
                      icon: 'none',
                      duration: 3000
                    })
                  }
                }
              })
        }

      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

后端spring boot文件的处理

增加文件上传的工具类，时刻要记住我们是代码的搬运工，不是代码的制造者。能用现成的工具，绝对不手动开发一个。

• common中
  FileUtil.java

package com.idig8.utils.file;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Calendar;
import java.util.UUID;
import javax.imageio.ImageIO;

import com.idig8.utils.file.enums.FileEnum;

    public class FileUtil {
         public static String uploadFile(byte[] file, String filePath, String fileName) throws Exception {
            String newDir = getDirAndDateDir(fileName);
            File targetFile = new File(filePath + newDir);
            if (!targetFile.exists()) {
                targetFile.mkdirs();
            }
            FileOutputStream out = new FileOutputStream(filePath + newDir + fileName);
            out.write(file);
            out.flush();
            out.close();
            return newDir + fileName;
        }

        // 物理删除；
        public static boolean deleteFile(String fileName) {
            File file = new File(fileName);
            // 如果文件路径所对应的文件存在，并且是一个文件，则直接删除
            if (file.exists() && file.isFile()) {
                if (file.delete()) {
                    return true;
                } else {
                    return false;
                }
            } else {
                return false;
            }
        }




        public static String renameToUUID(String fileName) {
            return UUID.randomUUID() + "." + fileName.substring(fileName.lastIndexOf(".") + 1);
        }

        public static String renameToUUID() {
            return UUID.randomUUID().toString();
        }

        public static boolean isImage(InputStream inputStream) throws IOException {
            BufferedImage bufferedImage = ImageIO.read(inputStream);
            if(bufferedImage == null) {
                return false;
            }
            return true;
        }

        public static boolean isImage(File file) throws IOException {
            BufferedImage bufferedImage = ImageIO.read(file);
            if(bufferedImage == null) {
                return false;
            }
            return true;
        }


        public static String getDirAndDateDir(String fileName){
            String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
            String dir = "";
            for (FileEnum f : FileEnum.values()) {
                if(suffix.equals(f.getSuffix())){
                    dir = f.getDir();
                }
            }
            Calendar now = Calendar.getInstance();
            int year = now.get(Calendar.YEAR);
            int month = now.get(Calendar.MONTH) + 1;
            int day = now.get(Calendar.DAY_OF_MONTH);
            String dateTime = year+"-"+month+"-"+day;
            return dir+"/"+dateTime+"/";
        }
}

• api 增加java类

package com.idig8.controller;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.idig8.service.UserService;
import com.idig8.utils.JSONResult;
import com.idig8.utils.file.FileUtil;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;

@RestController
@Api(value="用户接口",tags={"用户的controller"})
@RequestMapping(value = "/user")
public class UserController extends BasicController{

    @Autowired
    private UserService userService;

    @Value("${server.face.path}")
    private String fileSpace;

    @ApiOperation(value="用户上传头像",notes="用户上传头像的接口")


    @ApiImplicitParams({
        @ApiImplicitParam(name="userId",value="用户id",required=true,dataType="String",paramType="query"),
        @ApiImplicitParam(name="file",value="文件上传",required=true,dataType="String",paramType="query"),
    })
    @PostMapping("/uploadFace")
    public JSONResult uploadFace(String userId,@RequestParam("file") MultipartFile file) {
        if (StringUtils.isBlank(userId)) {
            return JSONResult.errorMsg("用户id不能为空...");
        }

        // 文件保存的命名空间
        String fileName = file.getOriginalFilename();
        // 保存到数据库中的相对路径
         try {
                FileUtil.uploadFile(file.getBytes(), fileSpace, fileName);
            } catch (Exception e) {
                e.getStackTrace();
                return JSONResult.errorMsg(e.getMessage());
            }


        return JSONResult.ok();
    }


}

另外需要注意的是：在controller里面我增加了一个读配置文件里面属性的参数。 @Value(“${server.face.path}”)

• 上传后的路径
  

PS：基本头像上传已经完毕，主要是springboot和小微信API的使用。对于用户表中的头像更新和交互式弹框，我后来都在源码上做了升级。建议观看源码。