zoukankan      html  css  js  c++  java
  • 小程序上传图片到腾讯云

     场景:因为业务需要采用的是前端自己生成签名来上传图片(私认为,还是采用官方的方式上传图片最佳)

    1、config.js 配置 (这个文件用来装自己的存储桶,地域,密钥信息即可)

    var config = {
          Bucket:'存储桶的名字',
          Region:'地域名字',
          SecretId:'密钥id值',
          SecretKey:'密钥key值'
    }
    module.exports = config

    2、实现上传功能( 这里的代码是哪个地方需要上传图片,就写到哪个界面中即可 )

    var COS = require('../../utils/cos-wx-sdk-v5');// 这个是cos上传的sdk
    var config = require('../../utils/config');//这两个文件我是放在utils里面的 , 这个config文件 就是步骤一中的内容
    var cos = new COS({
          getAuthorization:function(params,callback){
              var authorization = COS.getAuthorization({
                    SecretId:config.SecretId,
                    SecretKey:config.SecretKey,
                    Method:params.Method,
                    Key:params,Key
              });
              callback(authorization);
          }
    })
    page({
    //上传用户头像
    uploadHeadImage:function(){
    let that = this;
    wx.chooseImage({
    count:1,
    sizeType:['original','compressed'],
    sourceType:['album','camera'],
    success:function(res){
    var filePath = res.tempFilePaths[0];//获取文件路径
    var Key = filePath.substr(filePath.lastIndexOf('/')+1);//这里指定上传的文件名
    var dateObj = new Date();
    var timestamp = dataObj.getTime();
    var nowDate = dateObj.toLocaleDateString();
    var formatDate = nowDate.replace(///g,'-');//格式斜杠日期
    var newKey = formatDate +'/'+timestamp+Key;//cos上定义目录
    var tempObj = {};
    tempObj.imgLocation = 'https://' + config.Bucket +'.cos.' + config.Region + '.myqcloud.com/'+newKey;//返回上传的绝对 URL
    //SDK 提供的cos上传函数,如果想批量上传,可以在这里加上for循环。
    cos.postObject({
    Bucket:config.Bucket,//存储桶名称
    Region:config.Region,//地域名字
    Key:newKey,
    FilePath:filePath,//本地文件临时地址
    },function(err,data){
    if(err){
    wx.showModal({
    title:'返回错误',
    content:'请求失败'+err,
    showCancel:false
    })
    }else{
    if(data){
    //data.headers.Location 这里是返回的图片URL,这里可以为界面中需要显示的图片src赋值
    that.setData({
    headImage:data.headers.Location
    })
    }
    }
    })
    }
    })
    }
    })

     3、重点来了

    //上面的代码可以使用了,但是,但是,但是,小程序的域名配置一定不要忘记 配置请求cos这个接口的域名。
    //比如说: 我们的存储桶名字是 upload-headimg-123456
    //那么小程序的域名配置就是这样子的 https://upload-headimg-123456.cos.ap.chengdu.myqcloud.com/ (因为是地域是成都的,所以是 ap-chengdu )
    //还有就是,如果上传的存储桶有多个,那么,小程序的域名配置就要配置多个。
    //所以,这就是劣势。
    //如果想要前端来上传图片到腾讯云,密钥放在前端,后端不做任何参与的话,这是最快的方式。但这也是最值得不推荐的方式!!!

    4、忘记了一点(就是关于小程序上传图片,讲道理的话 wx.chooseImage({}) 应该和 wx.uploadFile({}) 一起使用的呢,代码如下) 

    //比如点击图片触发 wx.chooseImage({})
    wx.chooseImage({
    count:1,
    sizeType:['original','compressed'],
    sourceType:['album','camera'],
    success:function(res){
    let tempFilePath = res.tempFiilePaths[0];//比如说这里获取到了上传文件的临时地址
    //讲道理的话,如果想要把图片上传到自己服务器哈
    wx.uploadFile({
    url:'自己服务器的图片上传地址',
    filePath:tempFilePath,//文件的临时地址
    name:'uploadFile',
    success:function(res){
    //上传成功后,自己服务器地址会返回一个图片值,然后就可以操作了耶,do something。
    }
    })
    }
    })

    参考链接: https://my.oschina.net/u/2456768/blog/1811775

    参考链接: https://blog.csdn.net/weixin_34043301/article/details/88993437

    参考链接:https://github.com/tencentyun/cos-wx-sdk-v5/tree/master/demo/lib (获取 cos-wx-sdk-v5.js 还有demo喔)

    官网小程序直传实践demo链接:  https://cloud.tencent.com/document/product/436/34929  (强烈安利这种上传图片的方式耶)

  • 相关阅读:
    拯救公主
    爱情之路
    无聊的会议
    对拍检验程序
    TCP三次握手
    OA系统走过的的坑之部门岗位管理
    蓝屏警告
    三级联动
    Ajax二级联动
    近期疑惑和总结
  • 原文地址:https://www.cnblogs.com/sunnyeve/p/12519106.html
Copyright © 2011-2022 走看看