图片上传加水印问题,代码如下!

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图片上传的更多相关文章

  1. 小程序实现图片上传,预览以及图片base64位处理

    最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...

  2. 微信小程序中图片上传阿里云Oss

    本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...

  3. nodeJs实现微信小程序的图片上传

    今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回 首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图 ...

  4. 「小程序JAVA实战」小程序头像图片上传(中)(44)

    转自:https://idig8.com/2018/09/09/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan43/ 用户可以上传了 ...

  5. [转]微信小程序实现图片上传功能

    本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...

  6. 「小程序JAVA实战」小程序头像图片上传(下)(45)

    转自:https://idig8.com/2018/09/09/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan44/ 接下来,我们应 ...

  7. 「小程序JAVA实战」小程序头像图片上传(上)(43)

    转自:https://idig8.com/2018/09/08/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan40/ 在微信小程序中 ...

  8. 微信小程序实现图片上传功能

    前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...

  9. 微信小程序--实现图片上传

    前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...

随机推荐

  1. 多盟、Testin云测、K9test,助阵阿里云1218 移动开发者狂欢

    经过双十一.双十二全民剁手狂欢后,阿里巴巴旗下的云计算业务,也为IT程序员们打造一场独特的盛宴. 阿里云计算12月18日对旗下主力云计算产品进行打折促销,云服务商.风投机构等都将参与到这场狂欢中.“我 ...

  2. Hadoop自定义JobTracker和NameNode管理页面

    为了可以方便地在hadoop的管理界面(namenode和jobtracker)中自定义展示项,使用代理servlet的方式实现了hadoop的管理界面. 首先, 在org.apache.hadoop ...

  3. named 快速部署及主机记录普及

    实验环境centos7.2,仅供参考 yum -y install epel-release    --安装最新yum配置源 cd /etc/yum.repos.d/ # wget http://re ...

  4. C#清空回收站

    曾经用过bat处理回收站,但是效果很不理想(应该是我水平不够吧),后来发现C#可以直接调用系统dll,非常简单.下面是具体函数: class ClearRecycle { [DllImport(&qu ...

  5. Oracle案例03——RMAN-06091: no channel allocated for maintenance (of an appropriate type)

    同事收到告警磁盘空间不足,说删除归档无法直接在rman中进行操作,让帮看下,具体处理方法如下: 一.错误信息 在rman执行命令 crosscheck archivelog all; delete n ...

  6. yii2框架安装运行init.bat报错php.exe不是内部或外部命令

    在安装yii2框架的时候,遇到一个很纠结的问题.就是当我把安装包下载下来之后,在公司的电脑安装可以正常,当我回家用自己的电脑安装就报错,提示 php.exe 不是内部或外部命令,也不是可运行的程序.这 ...

  7. vsphere的P2V工具做的物理机迁移到虚拟机报错out of memory

     vsphere的P2V工具做的物理机迁移到虚拟机  迁移成功,但是启动报错  进入rescue模式后发现是sysctl.conf文件的参数设大了因为虚拟机的内存没有物理机内存大 kernel.shm ...

  8. Java内存使用情况查看工具

    Java通过jvm自己管理内存,同时Java提供了一些命令行工具,用于查看内存使用情况.这里主要介绍一下jstat.jmap命令以及相关工具. 一.jstat查看 gc实时执行情况 jstat命令命令 ...

  9. 迷宫问题求解——C++

    迷宫问题思路 根据昨天的博客,有如下几种解决方案 克鲁斯卡尔 ,为避免死循环,需要设定优化路径的次数. Prim,为避免死循环,需要设定优化路径的次数,暂定200次. BFS , 实现简单,无死循环. ...

  10. hdu 6216 A Cubic number and A Cubic Number【数学题】

    hdu 6216 A Cubic number and A Cubic Number[数学] 题意:判断一个素数是否是两个立方数之差,就是验差分.. 题解:只有相邻两立方数之差才可能,,因为x^3-y ...