微信小程序> 微信小程序头像上传

微信小程序头像上传

浏览量:3408 时间: 来源:菜鸟也能逆袭

一、html部分

<view class='head_img' bindtap='upShopLogo'>

<text>头像</text>

<view class='img'><image src='{{userimg}}'></image></view>

</view>

二、js部分

1.在data里面设置默认的值

data: {

userimg:'',

nickname:'',

},

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.chooseImage({

sizeType: ['original', 'compressed'],

sourceType: [type],

success: function (res) {

that.data.userimg = res.tempFilePaths[0],

that.upload_file(urldate.upimg + 'shop/shopIcon', res.tempFilePaths[0])

userimg = res.tempFilePaths[0];

that.setData({

userimg: userimg

})

}

})

},

4.上传图片到服务器

upload_file: function (url, filePath) {

var that = this;

var signature = signa.signaturetik('token=' + token, 'userAccessToken=' + userAccessToken, 'studentAccessToken=' + studentAccessToken);

wx.uploadFile({

url: urldate.upimg,//后台处理接口

filePath: filePath,

name: 'file',

header: {

'content-type': 'multipart/form-data'

}, // 设置请求的 header

formData: {//需要的参数

'token': token,

'signature': signature,

'userAccessToken': userAccessToken,

'studentAccessToken': studentAccessToken

}, // HTTP 请求中其他额外的 form data

success: function (res) {

var data = JSON.parse(res.data);

 

that.setData({

userimg: data.path,

});

that.showMessage('上传成功');

},

fail: function (res) {

}

})

},

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