示例一
wxml
请上传图片
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)
})
},
})
},
})
上传到服务器
1. 创建存储桶
2. 小程序上传的文档
下载好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 = newCOS({
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);
});
}
},
})
上面我们说的是官方不推荐使用的一种方法，现在说一种推荐使用的方式
开始咯
官网代码获取临时秘钥
var cos = newCOS({//必选参数
getAuthorization: function (options, callback) {//服务端 JS 和 PHP 示例：/tencentyun/cos-js-sdk-v5/blob/master/server/
//服务端其他语言参考 COS STS SDK ：/tencentyun/qcloud-cos-sts-sdk ① 点击
//STS 详细文档指引看：/document/product/436/14048
wx.request({
url:'/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
fromdjango.conf.urls import urlfromapp01 import views
urlpatterns=[
# 获取秘钥
url(r'^credential/', views.CredentialView.as_view()),
]classCredentialView(APIView):
defget(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': '*',
# 密钥的权限列表。简单上传和分片需要以下的权限，其他权限列表请看/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 与 上传到服务器...
