微信小程序入門八頭像上傳

1. action-sheet 底部彈出可選菜單組件

2. wx.uploadFile 將本地資源上傳到服務器

3. wx.chooseImage 從本地相冊選擇圖片或使用相機拍照。

4. wx.previewImage 預覽圖片

效果圖：

 

 

wxml代碼：

<!--
變量說明：
windowHeight ：設備的窗口的高度
windowWidth ： 設備的窗口的寬度
actionSheetHidden ： 組件是否顯示
actionSheetItems ：組件菜單項
-->
<view class="page__bd" style="height: {{windowHeight * 0.8}}px; width: {{windowWidth}}px;">
<view class="weui-cells weui-cells_after-title me-info"
style="top:{{windowHeight * 0.4}}px;">
<view class="weui-cell">
<view class="weui-cell__hd" style="position: relative;margin-right: 10px;">
<image src="{{userImg}}" style="width: 50px; height: 50px; display: block;border-radius:25px;" bindtap="clickImage"/>
</view>
<view class="weui-cell__bd">
<navigator url="../login/login" >
點擊登陸</navigator>
<view style="font-size: 13px;color: #888888;">摘要信息</view>
</view>
</view>
<view class="weui-cell weui-cell_access">
<view class="weui-cell__bd">
<view style="display: inline-block; vertical-align: middle">發佈博客</view>
</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</view>
<view class="weui-cell weui-cell_access">
<view class="weui-cell__bd">
<view style="display: inline-block; vertical-align: middle">信息列表</view>
<view class="weui-badge" style="margin-left: 5px;">8</view>
</view>
<view class="weui-cell__ft weui-cell__ft_in-access">詳細信息</view>
</view>
<view class="weui-cell weui-cell_access">
<view class="weui-cell__bd">
<view style="display: inline-block; vertical-align: middle">我的資料</view>
</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</view>
<view class="weui-cell weui-cell_access">
<view class="weui-cell__bd">
<view style="display: inline-block; vertical-align: middle">設置</view>
</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</view>
</view>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">
<block wx:for="{{actionSheetItems}}" wx:key="unique">
<action-sheet-item bindtap="{{item.bindtap}}">{{item.txt}}</action-sheet-item>
</block>
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
</view>
wxss代碼：

.page__bd{
background: url(https://www.itit123.cn/image/meBack.jpg) no-repeat;
background-size:cover;
}

js代碼：

var util = require('../../utils/util.js');
var app = getApp();

Page({
data: {
userImg: "../../images/pic_160.png", // 頭像圖片路徑
actionSheetHidden: true, // 是否顯示底部可選菜單
actionSheetItems: [
{ bindtap: 'changeImage', txt: '修改頭像' },
{ bindtap: 'viewImage', txt: '查看頭像' }
] // 底部可選菜單
},
// 初始化加載獲取設備長寬
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
}
});
},
// 點擊頭像 顯示底部菜單
clickImage: function () {
var that = this;
that.setData({
actionSheetHidden: !that.data.actionSheetHidden
})
},
// 點擊其餘區域 隱藏底部菜單
actionSheetbindchange: function () {
var that = this;
that.setData({
actionSheetHidden: !that.data.actionSheetHidden
})
},
// 上傳頭像
changeImage: function () {
var that = this;
wx.chooseImage({
count: 1, // 默認9
sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片，只有一張圖片獲取下標爲0
var tempFilePaths = res.tempFilePaths[0];
that.setData({
userImg: tempFilePaths,
actionSheetHidden: !that.data.actionSheetHidden
})
util.uploadFile('/itdragon/uploadImage', tempFilePaths, 'imgFile' ,{}, function (res) {
console.log(res);
if (null != res) {
that.setData({
userImg: res
})
} else {
// 顯示消息提示框
wx.showToast({
title: '上傳失敗',
icon: 'error',
duration: 2000
})
}
});
}
})
},
// 查看原圖
viewImage: function () {
var that = this;
wx.previewImage({
current: '', // 當前顯示圖片的http連接
urls: [that.data.userImg] // 須要預覽的圖片http連接列表
})
}
});

utils.js代碼：

//上傳文件
function uploadFile(url, filePath, name, formData, cb) {
console.log('a=' + filePath)
wx.uploadFile({
url: rootDocment + url,
filePath: filePath,
name: name,
header: {
'content-type': 'multipart/form-data'
}, // 設置請求的 header
formData: formData, // HTTP 請求中其餘額外的 form data
success: function (res) {
if (res.statusCode == 200 && !res.data.result_code) {
return typeof cb == "function" && cb(res.data)
} else {
return typeof cb == "function" && cb(false)
}
},
fail: function () {
return typeof cb == "function" && cb(false)
}
})
}

後臺服務器代碼：

@RequestMapping("uploadImage")
@ResponseBody
public String uploadHeadImage(HttpServletRequest request, @RequestParam(value = "imgFile" , required=false) MultipartFile imageFile) {
try {
System.out.println("imageFile :::: " + imageFile);
String realPath = request.getSession().getServletContext().getRealPath("/");
if(imageFile!=null){
if(GenerateUtils.allowUpload(imageFile.getContentType())){
String fileName = GenerateUtils.rename(imageFile.getOriginalFilename());
String saveName = fileName.substring(0,fileName.lastIndexOf("."));
File dir = new File(realPath + "image");
if(!dir.exists()){
dir.mkdirs();
}
File file = new File(dir,saveName+".jpg");
imageFile.transferTo(file);
return "https://www.itit123.cn/sierew/image/"+file.getName();
}
}
} catch (Exception e) {
e.printStackTrace();
}
return "null";
}