美文网首页微信小程序开发
「小程序」上传图片到七牛云

「小程序」上传图片到七牛云

作者: 夏知更 | 来源:发表于2019-01-21 19:21 被阅读43次
准备

图片上传到七牛云,需要两个准备条件:

  • 在七牛云上有上传空间,可获取相应的token(这里是后台接口完成的,前端也可以完成,需要自己申请上报空间);
  • 在小程序相应的域名配置中把七牛云的域名配置上去(一开始用错了,根据请求返回修改好了,小程序的域名配置一个月只能改五次);
图片上传

小程序上传图片只有两个关键API:
wx.chooseImage
wx.uploadFile

在wx.chooseImage调用成功时,可以获取到关于图片的文件信息,再上传七牛云

/**
* 图片改变事件
*/
bindImgChange() {
    wx.chooseImage({
        count: 1, // 最多可以选择的图片张数
            success: res => {
                //上传七牛云
                let tempFilePaths = res.tempFilePaths;
                this.uploadQiniu(tempFilePaths);
            }
  });
},

上传七牛云代码:

/**
* 图片上传七牛云
*/
uploadQiniu(tempFilePaths) {
    let token = this.data.token;
    var that = this;
    wx.uploadFile({
      url: 'https://upload-z2.qiniup.com',
      name: 'file',
      filePath: tempFilePaths[0],
      header: {
        "Content-Type": "multipart/form-data"
      },
     formData: {
       token: token,
     },
     success: function(res) {
       let data = JSON.parse(res.data)

       console.log('qiniu');
       console.log(res);
       // to do ...
     },
     fail: function(res) {
       console.log(res)
     }
   });
},
失败详情

修改url为:'https://upload-z0.qiniup.com'

成功

相关文章

  • 小程序上传图片到七牛

    小程序上传图片到七牛云存储,服务端使用nodejs的thinkjs框架 服务端 小程序端 上传图片 效果如下: 本...

  • 「小程序」上传图片到七牛云

    准备 图片上传到七牛云,需要两个准备条件: 在七牛云上有上传空间,可获取相应的token(这里是后台接口完成的,前...

  • 七牛云上传图片

    1请求后端接口获取上传凭证2请求七牛云地址上传图片到七牛云3上传完毕将获得七牛云返回的图片地址http://www...

  • 七牛云图片上传

    七牛云图片上传 可查看七牛云上传图片的SDK

  • 小程序上传图片到七牛云

    又又又有新需求了,这次又有上传七牛云的需求了,从H5换成了小程序,又探了一次坑。 思路一致 1. 首先,获取Tok...

  • ThinkPHP6上传图片七牛云 如何上传文件到七牛云对象储存c

    ThinkPHP6如何上传图片七牛云,如何上传文件到七牛云对象储存cos,总所周知图片是特别消耗网站带宽的,个人网...

  • 20.前端上传图片到七牛云

    前端上传图片到七牛云 首先,引入qiniu.js; 定义一个div元素,结构看代码 然后,上传七牛云 完整代码

  • 上传图片到七牛云

    由于公司后台还没有提供上传图片功能,但app前期试点运营需要app上传图片功能,所以就想到了把图片上传到七牛云。首...

  • 前端如何上传图片到七牛云

    前端如何上传图片到七牛云 流程: 生成token => token和图片作为new FromData() 参数 再...

  • 107 七牛云存储

    上传图片到七牛云存储 步骤1:maven配置,增加七牛的sdk 步骤2:运行七牛的官方Demo 其他 Idea设置...

网友评论

    本文标题:「小程序」上传图片到七牛云

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