官方文档

示例一

  • wxml
  1. <view bindtap="uploadImage">请上传图片</view>
  2.  
  3. <image wx:for="{{imageList}}" src="{{item}}"></image>
  • js
  1. Page({
  2.  
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. imageList:[
  8. "/static/default.png",
  9. "/static/default.png",
  10. "/static/default.png",
  11. ]
  12. },
  13. uploadImage:function(){
  14. var that = this;
  15. wx.chooseImage({
  16. count: ,                   // 最多可以选择的图片张数  
  17. sizeType: ['original', 'compressed'], // 选择图片的尺寸
  18. sourceType: ['album', 'camera'], // 选择图片的来源
  19. success: function(res) {
  20. that.setData({
  21. imageList:res.tempFilePaths
  22. })
  23. },
  24. })
  25. },
  26. })

示例二

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

先学习一下js的知识

1. 列表里添加  push

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

2. 合并列表 concat

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

微信中添加照片

  1. Page({
  2. data: {
  3. imageList:[
  4. "/static/default.png",
  5. "/static/default.png",
  6. "/static/default.png",
  7. ]
  8. },
  9. uploadImage:function(){
  10. var that = this;
  11. wx.chooseImage({
  12. count: ,
  13. sizeType: ['original', 'compressed'],
  14. sourceType: ['album', 'camera'],
  15. success: function(res) {
  16. that.setData({
  17. imageList:that.data.imageList.concat(res.tempFilePaths)
  18. })
  19. },
  20. })
  21. },
  22. })

上传到服务器

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

1. 创建存储桶

2. 小程序上传的文档

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

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

3. 开始使用

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

官方文档给了四种方式

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

好了 我们的代码

  1. var COS = require('./../../utils/cos-wx-sdk-v5.js')
  2. Page({
  3. data: {
  4. imageList: []
  5. },
    上传文件的代码
  6. uploadImage:function(){
  7. var that = this;
  8. wx.chooseImage({
  9. count: ,
  10. sizeType: ['original', 'compressed'],
  11. sourceType: ['album', 'camera'],
  12. success: function (res) {
  13. that.setData({
  14. imageList: that.data.imageList.concat(res.tempFilePaths)
  15. })
  16. },
  17. })
  18. },
    发布的代码
  19. uploadImageFile:function(){
  20. var cos = new COS({
  21. SecretId: '******',
  22. SecretKey: '*****',
  23. });
  24. for(var index in this.data.imageList){
       循环得到图片地址
  25. var filePath = this.data.imageList[index]
  26.    自己做文件的名字
  27. var filename = filePath.substr(filePath.lastIndexOf('/')+);
  28.  
  29. cos.postObject({
         // 桶的名字
  30. Bucket: 'upload-******',
  31. Region: 'ap-chengdu',
  32. Key: filename,
  33. FilePath: filePath,
  34.  
  35. onProgress: function (info) {
  36. // 上传可以写进度条
  37. console.log(JSON.stringify(info));
  38. }
  39. }, function (err, data) {
  40. console.log(err || data);
  41. });
  42. }
  43.  
  44. },
    })

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

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

开始咯

  1. 官网代码获取临时秘钥
    var cos = new COS({
  2. // 必选参数
  3. getAuthorization: function (options, callback) {
  4. // 服务端 JS 和 PHP 示例:https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
  5. // 服务端其他语言参考 COS STS SDK :https://github.com/tencentyun/qcloud-cos-sts-sdk ① 点击
  6. // STS 详细文档指引看:https://cloud.tencent.com/document/product/436/14048
  7. wx.request({
  8. url: 'https://example.com/server/sts.php',
  9. data: {
  10. // 可从 options 取需要的参数
  11. },
  12. success: function (result) {
  13. var data = result.data;
  14. var credentials = data.credentials;
  15. callback({
  16. TmpSecretId: credentials.tmpSecretId,
  17. TmpSecretKey: credentials.tmpSecretKey,
  18. XCosSecurityToken: credentials.sessionToken,
  19. ExpiredTime: data.expiredTime,
  20. });
  21. }
  22. });
  23. }
  24. });
  25.  
  26. 注释:
  1. 点击:点击上面的网址找到python相关 按文档操作【安装 拷贝源码】
  1. pip install -U qcloud-python-sts
  1. 拷贝源码https://github.com/tencentyun/qcloud-cos-sts-sdk/blob/master/python/demo/sts_demo.py
  1. from django.conf.urls import url
  2. from app01 import views
  3. urlpatterns = [
  4. # 获取秘钥
  5. url(r'^credential/', views.CredentialView.as_view()),
  6. ]
  7.  
  8. class CredentialView(APIView):
  9. def get(self, request, *agrs, **kwargs):
  10. config = {
  11. # 临时密钥有效时长,单位是秒
  12. 'duration_seconds': ,
  13. 'secret_id': '***********',
  14. # 固定密钥
  15. 'secret_key': '***********',
  16. # 设置网络代理
  17. # 'proxy': {
  18. # 'http': 'xx',
  19. # 'https': 'xx'
  20. # },
  21. # 换成你的 bucket
  22. 'bucket': 'upload-*********',
  23. # 换成 bucket 所在地区
  24. 'region': 'ap-chengdu',
  25. # 这里改成允许的路径前缀,可以根据自己网站的用户登录态判断允许上传的具体路径
  26. # 例子: a.jpg 或者 a/* 或者 * (使用通配符*存在重大安全风险, 请谨慎评估使用)
  27. 'allow_prefix': '*',
  28. # 密钥的权限列表。简单上传和分片需要以下的权限,其他权限列表请看 https://cloud.tencent.com/document/product/436/31923
  29. 'allow_actions': [
  30. # 简单上传
  31. # 'name/cos:PutObject',
  32. 'name/cos:PostObject',
  33. # 分片上传
  34. # 'name/cos:InitiateMultipartUpload',
  35. # 'name/cos:ListMultipartUploads',
  36. # 'name/cos:ListParts',
  37. # 'name/cos:UploadPart',
  38. # 'name/cos:CompleteMultipartUpload'
  39. ],
  40.  
  41. }
  42.  
  43. try:
  44. sts = Sts(config)
  45. response = sts.get_credential()
  46. print('get data : ' + json.dumps(dict(response), indent=4))
  47. except Exception as e:
  48. print(e)
  49.  
  50. return Response(response)

