小程序OSS图片上传
图片上传加水印问题,代码如下!
chooseImage: function (e) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
console.log(res)
let tempFilePaths = res.tempFilePaths;
let imgFile = res.tempFiles;
for (let i = 0; i < tempFilePaths.length;i++){
let n = tempFilePaths[i].lastIndexOf('.');
let type = tempFilePaths[i].substring(n);
wx.request({
url: 'https://www.********.com/api/plat/system/oss/signature?dir=wechatApp', //获取oss签名
success: function (res) {
console.log('签名', res.data.data)
if (res.data.status == 'SUCCESS') {
let post = res.data.data;
let foot1 = 'x-oss-process=image/resize,w_1080,h_1920,m_fill/watermark,type_d3F5LXplbmhlaQ,size_38,text_'
const aliyunFileKey = post.dir + that.guid() + type;
let showUrl = null;
wx.uploadFile({
url: post.host, //上传到OSS
filePath: tempFilePaths[i],
name: 'file',
formData: {
'key': aliyunFileKey,
'OSSAccessKeyId': post.accessKeyId,
'policy': post.policy,
'signature': post.signature,
'success_action_status': '200'
},
success: function (res) {
console.log("阿里云", res.statusCode)
if (res.statusCode == 200){
wx.showToast({
title: '上传成功',
icon:'success',
duration:1200
})
if (that.data.encodeWord) {
showUrl = post.host + '/' + aliyunFileKey + '?' + foot1 + that.data.encodeWord + that.data.urlFoot1;
} else {
showUrl = post.host + '/' + aliyunFileKey
}
let s = [showUrl]
that.setData({
files: that.data.files.concat(s)
});
}else{
wx.showToast({
title: '上传失败!',
icon: 'none',
duration: 1200
})
}
}
})
}
}
})
}
}
})
wx.uploader中的name字段必须为file. 我这里是需要回显预览图片的时候需要图片有水印效果,才会去更改data中的files,这样也能做到批量上传的效果。
小程序OSS图片上传的更多相关文章
- 小程序实现图片上传,预览以及图片base64位处理
最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...
- 微信小程序中图片上传阿里云Oss
本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...
- nodeJs实现微信小程序的图片上传
今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回 首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图 ...
- 「小程序JAVA实战」小程序头像图片上传(中)(44)
转自:https://idig8.com/2018/09/09/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan43/ 用户可以上传了 ...
- [转]微信小程序实现图片上传功能
本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...
- 「小程序JAVA实战」小程序头像图片上传(下)(45)
转自:https://idig8.com/2018/09/09/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan44/ 接下来,我们应 ...
- 「小程序JAVA实战」小程序头像图片上传(上)(43)
转自:https://idig8.com/2018/09/08/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan40/ 在微信小程序中 ...
- 微信小程序实现图片上传功能
前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...
- 微信小程序--实现图片上传
前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...
随机推荐
- System.Net.Mail 邮件发送示例
前言:OA自动发送邮件的程序不好使,SQL Server 存储过程邮件发送程序好使,但是不利于标准化和维护,于是觉得是适合找些“轮子”武装一下.想起之前学习过System.Net.Mail ,于是再次 ...
- 如何对MySQL数据库中的数据进行实时同步
- EditText的setInputType方法里面应该填什么?
转自CSDN:http://blog.csdn.net/u014158743/article/details/52488010 | 以密码类型(password)为例 android:inputTyp ...
- 快速安装测试版Mysql
本文操作系统: CentOS 7.2.1511 x86_64MySQL 版本: 5.7.13 1.卸载系统自带的 mariadb-lib [root@centos-linux ~]# rpm -qa| ...
- phantomjs rendering
http://wwwy3y3.ghost.io/pageres-phantomjs-capture-sreenshot-chinese-fonts-not-render-correctly/ 在使用中 ...
- Redis的系统级命令
文章建立一个统一的认识就是Redis的版本是3.2.8 1:BGREWRITEAOF(bgrewriteaof) 执行一个 AOF文件 重写操作.重写会创建一个当前 AOF 文件的体积优化版本. 即使 ...
- Python零基础学习系列之四--Python程序设计思想
前面我们把Python环境安装成功,同时也选择了自己合适的IDE工具来开启自己的编程之旅. 那么今天来说说怎么编程,程序设计需要什么步骤,我们应该怎么做才能编写自己的程序. 1-1.程序设计方法: I ...
- M-PalindromeP-DP
Palindrome Partitioning 动态规划+深度优先搜索 https://leetcode.com/discuss/23480/c-solution-with-dp-and-dfs-12 ...
- redis持久化方法
1.redis持久化,来自官方说明 如何选择使用哪种持久化方式? 一般来说, 如果想达到足以媲美 PostgreSQL 的数据安全性, 你应该同时使用两种持久化功能. 如果你非常关心你的数据, 但仍然 ...
- 一个SAP开发人员的2018年终总结
我是SAP成都研究院的Jerry Wang,我喂自己袋盐. 时间过得真快,2017年发生的事情还历历在目,一转眼,2018年又马上要结束了. Jerry惊恐地发现,随着年龄的增长,时光流逝的速度仿佛有 ...