「小程序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的使用。對於用戶表中的頭像更新和交互式彈框，我後來都在源碼上作了升級。建議觀看源碼。