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

时间：2024-02-24 22:19:35

官方文档

 

 

 

 

 

    

 

示例一

  • 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)

然后你访问网址

 

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

 

 

 

 上传成功

 

 





 

相关文章