微信小程序- wx.chooseImage上传单张图片

先来说明一下我们需要实现的最终效果

实现单张图片的选择、上传、预览

例如下图所示的界面，这是一个比较典型的上传单张图片的表单，用户可以从自己的手机相册中选择1张图片(或直接通过摄像头拍摄)，并在页面中显示上传的图片缩略图。

一、wx.chooseImage简介

微信小程序提供了很多Api，其中wx.chooseImage就是从本地相册选择图片或使用相机拍照。具体介绍可以查看官方介绍

我们先来了解一下wx.chooseImage这个Api一些相关参数

二、WXML

这里关键的是image组件，详情可见官方文档

下面我们直接看代码：

<view class='fillFormCell'>
    <text>头像</text>
    <image class="resumeAvatar" src='{{avatar}}' mode="aspectFill" bindtap='chooseimage'/>
</view>

---

三、 WXSS

此为样式部分，可根据自己的UI修改

.fillFormCell {
  padding: 30rpx 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}

/* 头像 */
.resumeAvatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

四、JS

const domain = "http://xxxxx"; // xxxxx为自己公共url部分
Page({
      data: {
        avatar: "https://hbimg.huabanimg.com/5f1011267996aa03cb7a2fcfee1f5738bf8ca9142e3-DLFQky_fw658", // 头像(设置用户上传之前的默认头像)
        avatarUrl:"", // 上传的图片链接
    },
  
    /* ================== 点击上传图片 上传头像 ================== */
    chooseimage: function () {
       let that = this;
       wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                const newChooseImgs = res.tempFilePaths[0];
                const imgInfo = res.tempFiles[0];
                // console.log("选择的图片", res);
                // 判断图片尺寸
                // console.log("尺寸", imgInfo.size);
                if (imgInfo.size / 1024 / 1024 >= 10) {
                    wx.showModal({
                        title: '提示', // 标题
                        content: "图片超过10MB啦~",// 内容
                        showCancel: false, // 是否显示取消按钮
                        confirmText: '确定', // 确认按钮的文字
                    });
                    return
                }
                // 判断图片格式
                const imgSplit = newChooseImgs.split(".");
                const imgSLen = imgSplit.length;
                // console.log("格式", imgSplit, imgSLen, imgSLen - 1);
                if (["jpg", "jpeg", "png"].includes(imgSplit[imgSLen - 1])) {
                    console.log("格式正确");
                } else {
                    console.log("格式错误");
                    wx.showModal({
                        title: '提示',
                        content: "请选择正确的图片格式上传",
                        showCancel: false,
                        confirmText: '确定',
                    });
                    return
                }
                if (newChooseImgs) {
                    //  上传图片
                    // console.log( "此次选择的图片", newChooseImgs);
                    // if(){}
                    wx.uploadFile({
                        url: domain + 'xxxxx', // xxxxx为上传图片的接口
                        filePath: newChooseImgs,
                        header: {
                            'content-type': 'multipart/form-data'
                        },
                        name: 'file',
                        formData: {
                            'isup': "2"
                        },
                        success: function (e) {
                            const data = JSON.parse(e.data);
                            // console.log("访问上传接口成功", e, data);
                            if (data.success) {
                                console.log("上传成功");
                                that.setData({
                                    avatar: `${domain}/img/server/${e}`,
                                    avatarUrl: e,
                                });
                                wx.showToast({
                                    title: "上传成功",
                                    icon: 'success',
                                    duration: 1000
                                });
                            } else {
                                console.log("上传出错", e);
                                wx.showToast({
                                    title: "上传出错",
                                    icon: 'none',
                                    duration: 1000
                                });
                            }
                        },
                        fail: function (e) {
                            console.log("访问接口失败", e);
                            wx.showToast({
                                title: "网络出错",
                                icon: 'none',
                                duration: 1000
                            });
                        },
                    });
                }
            }
        })
    },
  })