使用Element实现图片上传到OSS

April 9, 2021
- 前端

1.1、原生

https://oss.console.aliyun.com/overview 🔗

1、准备

1）、开通阿里云云存储功能开通：https://oss.console.aliyun.com/overview 🔗 开发文档：https://help.aliyun.com/document_detail/32009.html?spm=a2c4g.11186623.6.778.614459aa0tT8Ms 🔗

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

创建一个子用户专门用于我们上传文件时使用，创建好后记住AccessKey ID和SECRET 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

  <!--        OSS-->
  <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提供了服务端签名后直传的方案。服务端签名后直传的原理如下：

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

参考：https://help.aliyun.com/document_detail/91868.html?spm=a2c4g.11186623.2.15.4afc6e28LkeSwe#concept-ahk-rfz-2fb 🔗

1）引入starter

  <!--        OSS-->
  <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请求 5）前端代码方案一：用别人已经封装好的资源下载：https://download.csdn.net/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.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、效果

1.4、oss绑定域名

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

标题：使用Element实现图片上传到OSS

作者：lomtom

链接：https://lomtom.cn/使用element实现图片上传到oss

#Oss