• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序云开发之图片上传wx.cloud.uploadFile()

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

页面按钮

<button bindtap="addImg" class="addPng" type="default">添加图片</button>

js:使用上传图片之前肯定要先选择图片,所以在此之前要使用wx.chooseImage()选择图片,然后在上传图片

addImg : function(){

  wx.chooseImage({//选择图片

      count : 1, //规定选择图片的数量,默认9

      sizeType : [”original”,”compressed”], //规定图片的尺寸, 原图/压缩图

      sourceType : [‘album’,’camera’], //从哪里选择图片, 相册/相机

      success : (chooseres)=>{ //接口调用成功的时候执行的函数

          //console.log(chooseres);

          //选择图片后可以在这里上传

          wx.cloud.uploadFile({

            cloudPath: "img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000),//云储存的路径及文件名

            filePath : chooseres.tempFilePaths[0], //要上传的图片/文件路径 这里使用的是选择图片返回的临时地址

            success : (uploadres) => { //上传图片到云储存成功

              //console.log(uploadres)

              wx.showLoading({ //显示加载提示框 不会自动关闭 只能wx.hideLoading关闭

                title : “图片上传中”, //提示框显示的提示信息

                mask : true, //显示透明蒙层,防止触摸。为true提示的时候不可以对屏幕进行操作,不写或为false时可以操作屏幕

                success : function () {

                    wx.hideLoading() //让提示框隐藏、消失

                }

              });

            },

            fail : (err) => {

              console.log(err)

            }

          })

      },

      fail : (err) => {

        console.log(err)

      }

  })

}

success:(chooseres):

上面的代码中success的返回值chooseres中有三个参数,第一个就是返回的消息,第二个是图片的临时地址列表(数组),不管选择的数量是1还是其他,都是数组,所以取特定位置的值的时候都需要用下标来取;

第三个是文件对象数组,其中每个位置存放了文件的临时地址path和文件的大小size

cloudPath: "img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000):

路径文件夹以 “/” 分割 如果”/”前面的文件夹没有,则会自动创建”/”后面是文件名;

success : (uploadres)返回值中有消息、fileID(文件访问路径)、和HTTP状态码

但是和选择不一样的是,每次上传只能上传一张图片,所以每次返回的fileID是文件的访问路径是单一的对应图片访问路径

至此小程序的云开发图片上传就完成了


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序环境下将文件上传到 OSS发布时间:2022-07-18
下一篇:
微信小程序 - 传参的几种方式发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap