（十）微信小程序---上传图片chooseImage 与 上传到服务器

官方文档

 

 

    

示例一

• wxml

<view bindtap="uploadImage">请上传图片</view>

<image wx:for="{{imageList}}" src="{{item}}"></image>

• js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageList:[
      "/static/default.png",
      "/static/default.png",
      "/static/default.png",
    ]
  },
  uploadImage:function(){
    var that = this;
    wx.chooseImage({
      count: 9,　　　　　　　　　　　　　　　　　　    // 最多可以选择的图片张数　　
      sizeType: ['original', 'compressed'],      // 选择图片的尺寸
      sourceType: ['album', 'camera'],           // 选择图片的来源
      success: function(res) {
        that.setData({
          imageList:res.tempFilePaths
        })
      },
    })
  },
})

 示例二

如上 我们有原来的三张图 我们现在在选两张 是要添加进去 如何做？

先学习一下js的知识

1. 列表里添加  push

v1=[1,2]
>>> (2) [1, 2]
v1.push(3)
v1
>>>(3) [1, 2, 3]

2. 合并列表 concat

v1=[1,2,3]
>>>(2) [1, 2, 3]

v2=[5,6]
>>>(2) [5, 6]

v1.concat(v2)
>>>(5) [1, 2, 3, 5, 6]

微信中添加照片

Page({
  data: {
    imageList:[
      "/static/default.png",
      "/static/default.png",
      "/static/default.png",
    ]
  },
  uploadImage:function(){
    var that = this;
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {
        that.setData({
          imageList:that.data.imageList.concat(res.tempFilePaths)
        })
      },
    })
  },
})

 上传到服务器

 我们的例子是 腾讯云的存储  https://console.cloud.tencent.com/cos5

 1. 创建存储桶

 

2. 小程序上传的文档

https://cloud.tencent.com/document/product/436/31953

 下载好js代码 我们就可以直接用了

3. 开始使用

4.配置项--- 也就是上传配置 

官方文档给了四种方式

我们先使用第四种---不推荐

 

 好了 我们的代码

var COS = require('./../../utils/cos-wx-sdk-v5.js')
Page({
  data: {
    imageList: []
  },
上传文件的代码
  uploadImage:function(){
    var that = this;
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        that.setData({
          imageList: that.data.imageList.concat(res.tempFilePaths)
        })
      },
    })
  },
发布的代码
  uploadImageFile:function(){
    var cos = new COS({
      SecretId: '******',
      SecretKey: '*****',
    });
    for(var index in this.data.imageList){
　　　循环得到图片地址
      var filePath = this.data.imageList[index]
　　　自己做文件的名字
      var filename = filePath.substr(filePath.lastIndexOf('/')+1);

      cos.postObject({
　　　　　// 桶的名字
        Bucket: 'upload-******',
        Region: 'ap-chengdu',
        Key: filename,
        FilePath: filePath,

        onProgress: function (info) {
          // 上传可以写进度条
          console.log(JSON.stringify(info));
        }
      }, function (err, data) {
        console.log(err || data);
      });
    }
   
  },
})

 上面我们说的是官方不推荐使用的一种方法，现在说一种推荐使用的方式

 

https://cloud.tencent.com/document/product/436/14048

开始咯

官网代码获取临时秘钥
var cos = new COS({
    // 必选参数
    getAuthorization: function (options, callback) {
        // 服务端 JS 和 PHP 示例：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
        // 服务端其他语言参考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk              ① 点击
        // STS 详细文档指引看：https://cloud.tencent.com/document/product/436/14048
        wx.request({
            url: 'https://example.com/server/sts.php',
            data: {
                // 可从 options 取需要的参数
            },
            success: function (result) {
                var data = result.data;
                var credentials = data.credentials;
                callback({
                    TmpSecretId: credentials.tmpSecretId,
                    TmpSecretKey: credentials.tmpSecretKey,
                    XCosSecurityToken: credentials.sessionToken,
                    ExpiredTime: data.expiredTime,
                });
            }
        });
    }
});

注释：

① 点击：点击上面的网址找到python相关 按文档操作【安装 拷贝源码】 

pip install -U qcloud-python-sts

拷贝源码https://github.com/tencentyun/qcloud-cos-sts-sdk/blob/master/python/demo/sts_demo.py

from django.conf.urls import url
from app01 import views
urlpatterns = [
    # 获取秘钥
    url(r'^credential/', views.CredentialView.as_view()),
]


class CredentialView(APIView):
    def get(self, request, *agrs, **kwargs):
        config = {
            # 临时密钥有效时长，单位是秒
            'duration_seconds': 1800,
            'secret_id': '***********',
            # 固定密钥
            'secret_key': '***********',
            # 设置网络代理
            # 'proxy': {
            #     'http': 'xx',
            #     'https': 'xx'
            # },
            # 换成你的 bucket
            'bucket': 'upload-*********',
            # 换成 bucket 所在地区
            'region': 'ap-chengdu',
            # 这里改成允许的路径前缀，可以根据自己网站的用户登录态判断允许上传的具体路径
            # 例子： a.jpg 或者 a/* 或者 * (使用通配符*存在重大安全风险, 请谨慎评估使用)
            'allow_prefix': '*',
            # 密钥的权限列表。简单上传和分片需要以下的权限，其他权限列表请看 https://cloud.tencent.com/document/product/436/31923
            'allow_actions': [
                # 简单上传
                # 'name/cos:PutObject',
                'name/cos:PostObject',
                # 分片上传
                # 'name/cos:InitiateMultipartUpload',
                # 'name/cos:ListMultipartUploads',
                # 'name/cos:ListParts',
                # 'name/cos:UploadPart',
                # 'name/cos:CompleteMultipartUpload'
            ],

        }

        try:
            sts = Sts(config)
            response = sts.get_credential()
            print('get data : ' + json.dumps(dict(response), indent=4))
        except Exception as e:
            print(e)

        return Response(response)

然后你访问网址

 我们只需要把上面的网址放在开始咯处的网址那即可

 

 上传成功