小程序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 ...
随机推荐
- 洛谷P1072 Hankson 的趣味题(数学)
题意 题目链接 Sol 充满套路的数学题.. 如果你学过莫比乌斯反演的话不难得到两个等式 \[gcd(\frac{x}{a_1}, \frac{a_0}{a_1}) = 1\] \[gcd(\frac ...
- MySQL库表详细操作
昨天我们初始了MySQL,今天我们先从库表方面详细说一下具体操作 一.库操作 1.创建数据库 1.1 语法 CREATE DATABASE 数据库名 charset utf8; 1.2 数据库命名规则 ...
- js中的this--执行上下文
条件:函数调用的时候 才有执行上下文 this 不同情况的调用,this也不同 1)当函数直接打点调用,此时的this 是window 2)事件触发函数,此时的this是触发这个事件的对象 3)当对 ...
- CentOS 7运维管理笔记(8)----Apache基于域名的虚拟主机配置
使用基于域名的虚拟主机配置是比较流行的方式,可以在同一个IP上配置多个域名并且都通过80端口访问. (1) 在网卡 eth0的第五个接口上配置 192.168.1.215 这个地址: (2) 配置/e ...
- Codeforces Round #413 B. T-shirt buying
B. T-shirt buying time limit per test 3 seconds memory limit per test 256 megabytes A new pack ...
- Qt 日志输出文件
在Qt开发过程当中经常使用qDebug等一些输出来调试程序,但是到了正式发布的时候,都会被注释或者删除,采用日志输出来代替. 做过项目的童鞋可能都使用过日志功能,以便有异常错误能够快速跟踪.定 ...
- linux 用户和组操作
linux用户操作 查看登陆用户:whoami (结果最简洁) 或者who mom likes 或者who am i查看所有用户:cat /etc/passwd 添加:sudo adduser lil ...
- glyphicons-halflings-regular.woff2 not found 前台错误修正
错误内容如下: 首先在 web.config 里面加上如下内容: <system.webServer> <staticContent> <remove fileExten ...
- 捕获Task.WhenALl返回的Task的Exception
如果有一个任务抛出异常,则Task.WhenAll 会出错,并把这个异常放在返回的Task 中.如果多个任务抛出异常,则这些异常都会放在返回的Task 中.但是,如果这个Task 在被await 调用 ...
- java excel转pdf 工具类
package com.elitel.hljhr.comm.web.main.controller; import java.io.File; import java.io.FileOutputStr ...