700字范文 > 【OSS】使用Element实现图片上传到OSS

【OSS】使用Element实现图片上传到OSS

时间：2019-02-07 12:40:57

1.1、原生

https://oss./overview

1、准备

1）、开通阿里云云存储功能

开通：https://oss./overview

开发文档：/document_detail/3.html?spm=a2c4g.11186623.6.778.614459aa0tT8Ms

点击创建bucket，根据自己的需求选择相应规格

2）、创建子用户

创建一个子用户专门用于我们上传文件时使用，创建好后记住AccessKey ID和SECRET

https://ram./users/new并且添加管理对象存储的权限

2、使用

1）、安装SDK

在Maven项目中加入依赖项（推荐方式）

在 Maven 工程中使用 OSS Java SDK，只需在 pom.xml 中加入相应依赖即可。以 3.8.0 版本为例，在内加入如下内容：

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

2）、上传

以文件流上传

// Endpoint以杭州为例，其它Region请按实际情况填写。String endpoint = "http://oss-cn-";// 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，请登录 https://ram. 创建。String accessKeyId = "<yourAccessKeyId>";String accessKeySecret = "<yourAccessKeySecret>";// 创建OSSClient实例。OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);// 上传文件流。InputStream inputStream = new FileInputStream("<yourlocalFile>");ossClient.putObject("<yourBucketName>", "<yourObjectName>", inputStream);// 关闭OSSClient。ossClient.shutdown();

1.2、直接上传

1）引入starter

<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alicloud-oss</artifactId></dependency>

2）、配置oss

spring:cloud:alicloud:access-key: ******secret-key: ******oss:endpoint: ******

3）、引入OSSClient进行操作

@AutowiredOSSClient ossClient;@Testvoid upload() throws FileNotFoundException {InputStream inputStream = new FileInputStream("D:\\Pictures\\Saved Pictures\\logo.png");ossClient.putObject("lomtom-mall", "logo.png", inputStream);// 关闭OSSClient。ossClient.shutdown();}

1.3、服务端签名后上传

采用JavaScript客户端直接签名时，AccessKeyID和AcessKeySecret会暴露在前端页面，因此存在严重的安全隐患。因此，OSS提供了服务端签名后直传的方案。

服务端签名后直传的原理如下：

用户发送上传Policy请求到应用服务器。应用服务器返回上传Policy和签名给用户。用户直接上传数据到OSS。

参考：/document_detail/91868.html?spm=a2c4g.11186623.2.15.4afc6e28LkeSwe#concept-ahk-rfz-2fb

1）引入starter

<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alicloud-oss</artifactId></dependency>

2）、配置oss

spring:cloud:alicloud:access-key: ******secret-key: ******oss:endpoint: ******bucket: *****

3）、引入OSSClient进行操作

这里的R可以用JSONObject代替

@AutowiredOSS ossClient;@Value("${spring.cloud.alicloud.oss.endpoint}")private String endpoint;@Value("${spring.cloud.alicloud.oss.bucket}")private String bucket;@Value("${spring.cloud.alicloud.access-key}")private String accessId;@RequestMapping("/oss/policy")protected R poliocy(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// host的格式为 bucketname.endpointString host = "https://" + bucket + "." + endpoint;// callbackUrl为上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。// String callbackUrl = "http://88.88.88.88:8888";// 用户上传文件时指定的前缀。String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());String dir = format+"/";Map<String, String> respMap = null;try {long expireTime = 30;long expireEndTime = System.currentTimeMillis() + expireTime * 1000;Date expiration = new Date(expireEndTime);// PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。PolicyConditions policyConds = new PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);byte[] binaryData = postPolicy.getBytes("utf-8");String encodedPolicy = BinaryUtil.toBase64String(binaryData);String postSignature = ossClient.calculatePostSignature(postPolicy);respMap = new LinkedHashMap<String, String>();respMap.put("accessid", accessId);respMap.put("policy", encodedPolicy);respMap.put("signature", postSignature);respMap.put("dir", dir);respMap.put("host", host);respMap.put("expire", String.valueOf(expireEndTime / 1000));// respMap.put("expire", formatISO8601Date(expiration));} catch (Exception e) {// Assert.fail(e.getMessage());System.out.println(e.getMessage());} finally {ossClient.shutdown();}return R.ok().put("data",respMap);}

4）、在阿里云设置跨域请求

允许所有的ip通过post请求

5）前端代码

方案一：用别人已经封装好的

资源下载：/download/qq_41929184/12558619

修改policy.js里的url，例如我这里是/oss/policy

url: http.adornUrl('/oss/policy'),

引入组件、绑定model

import SingleUpload from '@/components/upload/singleupload'<SingleUpload v-model="dataForm.logo"></SingleUpload>

修改OSS的外网访问Bucket 域名

<el-upload action='你自己的' :data='dataObj' '>

方案二：自己撸一个

1、使用element上传组件

其中绑定上传的数据dataObj，上传前所需要处理的方法beforeAvatarUpload，上传后需要处理的方法handleAvatarSuccess

<el-upload class="avatar-uploader" :action="upload" :data='dataObj' :show-file-list="false" :on-success="handleAvatarSuccess":multiple='false' :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>

2、设置数据

data() {return {upload: this.$global.uploadUrl, //自己阿里云的上传地址imageUrl: '',dataObj: {policy: '',signature: '',key: '',ossaccessKeyId: '',dir: '',host: ''},}}

3、编写相关方法

methods: {handleAvatarSuccess(res, file) {this.imageUrl = this.dataObj.host + '/' + this.dataObj.key},beforeAvatarUpload(file) {return new Promise((resolve, reject) => {this.$request.postRequest(this.$url.HOUSEINTERFACES.upload).then(res => {this.dataObj.policy = res.data.policythis.dataObj.signature = res.data.signaturethis.dataObj.ossaccessKeyId = res.data.accessidthis.dataObj.key = res.data.dir + file.namethis.dataObj.dir = res.data.dirthis.dataObj.host = res.data.hostconsole.log(this.dataObj)resolve(true)})})}}

4、效果