(十)微信小程序---上传图片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: , // 最多可以选择的图片张数
- sizeType: ['original', 'compressed'], // 选择图片的尺寸
- sourceType: ['album', 'camera'], // 选择图片的来源
- success: function(res) {
- that.setData({
- imageList:res.tempFilePaths
- })
- },
- })
- },
- })
示例二
如上 我们有原来的三张图 我们现在在选两张 是要添加进去 如何做?
先学习一下js的知识
1. 列表里添加 push
- v1=[,]
- >>> () [, ]
- v1.push()
- v1
- >>>() [, , ]
2. 合并列表 concat
- v1=[,2,3]
- >>>() [, 2, 3]
- v2=[,]
- >>>() [, ]
- v1.concat(v2)
- >>>() [, , , , ]
微信中添加照片
- Page({
- data: {
- imageList:[
- "/static/default.png",
- "/static/default.png",
- "/static/default.png",
- ]
- },
- uploadImage:function(){
- var that = this;
- wx.chooseImage({
- count: ,
- 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: ,
- 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('/')+);
- 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
- 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': ,
- '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)
然后你访问网址
我们只需要把上面的网址放在开始咯处的网址那即可
上传成功
(十)微信小程序---上传图片chooseImage的更多相关文章
- 微信小程序wx.chooseImage和wx.previewImage的综合使用(图片上传可以限制个数)
本例从微信小程序的组件扒下来的. WXML: <view class="weui-cell"> <view class="weui-cell__bd&q ...
- 微信小程序上传图片及本地测试
前端(.wxml) <view id="view1"> <view id="btns"> <image id="ima1 ...
- 微信小程序 上传图片并等比列压缩到指定大小
微信小程序官方API中 wx.chooseImage() 是可以进行图片压缩的,可惜的是不能压缩到指定大小. 实际开发中需求可能是压缩到指定大小: 原生js可以使用canvas来压缩,但由于微信小程 ...
- 微信小程序上传图片(附后端代码)
几乎每个程序都需要用到图片. 在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片 首先选择图片 通过wx.chooseImage(OB ...
- .NET开发微信小程序-上传图片到服务器
1.上传图片分为几种: a:上传图片到本地(永久保存) b:上传图片到本地(临时保存) c:上传图片到服务器 a和b在小程序的api文档里面有.直接说C:上传图片到服务器 前端代码: /* 上传图片到 ...
- 微信小程序上传图片,视频及预览
wxml <!-- 图片预览 --> <view class='preview-warp' wx:if="{{urls}}"> <image src= ...
- 微信小程序上传图片(前端+PHP后端)
一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择 ...
- 微信小程序上传图片更新图像
解决思路: 1. 调用wx.chooseImage 选择图片 2.wx.uploadFile 上传图片 3.调用后台接口进行修改操作 修改原来的头像 wx.chooseImage({ success: ...
- 微信小程序上传图片
话不多说,直接上码. <view class="section"> <!--放一张图片或按钮 点击时去选择图片--> <image class='ph ...
随机推荐
- techiediaries网站的Laravel 6系列教程
Laravel 6 Tutorial & New Features - Build a CRM [PART 1] Laravel 6 REST API CRUD Tutorial - Buil ...
- jdk动态代理和cglib动态代理底层实现原理详细解析(cglib动态代理篇)
代理模式是一种很常见的模式,本文主要分析cglib动态代理的过程 1. 举例 使用cglib代理需要引入两个包,maven的话包引入如下 <!-- https://mvnrepository.c ...
- 【PAT甲级】1063 Set Similarity (25 分)
题意: 输入一个正整数N表示集合的个数(<=50),接着输入N行,每行包括一个数字x代表集合的容量(<=10000),接着输入x个非负整数.输入一个正整数Q(<=2000),接着输入 ...
- 为typecho添加分类描述
typecho 默认主题不显示分类描述,可以调整为显示 按找官方文档(点击查看),获取分类描述的代码为: <?php echo $this->getDescription(); ?> ...
- Nginx安装部署!
安装Nginx方法一:利用u盘导入Nginx软件包 二nginx -t 用于检测配置文件语法 如下报错1:配置文件43行出现错误 [root@www ~]# nginx -tnginx: [emerg ...
- zip 多维
ll=zip([[1,3],[2,4]],[[88,99],[66,55]])a=zip(*ll)# print(list(a)) #[([1, 3], [2, 4]), ([88, 99], [66 ...
- 「JSOI2014」打兔子
「JSOI2014」打兔子 传送门 首先要特判 \(k \ge \lceil \frac{n}{2} \rceil\) 的情况,因为此时显然可以消灭所有的兔子,也就是再环上隔一个点打一枪. 但是我们又 ...
- lnmp1.5安装memcache
1.安装libevent 由于Memcache用到了libevent这个库用于Socket的处理,所以需要安装libevent. # wget http://www.monkey.org/~provo ...
- JavaScript - Array对象,数组
1. 创建数组 方式1. new关键字 var arr = new Array(1, 2, 3); 方式2. 使用字面量创建数组对象 var arr = [1, 2, 3]; 2. 检测一个对象是否是 ...
- DataTable和实体类之间的转换
using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.R ...