微信小程序之图片上传

2019-01-06

最近一直在写小程序，需求上有好些地方用到了图片上传。项目是用了wepy这个小程序框架，跟Vue非常类似，很自然的将这块写成一个公共组件。主要涉及图片选择，实时显示上传的进度，上传到服务器，上传成功后的预览以及从服务器删除图片。

业务需求

find

需要很明了的显示3个大框框，直接在data中定义了3组数据

data

// 上传图片列表
uploadList: [
    {
        src: '',  // 预览图片用的src
        isShowDelete: false,  // 是否显示删除图片按钮
        beginUpload: false,  // 是否开始上传图片
        sucUpload: false,  // 是否上传成功
        progress: 0,  // 上传进度
        imageId: '',  // 上传成功后，后续提交的图片ID
        resId: '',  // 删除图片用的ID
    },
    {
        src: '',
        isShowDelete: false,
        beginUpload: false,
        sucUpload: false,
        progress: 0,
        imageId: '',  
        resId: '',  
    },
    {
        src: '',
        isShowDelete: false,
        beginUpload: false,
        sucUpload: false,
        progress: 0,
        imageId: '',  
        resId: '',  
    },
],

html

将数据遍历在每个item上面。

<repeat for="{{uploadList}}" key="index" index="index" item="item">
    <view class="photo-item" @tap="chooseImage({{ index }})">
        <view class="delete-icon" wx:if="{{ item.isShowDelete }}" @tap.stop="deleteImage({{ index }})"></view>
        <text class="add-text">添加照片</text>
        <view class="photo-box">
            <image class="photo-content" wx:if="{{ item.src }}" @tap.stop="handleImagePreview({{ index }})" src="{{ item.src }}" mode="widthFix" lazy-load="false"></image>
        </view>
        <view class="progress-box" wx:if="{{item.beginUpload}}" @tap.stop="handleImagePreview({{ index }})"> 
            <view wx:if="{{ item.sucUpload }}" class="commom-status upload-suc"></view>
            <view  wx:else class="progress-box commom-status">
                <text class="percent" style="width: {{ item.progress + '%'}}"></text>
            </view>
        </view>
    </view>
</repeat>

script

图片选择

使用wx.chooseImage API从本地相册选择图片或使用相机拍照，限制其大小为5M。success回调里的tempFilePath可以用于后续图片上传和预览。

chooseImage(index) {
    let _this = this,
        maxSize = 5*1024*1024;  // 限制图片大小为5M
    wx.chooseImage({
        sizeType: ['original'],  //可选择原图或压缩后的图片
        sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
        success: res => {
            if(res.tempFiles[0].size > maxSize) {
                wepy.showToast({
                    title: '图片大小不能超过5M，请压缩后上传',
                    icon: 'none',
                });
                return;
            }
        }    
},

图片上传及进度实时显示

find

使用wx.uploadFile API将图片上传到服务端，通过onProgressUpdate监听图片上传进度变化，改变进度条的宽度。在上述wx.chooseImage的success里继续：

const uploadTask = wx.uploadFile({
    url: '服务器地址', 
    filePath: res.tempFilePaths[0],  // 要上传文件资源的路径
    name: 'Filedata',
    header: {
        "Content-Type": "multipart/form-data",
    },
    success(response) {  // 图片上传成功
        _this.uploadList[index].sucUpload = true;
        _this.uploadList[index].isShowDelete = true;
        _this.uploadList[index].src = res.tempFilePaths[0];
        _this.$apply();
        let data = JSON.parse(response.data);
        _this.uploadList[index].imageId = data.data.image_id;
        _this.uploadList[index].resId = data.data.res_id;
        _this.dealImage();  // 上传成功后的操作
    },
    fail(res) {  // 图片上传失败
        _this.uploadList[index].beginUpload = false;
        _this.uploadList[index].sucUpload = false;
        wepy.showToast({
            title: '图片上传失败，请重新上传',
            icon: 'none',
        });
    }
});
// 监听上传进度变化
uploadTask.onProgressUpdate((res) => {
    _this.uploadList[index].beginUpload = true;
    _this.uploadList[index].progress = res.progress;  // 进度变化
    _this.$apply();
    // console.log('上传进度', res.progress)
    // console.log('已经上传的数据长度', res.totalBytesSent)
    // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
})

图片预览

图片上传成功后得到带有src的image

find

我们通过wx.previewImage API进行图片的预览

handleImagePreview(index) {
    let urls = [];
    this.uploadList.forEach(element => {
        if(element.src) {
            urls.push(element.src);
        }
    });
    if(urls.length > 0) {
        wx.previewImage({
            current: this.uploadList[index].src,  // 当前显示图片的http链接
            urls: urls,  // 需要预览的图片http链接列表
        }) 
    }
},

图片删除

通过服务端约定的接口，将相应的ID传到服务端删除图片。


async deleteImage(index) {
    let data = {
        res_id: this.uploadList[index].resId,
    };
    await api.delPhoto(data);
    let resetData = {
        src: '',
        isShowDelete: false,
        beginUpload: false,
        sucUpload: false,
        progress: 0,
        imageId: '',  // 提问用的ID
        resId: '',  // 删除图片用的ID
    };
    this.uploadList[index] = resetData;
    this.$apply();
    this.dealImage();
}

与父组件通信

在图片上传成功和删除成功时需要将图片的列表信息发送给父组件，在wepy中通过$emit可以轻松实现。

1	this.$emit('transferImage', imageMessage);

总结

至此，一个微信小程序的图片上传相关功能完成。相比其他非小程序生态的图片上传功能，可以说小程序的实现起来相对简单，都有相应的API调用，兼容性也非常友好。

如有错误，还望指正。