vue3引入ElementPlus实现OSS前端直传

1.1 开通OSS服务

登录阿里云官网;

将鼠标移至产品标签页,单击对象存储 OSS,打开OSS 产品详情页面;

在OSS产品详情页,单击立即开通。

1.2 后端整合OSS实现文件上传

在pom.xml中添加相关依赖

 <dependency>
     <groupId>com.aliyun.oss</groupId>
     <artifactId>aliyun-sdk-oss</artifactId>
     <version>3.15.1</version>
     </dependency>
 ​
     <dependency>
     <groupId>javax.xml.bind</groupId>
     <artifactId>jaxb-api</artifactId>
     <version>2.3.1</version>
     </dependency>
     <dependency>
     <groupId>javax.activation</groupId>
     <artifactId>activation</artifactId>
     <version>1.1.1</version>
     </dependency>
     <!-- no more than 2.3.3-->
     <dependency>
     <groupId>org.glassfish.jaxb</groupId>
     <artifactId>jaxb-runtime</artifactId>
     <version>2.3.3</version>
     </dependency>
     <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-web</artifactId>
 </dependency>

创建OSSController类

 package com.tuling.controller;
 ​
 import com.aliyun.oss.OSS;
 import com.aliyun.oss.OSSClientBuilder;
 import com.aliyun.oss.common.utils.BinaryUtil;
 import com.aliyun.oss.model.MatchMode;
 import com.aliyun.oss.model.PolicyConditions;
 import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 ​
 import java.text.SimpleDateFormat;
 import java.util.Date;
 import java.util.LinkedHashMap;
 import java.util.Map;
 ​
 /**
  * @author yang
  * @data 2023/1/28
  * @apiNote
  */
 @RestController
 @RequestMapping("/oss")
 public class OSSController {
 ​
     @CrossOrigin
     @RequestMapping("/policy")
     public Map<String, String> policy() {
         // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
         String accessId = "LTAI5t8LPUeZoN7ERDLGUatY";
         String accessKey = "r7ltwSx4shrqTK25vUC56f82H7WYl0";
         // Endpoint以华东1(杭州)为例,其它Region请按实际情况填写。
         String endpoint = "oss-cn-hangzhou.aliyuncs.com";
         // 填写Bucket名称,例如examplebucket。
         String bucket = "tulingmall-yangyang";
         // 填写Host地址,格式为https://bucketname.endpoint。
         String host = "https://" + bucket + "." + endpoint;
         // 设置上传回调URL,即回调服务器地址,用于处理应用服务器与OSS之间的通信。OSS会在文件上传完成后,把文件上传信息通过此回调URL发送给应用服务器。
         //String callbackUrl = "https://192.168.0.0:8888";
         // 设置上传到OSS文件的前缀,可置空此项。置空后,文件将上传至Bucket的根目录下。
         SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
         String date = simpleDateFormat.format(new Date());
         String dir = date + "/";
 ​
         // 创建ossClient实例。
         OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);
         try {
             long expireTime = 30;
             long expireEndTime = System.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 = ossClient.generatePostPolicy(expiration, policyConds);
             byte[] binaryData = postPolicy.getBytes("utf-8");
             String encodedPolicy = BinaryUtil.toBase64String(binaryData);
             String postSignature = ossClient.calculatePostSignature(postPolicy);
 ​
             Map<String, String> 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));
 ​
             //JSONObject jasonCallback = new JSONObject();
             //jasonCallback.put("callbackUrl", callbackUrl);
             //jasonCallback.put("callbackBody",
             //        "filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
             //jasonCallback.put("callbackBodyType", "application/x-www-form-urlencoded");
             //String base64CallbackBody = BinaryUtil.toBase64String(jasonCallback.toString().getBytes());
             //respMap.put("callback", base64CallbackBody);
 ​
             //JSONObject ja1 = JSONObject.fromObject(respMap);
             //// System.out.println(ja1.toString());
             //response.setHeader("Access-Control-Allow-Origin", "*");
             //response.setHeader("Access-Control-Allow-Methods", "GET, POST");
             //response(request, response, ja1.toString());
             return respMap;
         } catch (Exception e) {
             // Assert.fail(e.getMessage());
             System.out.println(e.getMessage());
         }
         return null;
     }
 }
 ​

1.3 前端整合ElementPlus实现文件上传

在main.js引入ElementPlus和axios

 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
 import ElementPlus from 'element-plus'
 import 'element-plus/es/components/button/style/css'
 ​
 import axios from 'axios'
 // import VueAxios from 'vue-axios'
 ​
 const app = createApp(App);
 app.use(store).use(router).use(ElementPlus).mount('#app')
 ​
 ​
 app.config.globalProperties.$axios = axios
 ​

在components中创建OssUpload.vue组件

 <template>
   <el-upload
     class="upload-demo"
     :action="ObjData.host"
     :file-list="fileList"
     :before-upload="ossPolicy"
     :data="ObjData"
     list-type="picture"
   >
     <el-button
       size="small"
       type="primary"
     >点击上传</el-button>
     <div class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
   </el-upload>
 </template>
 ​
 <script>
 export default {
   name: 'OssUpload',
   mixins: [],
   components: {},
   props: {},
   data () {
     return {
       fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
       ObjData: {
         OSSAccessKeyId: '',
         policy: '',
         Signature: '',
         key: '',
         host: '',
         dir: ''
       }
     }
   },
   computed: {},
   watch: {},
   created () {},
   mounted () {},
   methods: {
     ossPolicy(file) {
       // 上传前进行服务器签名
       return new Promise((resovle,reject)=>{
         // 请求后端
         this.$axios.get('http://localhost:8088/oss/policy')
         .then((res) => {
           this.ObjData.OSSAccessKeyId=res.data.accessId;
           this.ObjData.policy=res.data.policy;
           this.ObjData.Signature=res.data.signature;
           this.ObjData.host=res.data.host;
           this.ObjData.dir=res.data.dir;
           this.ObjData.key=res.data.dir+"${filename}";  
           resovle(true); // 继续上传
         })
         .catch((err) => {
           console.log(err);
           resovle(false);
         })
       })
     }
   }
 }
 </script>
 ​
 <style scoped lang="scss">
 </style>
 ​
 

 

 

 

posted @ 2023-01-29 23:33  蔡地像徐坤  阅读(1148)  评论(0编辑  收藏  举报