微信小程序/vue通过阿里云上传图片

1.首先前端放入获取上传的组件
微信小程序uview组件：
https://www.uviewui.com/components/upload.html

vue所使用的element组件：
https://element.eleme.cn/#/zh-CN/component/upload

上面一个是微信小程序的上传，一个是普通浏览器的前端上传组件的代码出处。

后端我们需要一个阿里云的依赖，这个依赖是工具包用的。

    <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.10.2</version></dependency>

接下来需要配置yaml文件

aliyun:oss:file:endpoint: oss-cn-（区域：上海、北京等，用拼音表达，注意这个括号是不存在的）.aliyuncs.comkeyId: 开通oss服务时生成的keyIdkeySecret: 开通oss服务时生成的keySecretdirName: 阿里云上传图片路径的文件名比如：/avatarbucketName: bucketName

这些去哪里获取，如何开通
（1）开通OSS服务
去阿里云打开oss管理控制台开通

然后创建Bucket存储空间

创建文件夹上传图片

在头像中，点击“AccessKey管理”进行RAM设置

选择使用子用户
创建用户组：

添加用户
添加用户到用户组
设置权限

获取子用户AccessKeyId,AccessKeySecret
这样就获取到了ymal所以的配置信息。
接下里就是后端程序代码和两个工具类：
上传方法：

    @Resourceprivate OSSUtils ossUtils;

    @PostMapping("/upload")public BaseResult upload(MultipartFile file)throws IOException{System.out.println("dadadadaad");InputStream is = file.getInputStream();String path = ossUtils.uploadToOSS(file);if (file.getSize()>1048576){return BaseResult.error("图片不得大于1M");}paths=path;return BaseResult.ok("上传成功",path);}

两个工具类：

package com.czxy.oss;import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;@Component
@ConfigurationProperties(prefix="aliyun.oss.file")
@Data
public class OSSProperties {private String endpoint;private String keyId;private String keySecret;private String dirName;private String bucketName;
}

package com.czxy.oss;import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;import javax.annotation.Resource;
import java.util.UUID;/*** @author 桐叔* @email liangtong@itcast.cn*/
@Component
public class OSSUtils {@Resourceprivate OSSProperties ossProperties;/*** 上传到OSS* @param file 上传文件* @return 上传后的路径*/public String uploadToOSS(MultipartFile file) {try {// 创建OSSClient实例。OSS ossClient = new OSSClientBuilder().build(ossProperties.getEndpoint(), ossProperties.getKeyId(), ossProperties.getKeySecret());//System.currentTimeMillis()  //毫秒值String name = UUID.randomUUID().toString().replace("-", "");        //32长度// 截取图片的扩展名   mm.jpgString[] arr = file.getOriginalFilename().split("\\.");// 路径String path =  ossProperties.getDirName() + "/" + name + "." + arr[1];// 上传图片ossClient.putObject(ossProperties.getBucketName(), path , file.getInputStream());// 关闭OSSClient。ossClient.shutdown();//https://czxy-lt.oss-cn-shanghai.aliyuncs.com/avatar/b9c4d0a19b1d48eb89d9ff61284f83d6.jpgreturn "https://"+ossProperties.getBucketName()+"."+ossProperties.getEndpoint()+"/" + path;} catch (Exception e) {throw new RuntimeException("上传OSS异常");}}}

其中微信小程序的前端代码与平时的vue不同，大家可以参考微信官方文档。

微信小程序/vue通过阿里云上传图片相关推荐

微信小程序上传阿里云OSS，返回204,400,403,405,解决方案
目录微信小程序上传阿里云 ==OSSAccessKeyId,policy,signature==如何获取呢? 配置Bucket跨域访问配置外网域名到小程序的域名白名单上传报错(返回400,403 ...
微信小程序录音直传阿里云OSS并语音识别
前言如题:做一个录音文字识别功能,知识点有三个,分别是微信小程序的录音功能.录音文件直传阿里云OSS.使用阿里云的录音文件识别接口返回识别后的文字一.微信小程序录音官方文档:微信小程序全局唯一的 ...
Javaweb和微信小程序项目部署阿里云服务器总结(上)
谈到微信小程序的java后台怎么部署在阿里云服务器上的问题,弯弯绕绕,好多坑,网上的博客资料也特别乱,博主也是在没有任何经验和指导下花了几天的工夫才完成的.这里为了方便大家不踩坑,总结了下整个流程和注 ...
微信小程序上传阿里云视频文件流程及代码
为了微信小程序客服端实现自拍视频能够分享给多个好友,我们需要把小程序自拍的视频存储到服务器,而阿里云在性能和速度上比较不错,所以我们选择了阿里云作服务器. 第一步.微信小程序项目创建 1. 到http ...
微信小程序MQTT模拟器阿里云物联网平台测试
陈拓 chentuo@ms.xab.ac.cn 2019.09.27/2020.01.20 原文参考:微信小程序-MQTT模拟器 https://www.yuque.com/cloud-dev/iot ...
基于微信小程序+VUE+Springboot+Mysql的中小学生作业管理系统
基于微信小程序+VUE+Springboot+Mysql的中小学生作业管理系统 ✌全网粉丝20W+,csdn特邀作者.博客专家.CSDN新星计划导师.java领域优质创作者,博客之星.掘金/华为云/阿 ...
微信小程序图片无法存入云开发数据库，求解决
微信小程序图片无法存入云开发数据库,求解决上传图片的js代码片段上传图片的js代码片段上传图片的js代码片段,觉得自己代码的没错,也能打印出来上传的图片地址,但是发现并没有存进数据库,求大神指点 ...
微信小程序+阿里物联平台+合宙Air724UG搭建无服务器物联系统（三）---微信小程序直连阿里物联平台AliIoT
前一段时间集中设计系统整体方案,物联网平台搭建.小程序编写,硬件电路设计.SOC单片机程序开发,自己挖的坑太大了,填起来真是费劲啊!整个年假都用来填坑了,也没有时间编写博文,今天忙里偷闲集中整理一下开 ...
微信小程序实现腾讯云接口图象识别
微信小程序实现腾讯云接口图象识别注:操作环境:springboot+微信小程序 1.导入maven 腾讯云图象识别接口 jar包 <depend ...

微信小程序/vue通过阿里云上传图片

微信小程序/vue通过阿里云上传图片相关推荐

最新文章

热门文章