微信小程序上传图片到阿里云OSS

微信小程序代码

1.wxml:

<image src="{{userInfo.headImg}}" class="user-head_img" bindtap="uploadHeadImg"></image>

2.js:

uploadHeadImg: function () {const that = this;wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {that.uploadFile(res.tempFilePaths[0]);}})},uploadFile: function (filePath) {const folder = "user_headImg";let fileName = "";if (filePath) {fileName = folder + filePath.substr(filePath.lastIndexOf('.'), filePath.length);}const payload = { fileName, folder };//调用接口获取签名sysOss.sign(payload, (data) => {const key = data.path;const policy = data.policy;const signature = data.signature;const accessId = data.accessId;let formData = {};formData.key = key;formData.policy = policy;formData.signature = signature;formData.OSSAccessKeyId = accessId;wx.uploadFile({url: 'https://test.oss-cn-zhangjiakou.aliyuncs.com ', //这个地址必须在微信小程序后台》》开发》》开发工具》》服务器域名》》uploadFile合法域名上面添加上去filePath: filePath,name: 'file',formData,success(res) {const data = res.data//do something}})});}

wx.uploadFile官网介绍：UploadTask | 微信开放文档
wx.chooseImage官网介绍：wx.chooseImage(Object object) | 微信开放文档

获取阿里云OSS签名JAVA接口

package com.vg.controller.sys;import com.aliyun.oss.OSSClient;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import com.vg.data.enums.ProfileActive;
import com.vg.data.vo.Result;
import com.vg.data.vo.ResultCode;
import com.vg.parameter.AliYunParameter;
import com.vg.parameter.SysParameter;
import com.vg.util.VgStringUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;import java.io.UnsupportedEncodingException;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;@Slf4j
@RestController
@RequestMapping("sys/oss")
public class SysOssController
{/*** 获取阿里云OSS签名** @param fileName 文件名称* @param folder   文件夹* @return*/@GetMapping(value = "/sign")public Result<Map<String, String>> sign(@RequestParam String fileName, @RequestParam String folder){OSSClient client = new OSSClient(AliYunParameter.ossEndpoint, AliYunParameter.accessKeyId,AliYunParameter.accessKeySecret);String dir = "";if (VgStringUtil.isNoEmpty(folder)){String[] folders = folder.split("_");for (int i = 0; i < folders.length; i++){dir += folders[i] + "/";}}if (VgStringUtil.isEmpty(dir)){dir = "other/";}dir = extendFilePrefix(dir);long expireTime = 60;long currentTimeMillis = System.currentTimeMillis();long expireEndTime = currentTimeMillis + expireTime * 1000;Date expiration = new Date(expireEndTime);PolicyConditions policyConds = new PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);String postPolicy = client.generatePostPolicy(expiration, policyConds);byte[] binaryData = new byte[0];try{binaryData = postPolicy.getBytes("utf-8");}catch (UnsupportedEncodingException ex){return Result.error(ResultCode.NOT_FOUND);}String encodedPolicy = BinaryUtil.toBase64String(binaryData);String postSignature = client.calculatePostSignature(postPolicy);if (VgStringUtil.isEmpty(fileName)){return Result.error("文件名不能为空");}int lastIndex = fileName.lastIndexOf(".");String filePostfix = fileName.substring(lastIndex, fileName.length());Map<String, String> respMap = new LinkedHashMap<String, String>();//OSSAccessKeyIdrespMap.put("accessId", AliYunParameter.accessKeyId);respMap.put("policy", encodedPolicy);respMap.put("signature", postSignature);respMap.put("dir", dir);respMap.put("host", AliYunParameter.ossHost);respMap.put("path", dir + VgStringUtil.genShortUuid() + "_" + currentTimeMillis + filePostfix);respMap.put("expire", String.valueOf(expireEndTime / 1000));return Result.ok(respMap);}private String extendFilePrefix(String fileStr){//不同的环境上传到不同的目录ProfileActive profileActive = SysParameter.profileActive;//生产环境if (profileActive.isProd()){fileStr = profileActive.type() + "/" + fileStr;}//测试环境else if (profileActive.isTest()){fileStr = profileActive.type() + "/" + fileStr;}//开发环境else if (profileActive.isDev()){fileStr = profileActive.type() + "/" + fileStr;}return fileStr;}
}

package com.vg.data.enums;import com.vg.util.VgStringUtil;public enum ProfileActive
{UNKNOWN("UNKNOWN", "未知"),DEV("dev", "开发"),TEST("test", "测试"),PROD("prod", "生产"),;String type;String desc;ProfileActive(String type, String desc){this.type = type;this.desc = desc;}public String type(){return type;}public static ProfileActive parseTo(String type){ProfileActive pt = ProfileActive.UNKNOWN;if (VgStringUtil.isEmpty(type)){return pt;}if (type.equals(ProfileActive.DEV.type)){pt = ProfileActive.DEV;}else if (type.equals(ProfileActive.TEST.type)){pt = ProfileActive.TEST;}else if (type.equals(ProfileActive.PROD.type)){pt = ProfileActive.PROD;}return pt;}public static String getDesc(String type){if (VgStringUtil.isEmpty(type)){return null;}for (ProfileActive mt : ProfileActive.values()){if (mt.type.equals(type)){return mt.desc;}}return null;}public boolean isProd(){return (this.type.equals(ProfileActive.PROD.type));}public boolean isTest(){return (this.type.equals(ProfileActive.TEST.type));}public boolean isDev(){return (this.type.equals(ProfileActive.DEV.type));}
}

需要引入阿里云maven包：

        <dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-ocr</artifactId><version>1.0.8</version></dependency><dependency><groupId>com.aliyun</groupId><artifactId>viapi-utils</artifactId><version>1.0.0</version></dependency><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-viapiutils</artifactId><version>1.0.0</version></dependency>

转载：码书网码书网，Ma Shu，一个专门面向计算机技术相关的软硬件人（俗称码农）与邀约注册软硬件专家（俗称码咖）之间的编程社交网站。https://www.mashuwang.com.cn/essay/detail/gPXQf0yZ.html?wsos=1

微信小程序上传图片到阿里云OSS相关推荐

微信小程序上传图片到阿里云oss方法
最近开发微信小程序要求上传图片到阿里云oss上,所以就顺手整理一下整个过程啦. 前提开通oss服务和创建oss存储空间啦(这个就自己去解决吧)下面接入正题: 步骤一:配置 Bucket 跨域客户端 ...
微信小程序录音直传阿里云OSS并语音识别
前言如题:做一个录音文字识别功能,知识点有三个,分别是微信小程序的录音功能.录音文件直传阿里云OSS.使用阿里云的录音文件识别接口返回识别后的文字一.微信小程序录音官方文档:微信小程序全局唯一的 ...
微信小程序上传阿里云OSS，返回204,400,403,405,解决方案
目录微信小程序上传阿里云 ==OSSAccessKeyId,policy,signature==如何获取呢? 配置Bucket跨域访问配置外网域名到小程序的域名白名单上传报错(返回400,403 ...
微信小程序/vue通过阿里云上传图片
1.首先前端放入获取上传的组件微信小程序uview组件: https://www.uviewui.com/components/upload.html vue所使用的element组件: https ...
微信小程序上传阿里云视频文件流程及代码
为了微信小程序客服端实现自拍视频能够分享给多个好友,我们需要把小程序自拍的视频存储到服务器,而阿里云在性能和速度上比较不错,所以我们选择了阿里云作服务器. 第一步.微信小程序项目创建 1. 到http ...
Javaweb和微信小程序项目部署阿里云服务器总结(上)
谈到微信小程序的java后台怎么部署在阿里云服务器上的问题,弯弯绕绕,好多坑,网上的博客资料也特别乱,博主也是在没有任何经验和指导下花了几天的工夫才完成的.这里为了方便大家不踩坑,总结了下整个流程和注 ...
微信小程序MQTT模拟器阿里云物联网平台测试
陈拓 chentuo@ms.xab.ac.cn 2019.09.27/2020.01.20 原文参考:微信小程序-MQTT模拟器 https://www.yuque.com/cloud-dev/iot ...
uniapp(微信小程序)上传图片到阿里oss
首先推荐下参考的文章 1.https://www.jianshu.com/p/34d6dcbdc2e5 2.https://help.aliyun.com/document_detail/92883. ...
小程序中使用阿里云oss上传视频怎么获得视频截图?
在视频地址后面加上如下的后缀,就可以获取视频内部帧图片,当作封面使用. ?x-oss-process=video/snapshot,t_1000,m_fast ?x-oss-process=video ...

微信小程序上传图片到阿里云OSS

微信小程序代码

获取阿里云OSS签名JAVA接口

微信小程序上传图片到阿里云OSS相关推荐

最新文章

热门文章