美文网首页微信小程序的巨坑
小程序中图片上传的实现

小程序中图片上传的实现

作者: 芽呀 | 来源:发表于2019-12-09 14:24 被阅读0次

公司一个页面中要求实现了一个图片上传的组件,
上传成功是这个样子


image.png

点击右上角的x号可以删除, 点击添加可以上传照片并且限制最多只能上传三张照片

1.点击选中图片

chooseImageBtn(res) {
        var that = this
        wx.chooseImage({
            count: 3, //指定张数
            sizeType: ['original', 'compressed'], //原图 压缩图
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有  
            success(res) { 
          //每次只能上传一张 多张照片要遍历
                res.tempFilePaths.forEach(item => {
                    that.uploadFile(item); //图片上传每次一张  每次遍历都调用这个借口
                });
            }
        })
    },

2.上传到图片服务器,将返回的图片链接存放在一个数组中
wx.uploadFile官网说明

uploadFile(url) {
        var that = this;
        const token = wx.getStorageSync('token') || '';  //获取token
        wx.uploadFile({
            url: config.DOMAIN + '/common/auth/upload', //图片服务器的请求路径
            filePath: url, //文件流
            name: 'file',
          //
            header: {
                "Content-Type": "multipart/form-data",
                "X-Auth-Token": token
            },
            formData: {
                'user': 'test'
            },
            success(res) {
                const mata = JSON.parse(res.data)
                // 把数据存到imglist中去
                var url = config.DOMAIN + mata.fileUpload.fileUrl
                that.data.files.push(url)
                that.setData({
                    files: that.data.files
                })
                // 判断图片的长度 如果等于3 就隐藏添加按钮
                if (that.data.files.length == 3) {
                    that.setData({
                        addimgBox: true
                    })
                }
            }
        })
    },

3.点击删除图片
在html中添加上

<image class="icon" catchtap='del' data-index="{{index}}" src="/assets/images/delete_picture_icon.png"></image>
//在遍历显示的时候添加下标 方便点击删除
        const index = e.currentTarget.dataset.index //获取到当前点击的下标
        this.data.files.splice(index, 1) // 移除点击的项的图片
        this.setData({
            files: this.data.files,
            addimgBox: false
        })

4.将数据中的图片上传

直接把存放照片的数组提交就可以了
有什么写的不明白的地方可以直接问我 看到了都会回的

相关文章

网友评论

    本文标题:小程序中图片上传的实现

    本文链接:https://www.haomeiwen.com/subject/fwsbgctx.html