小程序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 ...
随机推荐
- 洛谷P2196 挖地雷(dp)
题意 题目链接 Sol 早年NOIP的题锅好多啊.. 这题连有向边还是无向边都没说(害的我wa了一遍) 直接\(f[i]\)表示到第\(i\)个点的贡献 转移的时候枚举从哪个点转移而来 然后我就用一个 ...
- <Android 应用 之路> 百度地图API使用(3)
前言 上一篇讲解并实践了百度地图基本显示,地图类型,实时交通图,热力图,地图控制和手势控制,今天看下在地图上添加view和覆盖物. 地图Logo不允许遮挡,可通过mBaiduMap.setPaddin ...
- KMP算法的一个简单实现
今天学习KMP算法,参考网上内容,实现算法,摘录网页内容并记录自己的实现如下: 原文出处: http://www.ruanyifeng.com/blog/2013/05/Knuth%E2%80%93M ...
- 浅谈回归(二)——Regression 之历史错误翻译
我很好奇这个问题,于是搜了一下.我发现 Regression 这个词 本意里有"衰退"的意思. 词根词缀: re- 回 , 向后 + -gress- 步 , 级 + -ion 名词 ...
- django模板报错:Requested setting TEMPLATE_DEBUG, but settings are not configured. You must either define
转自:http://blog.csdn.net/xiaowanggedege/article/details/8651236 django模板报错: Requested setting TEMPLAT ...
- Kettle数据抽取解决方案
一. Kettle介绍 1. Kettle简介 ETL即数据抽取(Extract).转换(Transform).装载(Load)的过程.Kettle的中文翻译为水壶.Kettle以元数据驱动的方式提供 ...
- 绘制播放音乐时的音波图形的View
绘制播放音乐时的音波图形的View 这个效果类似于这个哦: 效果如下: 源码: MusicView.h 与 MusicView.m // // MusicView.h // Music // // C ...
- gdb可视化工具gdbgui
gdbgui是一款很强大的gdb可视化工具,基于浏览器调试很方便.后台是python写的,目前使用起来还有些bug,不过已经很满足了. 官网 https://gdbgui.com Github htt ...
- python 生成器&迭代器
列表生成式 要生成[1x1, 2x2, 3x3, ..., 10x10]>>> [x * x for x in range(1, 11)]for循环后面还可以加上if判断>&g ...
- Spark Executor内幕彻底解密:Executor工作原理图、ExecutorBackend注册源码解密、Executor实例化内幕、Executor具体工作内幕
本课主题 Spark Executor 工作原理图 ExecutorBackend 注册源码鉴赏和 Executor 实例化内幕 Executor 具体是如何工作的 Spark Executor 工作 ...