微信小程序编辑头像

头像昵称填写 | 微信开放文档
这里面有个微信自带的编辑头像的方法,但是测试发现这个上传头像特别慢。至少需要5s。如果修改以后再去访问接口给接口数据那么时间花费的更久。
原因是因为

进行安全检验需要时间,避免上传敏感图片。

但是我们实际用的时候测试说太慢了不行,只能改变思路,自己写了

changeHead(){
    var _this = this;
    wx.showActionSheet({
        itemList: ["拍照", "从相册中选择"],
        itemColor: "#000000",
        success: function (res) {
            if (!res.cancel) {
                if (res.tapIndex == 0) {
                    _this.imgWShow("camera")        //拍照
                } else if (res.tapIndex == 1) {
                    _this.imgWShow("album")      //相册
                }
            }
        }
    })
},
// 点击调用手机相册/拍照
imgWShow: function (type) {
    var _this = this;
    let len = 0;
    if (_this.data.imgList != null) {
        len = _this.data.imgList.length
    }   //获取当前已有的图片
    wx.chooseImage({
        count:1,     //最多还能上传的图片数,这里最多可以上传1张
        sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有
        sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有
        success: function (res) {
            wx.showToast({
                title: '正在上传...',
                icon: "loading",
                mask: true,
                duration: 1000
            })
            // 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片
            var imgList = res.tempFilePaths
            _this.UploadImg(imgList[0])//访问接口把上传的图片给接口
        },
        fail: function () {
            wx.showToast({
                title: '图片上传失败',
                icon: 'none'
            })
            return;
        }
    })
},

 

UploadImg(avatarUrl){
    console.log(avatarUrl)
    this.uploadFile(avatarUrl).then(res => {
        this.setData({
            avatar:avatarUrl,
        })
    })
},
uploadFile: (filePath) => {
    let url = "http://XXXXX/uploaded_file"//上传的接口
    return new Promise((resolve, reject) => {
        wx.uploadFile({
            url: url,
            filePath: filePath,
            name: "file",
            header: {
                'content-type': 'application/json',
                'token': getToken(),
            },
            success: (res) => {
                console.log(res)
                let result = JSON.parse(res.data)
                let {code} = result
                if (code === 200) {
                    return resolve(result.data)
                } else {
                    return reject(result.message)
                }
            },
            fail() {
                reject('接口有误,请检查')
            }
        })
    })
},

 

你可能感兴趣的:(微信小程序,微信小程序,小程序)