微信小程序实现图片上传

一、wxml模块

<view class='head_img' bindtap='upShopLogo'>
    <text>用户头像</text>
    <view class='img'><image src='{{userimg}}'></image></view>
</view>

二、js模块

1、data 初始化变量

data: {
    userPic:'',
    nickName:'',
    filePath:'',
    male:''
},

2、点击事件触发上传事件

	upShopLogo: function() {
		var that = this;
		wx.showActionSheet({
			itemList: ['相册选择', '拍照上传'],
			itemColor: "#f7982a",
			success: function(res) {
				if (!res.cancel) {
					if (res.tapIndex == 0) {
						that.chooseWxImageShop('album'); //相册选择
					} else if (res.tapIndex == 1) {
						that.chooseWxImageShop('camera'); //上传
					}
				}
			}
		})
	},

3、选择图片

	chooseWxImageShop: function(type) {
		var that = this;
		wx.chooseMedia({
			sizeType: ['original', 'compressed'],
			sourceType: [type],
			success: function(res) {
				that.data.userPic= res.tempFilePaths[0];
				//that.upload_file(url, res.tempFilePaths[0]);
				
				that.setData({
					userPic: that.data.userPic
				})
			}
		})
	},

4、上传图片到服务器

	upload_file: function(url, filePath) {
		var that = this;
        var formData = {}; // HTTP 请求中其他额外的参数信息
		wx.uploadFile({
			url: url, //后台处理接口
			filePath: filePath,
			name: 'file',
			header: {
				'content-type': 'multipart/form-data'
			}, // 设置请求的 header
			formData:formData, 
			success: function(res) {
				var data = JSON.parse(res.data);
				that.setData({
					userimg: data.path,
				});
				that.showMessage('上传成功');
			},
			fail: function(res) {}
		})
	},