受欢迎的博客标签

wechat-微信小程序Asp .Net Core开发实战记录(29)-小程序云开发实战,在客户端实现图片的增删改查

Published

 

从手机中选择要上传的图片

 // 选择图片
    chooseImage: function () {
        const items = this.data.photosNew

        wx.chooseImage({
            count: 9, //最多可以选择的图片总数
            sizeType: ['original', 'compressed'],// 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['album', 'camera'],// 可以指定来源是相册还是相机,默认二者都有
            success: res => {
                // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
                let tempFilePaths = res.tempFilePaths 

                for (const tempFilePath of tempFilePaths) {
                    items.push({
                        src: tempFilePath
                    })
                }

                this.setData({ photosNew: items })
            }
        })
    },

 

上传图片到云存储

 

 

当我们选择好图片后,存在想删除图片并重新选择的可能,所以还需要支持图片的删除功能。删除功能是通过点击图片右上角的icon图标来实现的。我们已经在wxml代码的icon组件中注册了deletelmage事件。在post-comment.js中添加deletelmage方法

删除图片的逻辑非常简单,只需要获取当前删除图片的序号,并将该图片的URL从this.chooseFiles数组中删除,重新绑定chooseFiles变量即可。保存并重新运行代码,就可以通过点击已选择图片右上角的叉叉按钮删除图片了,删除图片后,可以重新选择图片。

 

errMsg:"cloud.uploadFile:ok"
fileID:"cloud://debug-14e7f7.6465-debug-14e7f7/1547845511248-9230352.png"
statusCode:200

 

https://github.com/TencentCloudBase/tcb-juejin-workshops/blob/master/album/pages/photos/add.js