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

Love The Way You Lie 2022-11-17 13:44 207阅读 0赞

![20210409172819638.png][]

### 1.1、原生 ###

[https://oss.console.aliyun.com/overview][https_oss.console.aliyun.com_overview]

#### 1、准备 ####

1）、开通阿里云云存储功能  
开通：[https://oss.console.aliyun.com/overview][https_oss.console.aliyun.com_overview]  
开发文档：[https://help.aliyun.com/document\_detail/32009.html?spm=a2c4g.11186623.6.778.614459aa0tT8Ms][https_help.aliyun.com_document_detail_32009.html_spm_a2c4g.11186623.6.778.614459aa0tT8Ms]

点击创建bucket，根据自己的需求选择相应规格  
![2020062814550545.png][]  
2）、创建子用户

*  创建一个子用户专门用于我们上传文件时使用，创建好后记住AccessKey ID和SECRET  
    [https://ram.console.aliyun.com/users/new][https_ram.console.aliyun.com_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-hangzhou.aliyuncs.com";
    // 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建。
    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进行操作

@Autowired
     OSSClient ossClient;
    
     @Test
     void 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提供了服务端签名后直传的方案。  
![20200628161346538.png][]  
服务端签名后直传的原理如下：

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

参考：[https://help.aliyun.com/document\_detail/91868.html?spm=a2c4g.11186623.2.15.4afc6e28LkeSwe\#concept-ahk-rfz-2fb][https_help.aliyun.com_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代替

@Autowired
        OSS 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.endpoint
            String 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请求  
![20200628173350886.png][]  
5）前端代码  
方案一：用别人已经封装好的  
资源下载：https://download.csdn.net/download/qq\_41929184/12558619

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

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

1.  引入组件、绑定model

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

1.  修改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.policy
    					this.dataObj.signature = res.data.signature
    					this.dataObj.ossaccessKeyId = res.data.accessid
    					this.dataObj.key = res.data.dir + file.name
    					this.dataObj.dir = res.data.dir
    					this.dataObj.host = res.data.host
    					console.log(this.dataObj)
    					resolve(true)
    				})
    			})
    		}
    	}

4、效果  
![20200628184134394.png][]

### 1.4、oss绑定域名 ###

1、设置oss的初始页与404页面。  
![2020102114221419.png][]  
2、申请域名，下载证书（nginx版本）  
3、打开传输管理->域名管理->绑定域名  
4、上传证书  
![20201021142625385.png][]  
5、新建CNAME

[20210409172819638.png]: /images/20221022/0776823f096b491bb7925399c9dfe460.png
[https_oss.console.aliyun.com_overview]: https://oss.console.aliyun.com/overview
[https_help.aliyun.com_document_detail_32009.html_spm_a2c4g.11186623.6.778.614459aa0tT8Ms]: https://help.aliyun.com/document_detail/32009.html?spm=a2c4g.11186623.6.778.614459aa0tT8Ms
[2020062814550545.png]: /images/20221022/f39fc2299ad647f7b0850effd5235581.png
[https_ram.console.aliyun.com_users_new]: https://ram.console.aliyun.com/users/new
[20200628161346538.png]: /images/20221022/df0382c92d8f4167bc4a3888c30bd094.png
[https_help.aliyun.com_document_detail_91868.html_spm_a2c4g.11186623.2.15.4afc6e28LkeSwe_concept-ahk-rfz-2fb]: https://help.aliyun.com/document_detail/91868.html?spm=a2c4g.11186623.2.15.4afc6e28LkeSwe#concept-ahk-rfz-2fb
[20200628173350886.png]: /images/20221022/f53c8447b827468f851f96ef777ac6d8.png
[20200628184134394.png]: /images/20221022/8d70d2b4b8254a26a565c5c58f91c65b.png
[2020102114221419.png]: /images/20221022/63f6d6bde06448f490b97e30b50cb1c1.png
[20201021142625385.png]: /images/20221022/509f25606ee34af290073494a45f658c.png