然后你访问网址

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

上传成功

  1.  
  1.  

(十)微信小程序---上传图片chooseImage的更多相关文章

  1. 微信小程序wx.chooseImage和wx.previewImage的综合使用(图片上传可以限制个数)

    本例从微信小程序的组件扒下来的. WXML: <view class="weui-cell"> <view class="weui-cell__bd&q ...

  2. 微信小程序上传图片及本地测试

    前端(.wxml) <view id="view1"> <view id="btns"> <image id="ima1 ...

  3. 微信小程序 上传图片并等比列压缩到指定大小

    微信小程序官方API中  wx.chooseImage() 是可以进行图片压缩的,可惜的是不能压缩到指定大小. 实际开发中需求可能是压缩到指定大小: 原生js可以使用canvas来压缩,但由于微信小程 ...

  4. 微信小程序上传图片(附后端代码)

    几乎每个程序都需要用到图片. 在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片 首先选择图片 通过wx.chooseImage(OB ...

  5. .NET开发微信小程序-上传图片到服务器

    1.上传图片分为几种: a:上传图片到本地(永久保存) b:上传图片到本地(临时保存) c:上传图片到服务器 a和b在小程序的api文档里面有.直接说C:上传图片到服务器 前端代码: /* 上传图片到 ...

  6. 微信小程序上传图片,视频及预览

    wxml <!-- 图片预览 --> <view class='preview-warp' wx:if="{{urls}}"> <image src= ...

  7. 微信小程序上传图片(前端+PHP后端)

    一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择 ...

  8. 微信小程序上传图片更新图像

    解决思路: 1. 调用wx.chooseImage 选择图片 2.wx.uploadFile 上传图片 3.调用后台接口进行修改操作 修改原来的头像 wx.chooseImage({ success: ...

  9. 微信小程序上传图片

    话不多说,直接上码. <view class="section"> <!--放一张图片或按钮 点击时去选择图片--> <image class='ph ...

随机推荐

  1. techiediaries网站的Laravel 6系列教程

    Laravel 6 Tutorial & New Features - Build a CRM [PART 1] Laravel 6 REST API CRUD Tutorial - Buil ...

  2. jdk动态代理和cglib动态代理底层实现原理详细解析(cglib动态代理篇)

    代理模式是一种很常见的模式,本文主要分析cglib动态代理的过程 1. 举例 使用cglib代理需要引入两个包,maven的话包引入如下 <!-- https://mvnrepository.c ...

  3. 【PAT甲级】1063 Set Similarity (25 分)

    题意: 输入一个正整数N表示集合的个数(<=50),接着输入N行,每行包括一个数字x代表集合的容量(<=10000),接着输入x个非负整数.输入一个正整数Q(<=2000),接着输入 ...

  4. 为typecho添加分类描述

    typecho 默认主题不显示分类描述,可以调整为显示 按找官方文档(点击查看),获取分类描述的代码为: <?php echo $this->getDescription(); ?> ...

  5. Nginx安装部署!

    安装Nginx方法一:利用u盘导入Nginx软件包 二nginx -t 用于检测配置文件语法 如下报错1:配置文件43行出现错误 [root@www ~]# nginx -tnginx: [emerg ...

  6. zip 多维

    ll=zip([[1,3],[2,4]],[[88,99],[66,55]])a=zip(*ll)# print(list(a)) #[([1, 3], [2, 4]), ([88, 99], [66 ...

  7. 「JSOI2014」打兔子

    「JSOI2014」打兔子 传送门 首先要特判 \(k \ge \lceil \frac{n}{2} \rceil\) 的情况,因为此时显然可以消灭所有的兔子,也就是再环上隔一个点打一枪. 但是我们又 ...

  8. lnmp1.5安装memcache

    1.安装libevent 由于Memcache用到了libevent这个库用于Socket的处理,所以需要安装libevent. # wget http://www.monkey.org/~provo ...

  9. JavaScript - Array对象,数组

    1. 创建数组 方式1. new关键字 var arr = new Array(1, 2, 3); 方式2. 使用字面量创建数组对象 var arr = [1, 2, 3]; 2. 检测一个对象是否是 ...

  10. DataTable和实体类之间的转换

    using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.R ...