收藏
回答

图片上传Uploader组件里 wx.chooseImage()方法怎么调用?

<view class="page__bd">
        <mp-cells>
            <mp-cell>
                <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="5" title="图片上传" tips="图片上传提示"></mp-uploader>
            </mp-cell>
        </mp-cells>
    </view>
Page({
    data: {
        files: [{
            url: 'http://mmbiz.qpic.cn/mmbiz_png/VUIF3v9blLsicfV8ysC76e9fZzWgy8YJ2bQO58p43Lib8ncGXmuyibLY7O3hia8sWv25KCibQb7MbJW3Q7xibNzfRN7A/0',
        }, {
            loading: true
        }, {
            error: true
        }]
    },
    onLoad() {
        this.setData({
            selectFile: this.selectFile.bind(this),
            uplaodFile: this.uplaodFile.bind(this)
        })
    },
    chooseImage: function (e) {
        var that = this;
        wx.chooseImage({
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
            success: function (res) {
                // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
                that.setData({
                    files: that.data.files.concat(res.tempFilePaths)
                });
            }
        })
    },
    previewImage: function(e){
        wx.previewImage({
            current: e.currentTarget.id, // 当前显示图片的http链接
            urls: this.data.files // 需要预览的图片http链接列表
        })
    },
    selectFile(files) {
        console.log('files', files)
        // 返回false可以阻止某次文件上传
    },
    uplaodFile(files) {
        console.log('upload files', files)
        // 文件上传的函数,返回一个promise
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('some error')
            }, 1000)
        })
    },
    uploadError(e) {
        console.log('upload error', e.detail)
    },
    uploadSuccess(e) {
        console.log('upload success', e.detail)
    }});

官方文档里,并没有调用chooseImage()方法的地方, 在mp-uoloader标签里 添加catchtap、bindtap方法调用,都会造成触发两次上传图片窗口的bug,同时,组件自带的点击图片放大wx.previewImage()方法,也没有明确调用的地方,问题还有点击图片放大时,也是触发上传窗口, 去掉catchtap、bindtap方法,就没有问题,但是去掉后 wx.chooseImage()方法就触发不了

回答关注问题邀请回答
收藏

5 个回答

  • 小澳
    小澳
    2020-10-28

    实际使用和在文档中写的很多都不一致,比如选择图片的时候,不能设置去掉原图的选项,预览的时候不占满全屏,最后把uploader的源码找到,放在本地,才发现,文档中提到的很多属性,根本就没实现,只能修修改改了一下,最后完美解决我的各种需求

    2020-10-28
    有用
    回复
  • 神经蛙
    神经蛙
    2020-02-18

    我想读取files属性的值,结果读不了

    下图的files="{{picture_files}}" , 在AppData内,是永远为空的数组
    


    <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{picture_files}}"   binddelete="deleteFile" max-count="5" title="" tips="请上传合适的图片..."></mp-uploader>
    
    2020-02-18
    有用
    回复
  • 桃之夭夭
    桃之夭夭
    2020-01-02

    请问解决了吗? 属性delete 配置可以用吗?

    2020-01-02
    有用
    回复 3
    • oo风oo
      oo风oo
      2020-01-02
      没有,  又自己重新写的。
      2020-01-02
      回复
    • 桃之夭夭
      桃之夭夭
      2020-01-02
      我也是发现了这个问题,我觉得那两个方法根本没用,
      2020-01-02
      回复
    • 此言很差矣
      此言很差矣
      2020-01-19
      +1  chooseImage previewImage都无效,严重怀疑是小程序api和sdk的文档弄混了
      2020-01-19
      回复
  • 铭锋科技
    铭锋科技
    2019-12-16

    谢邀,解决了吗

    2019-12-16
    有用
    回复 1
    • oo风oo
      oo风oo
      2020-01-02
      对不起 ,一直没注意,结果没有用文档上的, 和楼下范说的,自己又写了个
      2020-01-02
      回复
  • 范
    2019-12-16

    我这边上传图片的方法是在一个组件上绑定一个点击事件,在点击事件中调用

    wx.chooseImage({

    count: 1,

    sizeType: ['original', 'compressed'],

    sourceType: ['album', 'camera'],

    success(res) {

    }});

    触发图片上传事件,选择图片后在success方法中调用后台接口,将图片传到后台


    wx.previewImage({

    urls: [imgSrc1,imgSrc2] // 需要预览的图片列表

    })

    这个方法是在微信中打开图片预览(实际上此时已经离开小程序了,关闭图片的时候再回到原先的小程序)

    2019-12-16
    有用
    回复 6
    • oo风oo
      oo风oo
      2019-12-16
      在组件上添加单机事件,会造成点击一次,触发两次上传窗口的bug,不知大神是怎么绑定的事件
      2019-12-16
      回复
    • 范
      2019-12-16回复oo风oo
      我是在view上绑定的事件,没用那个上传组件
      2019-12-16
      回复
    • oo风oo
      oo风oo
      2019-12-16回复
      奥, 我考虑过不用那个组件,但是需要自己写样式,
      2019-12-16
      回复
    • 范
      2019-12-16回复oo风oo
      至少写样式,比解决这个问题简单
      2019-12-16
      回复
    • oo风oo
      oo风oo
      2019-12-16
      嗯,感觉微信小程序官方文档好多坑。。
      2019-12-16
      回复
    查看更多(1)
登录 后发表内容
问题标签