oss图片上传api_小程序OSS图片上传

这篇博客介绍了如何在小程序中使用OSS图片上传API,并在上传过程中添加水印。通过wx.chooseImage选择图片,然后调用OSS签名API获取上传凭证,将图片上传到阿里云OSS,并设置参数实现图片加水印。成功上传后,更新小程序中的图片预览数据。
摘要由CSDN通过智能技术生成

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

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,这样也能做到批量上传的效果。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值