element-ui图片上传组件实现前端直传阿里云

最新推荐文章于 2024-05-31 11:18:26 发布

转载最新推荐文章于 2024-05-31 11:18:26 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a4c925df265da430407037d

文章标签：

#javascript #前端 #ui #ViewUI

本文介绍如何利用前端技术实现图片直接上传至阿里云OSS服务的方法。通过后端签名确保安全性，详细展示了HTML与JavaScript代码实现流程。

因公司的项目需求，需要前端图片直接上传阿里云，并且采取的是后端签名后oss上传阿里云。

    html代码            <el-upload                          
                         action="http://文件目录.oss-cn-beijing.aliyuncs.com"                          
                         list-type="picture-card"                          
                         :on-preview="handlePreview"                          
                         :on-remove="handleRemovePic"                          
                         :before-upload="handPic"                          
                         :file-list="picList"                          
                         :http-request="picUpload" >                                                    <i class="el-icon-plus"></i>                      </el-upload>
                       使用http-request覆盖组件的默认上传行为，
                       图片操作（限制格式或者大小）可以放在before-upload钩子函数内复制代码

picUpload(file) {      // 图文上传
      // 采取后端签名方式，获取的签名保存到cookies中，可以保证阿里云的安全性，账号不可见      
          let pro = new Promise((resolve, rej) => {        
                             // 从cookies中取签名，判断签名有没有过期        
                             var res = JSON.parse(Cookies.get("sign"));        
                             var timestamp = Date.parse(new Date()) / 1000;        
                             if (res.expire - 3 > timestamp) {         
                                    console.log("签名没过期");          
                                    resolve(res);        
                                 } else {
                                       //签名过期的话重新请求签名          
                                     this.$http.get("http://请求签名的地址").then(res => {            
                                     console.log(res, "签名过期");            
                                     Cookies.set("sign", JSON.stringify(res.data));           
                                     resolve(res.data);          
                                     });        
                                   }      
                                });      
                               var that = this;      
                               pro.then(success => {
                              //success就是请求的签名，里面的内容经过加密了        
                                var data = success;
                              //图片通过表单方式上传，所以要声明一个表单对象       
                                var ossData = new FormData();
                             //时间为了创建不同的层级目录，时间戳为了保证上传同一张图片不会被覆盖        
                                var date = new Date();        
                                var s = date.getTime()        
                                var y = date.getFullYear();        
                                var m = date.getMonth() + 1;        
                                var d = date.getDate();        
                                ossData.append("name", file.file.name);
                               //key就代表文件层级和阿里云上的文件名        
                       ossData.append("key",data.dir + "/" + y + "/" + m + "/" + d + "/" +s+file.file.name);        
                       ossData.append("policy", data.policy);        
                       ossData.append("OSSAccessKeyId", data.accessid);
                    //阿里云正常返回204，然后返回信息是空的，想看到返回信息强制让它返回201，返回一个xml文件可以提取有用的信息        
                       ossData.append("success_action_status", 201);        
                       ossData.append("signature", data.signature);        
                       ossData.append("file", file.file, file.file.name);        
                       that.$http.post(data.host, ossData, {            
                                  headers: {              "Content-Type": "multipart/form-data; boundary={boundary}"            }          
                             })          
                              .then(res => {            
                                     console.log(this.fileList);            
                                     this.imgText.push(ossData.get("key"));            
                                     console.log(this.imgText, "imgtext");          
                               })          
                                .catch(error => {            
                                       console.log(error, "错误");         
                                    });      
                                 });    
                              },复制代码

上传成功201的返回信息（被我删掉一些关键字）
<PostResponse>
  <Bucket>open</Bucket>
  <Location>http://open.oss-cn-beijing.aliyuncs.com//openservice/2017/12/30/15149708053651234.jpg</Location>
  <Key>open/2017/12/30/15149708053651234.jpg</Key>
  <ETag>5EB52967855E151E2433B465F858E5</ETag>
</PostResponse>复制代码