2. 程式人生 > >服務端簽名後直傳(上傳檔案到oss)

服務端簽名後直傳(上傳檔案到oss)

阿新 • • 發佈：2019-02-02

demo的環境：idea2.6+Tomcat8+vue

我這邊只是做了上傳圖片的demo，下面先看下所需依賴：

jetty-servlet:9.2.10.v20150310
jetty-servlets:9.2.10.v20150310
aliyun-sdk-oss:2.0.6
aliyun-java-sdk-sts:2.1.6
aliyun-java-sdk-core:2.1.7
commons-httpclient:3.1-rc1
guava:r09-jarjar
hadoop-streaming:2.6.0-mr1-cdh5.5.0
commons-codec:1.9

因為我這邊開的是兩個tomcat，所以不能同時佔用一個埠，所以就設定了一下埠：

然後就是設定需要請求的阿里雲服務端:

@WebServlet(asyncSupported = true)
public class PostObjectPolicy extends HttpServlet{
   /**
    * 
    */
private static final long serialVersionUID = 5522372203700422672L;

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
   
       String endpoint = "oss-cn-shanghai.aliyuncs.com"
 
;
        String accessId = "LTAInnu3TavG4hjj";
        String accessKey = "WOL9xZ1pq8abRDNfDqbSOXZBshQNbK";
        String bucket = "*******";//服務端名稱
        String dir = "images/";//上傳到制定資料夾
        String host = "http://" + bucket + "." + endpoint;//請求路徑
        OSSClient client = new OSSClient(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 = client.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = client.calculatePostSignature(postPolicy);
            
            Map<String, String> respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            //respMap.put("expire", formatISO8601Date(expiration));
respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            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());
            
        } catch (Exception e) {
            e.printStackTrace();
//            Assert.fail(e.getMessage());
}
    }
   
   private void response(HttpServletRequest request, HttpServletResponse response, String results) throws IOException {
      String callbackFunName = request.getParameter("callback");
      if (callbackFunName==null || callbackFunName.equalsIgnoreCase(""))
         response.getWriter().println(results);
      else
response.getWriter().println(callbackFunName + "( "+results+" )");
      response.setStatus(HttpServletResponse.SC_OK);
        response.flushBuffer();
   }
   
   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
      doGet(request, response);
    }
}

接下來直接執行上面的main方法就能拿到定好的埠號

我這邊是在vue中進行上傳的

下面這是我的上傳介面以及程式碼



<template >
 <div class="page">
     <div class="handle-box">
        <el-row type="flex" class="row-bg" justify="flex-start">
            <el-button type="primary" icon="back" @click="back">確定</el-button>
<el-button type="primary"  icon="back" @click="aa">測試</el-button>
            <!--<el-button :type="isFrozen == 1 ? 'danger' : 'success'" @click="isFrazon" v-text="frazonTip"></el-button>-->
        </el-row>
    </div>
    <div class="content_info">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="使用者頭像：">
<div id="container">
<div id="ossfile"></div>
<a id="selectfiles" href="javascript:void(0);" class='btn'>選擇檔案</a>
<a id="postfiles" href="javascript:void(0);" class='btn'>開始上傳</a>
</div>
</el-form-item>


</el-form>
    </div>
 </div>
</template>
<script type="text/ecmascript-6">
import qs from 'qs'
  export default {
        data() {
            return {
                form: {
                },
g_object_name : '',
key:'',
accessid : '',
accesskey : '',
host : '',
policyBase64 : '',
signature : '',
callbackbody :'',
filename : '',
g_object_name_type:'local_name',
new_multipart_params:'',
suffix:'',
uid:'',
                tooltip: true,
                authority: false, //操作許可權的顯示控制
                titleStatus: true,
            };
        },     
       created() {
},

methods: {

                //上傳的時候用uuid對圖片名進行了處理

UUID:function() {

var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; 
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); 

s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
},
//計算物件名稱
calculate_object_name:function(filename){
if (this.g_object_name_type == 'local_name'){
this.g_object_name += "${filename}";
}
else if (this.g_object_name_type == 'random_name'){
this.suffix = this.get_suffix(filename);
this.g_object_name = this.key + random_string(10) + this.suffix;
}
return '';
},
//設定上傳引數
set_upload_param:function(up,filename, ret){
if (ret == false)
{
ret = this.get_signature();
}
this.g_object_name = this.key;
if (filename != '') {
var uuid=filename.split('.');
this.uid=this.UUID()+"."+uuid[1];
this.filename=this.uid;
this.suffix = this.get_suffix(this.filename);
this.calculate_object_name(this.filename);
this.g_object_name = this.get_uploaded_object_name(this.g_object_name);

}
this.new_multipart_params = {
'key' : this.g_object_name,
'policy': this.policyBase64,
'OSSAccessKeyId': this.accessid, 
'success_action_status' : '200', //讓服務端返回200,不然，預設會返回204
'callback' : this.callbackbody,
'signature': this.signature,
};
up.setOption({
'url': this.host,
'multipart_params': this.new_multipart_params
});


up.start();

},

//傳送請求
send_request:function(){
var xmlhttp = null;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} 
if (xmlhttp!=null)
{
var serverUrl = 'http://127.0.0.1:7090' ;
xmlhttp.open( "GET", serverUrl, false );
xmlhttp.send( null );
return xmlhttp.responseText;
}else{
alert("Your browser does not support XMLHTTP.");
}
},
//得到簽名
get_signature:function(){
var expire =0;
var timestamp=null;
//可以判斷當前expire是否超過了當前時間,如果超過了當前時間,就重新取一下.3s 做為緩衝
var now = timestamp = Date.parse(new Date()) / 1000; 
if (expire < now + 3){
var body = this.send_request();
var obj = eval ("(" + body + ")");
this.host = obj['host'];
this.policyBase64 = obj['policy'];
this.accessid = obj['accessid'];
this.signature = obj['signature'];
expire = parseInt(obj['expire']);
this.callbackbody = obj['callback'] ;
this.key = obj['dir'];
return true;
}
return false;
},
//得到字尾
get_suffix:function(filename) {
var pos = filename.lastIndexOf('.')
//var suffix = ''
if (pos != -1) {
this.suffix = filename.substring(pos)
}
return this.suffix;
},
//得到上傳物件名稱
get_uploaded_object_name:function(filename){
if (this.g_object_name_type == 'local_name'){
var tmp_name = this.g_object_name;
tmp_name = tmp_name.replace("${filename}", this.uid);
return tmp_name;
}
else if(this.g_object_name_type == 'random_name'){
return this.g_object_name;3w
}
},
aa:function(){
  var _this = this ;
  var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'selectfiles', 
//multi_selection: false,
container: document.getElementById('container'),
flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',
url : 'http://oss.aliyuncs.com',


filters: {
mime_types : [ //只允許上傳圖片和zip,rar檔案
{ title : "Image files", extensions : "jpg,gif,png,bmp" }, 
{ title : "Zip files", extensions : "zip,rar" }
],
max_file_size : '10mb', //最大隻能上傳10mb的檔案
prevent_duplicates : true //不允許選取重複檔案
},


init: {
PostInit: function() {
document.getElementById('ossfile').innerHTML = '';
document.getElementById('postfiles').onclick = function() {
_this.set_upload_param(uploader, '', false);
return false;
};
},
//新增檔案
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>'
+'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
+'</div>';
});
},
//上傳之前
BeforeUpload: function(up, file) {
_this.check_object_radio();
_this.set_upload_param(up, file.name, true);
},
//上傳進度
UploadProgress: function(up, file) {
var d = document.getElementById(file.id);
d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
var prog = d.getElementsByTagName('div')[0];
var progBar = prog.getElementsByTagName('div')[0]
progBar.style.width= 2*file.percent+'px';
progBar.setAttribute('aria-valuenow', file.percent);
},
//檔案上傳
FileUploaded: function(up, file, info) {
if (info.status == 200){
_this.filename=_this.uid;
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = 'upload to oss success, object name:' + _this.get_uploaded_object_name(_this.filename);
}
else{
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
} 
},


Error: function(up, err) {
if (err.code == -600) {
document.getElementById('console').appendChild(document.createTextNode("\n選擇的檔案太大了,可以根據應用情況，在upload.js 設定一下上傳的最大大小"));
}
else if (err.code == -601) {
document.getElementById('console').appendChild(document.createTextNode("\n選擇的檔案字尾不對,可以根據應用情況，在upload.js進行設定可允許的上傳檔案型別"));
}
else if (err.code == -602) {
document.getElementById('console').appendChild(document.createTextNode("\n這個檔案已經上傳過一遍了"));
}
else 
{
document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));
}
}
}
});


uploader.init();
}
 
}
 }
</script>


<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.handle-box{
    margin-bottom: 20px;
}
.handle-select{
    width: 120px;
}
.handle-input{
    width: 300px;
    display: inline-block;
}
.userbox {
    height: 100px;
    line-height: 100px;
    margin-bottom: 20px;
}
.userbox img {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 10px;
vertical-align: middle;
}
li {
    height: 36px;
}

</style>

這邊需要注意的點就是需要一個必須的js檔案，放在vue的起始介面就好

<script type=text/javascript src=./static/js/plupload.full.min.js></script>

還有就是必須先點選測試才能選擇檔案，這裡換了幾種方法沒解決好，後續會改進

效果圖：



相關推薦

服務端簽名後直傳(上傳檔案到oss)

demo的環境：idea2.6+Tomcat8+vue 我這邊只是做了上傳圖片的demo，下面先看下所需依賴： jetty-servlet:9.2.10.v20150310 jetty-servlets:9.2.10.v20150310 aliyun-sdk-oss:2.

使用阿里雲OSS的服務端簽名後直傳功能

網站一般都會有上傳功能，而物件儲存服務oss是一個很好的選擇。可以快速的搭建起自己的上傳檔案功能。 該文章以使用阿里雲的OSS功能為例，記錄如何在客戶端使用阿里雲的物件儲存服務。 # 服務端簽名後直傳 ## 背景 採用JavaScript客戶端直接簽名（參見JavaScript客戶端簽名直傳）時，Acc

服務端簽名後上傳檔案到oss

上傳oss流程：客戶端(向網站伺服器請求籤名) =》 網站伺服器（伺服器返回簽名） =》 客戶端（將獲取到的簽名放入URL中傳送至oss驗證）=》 oss伺服器 1.表單直傳oss優點： 流程上—少了一步轉發， 架構上—走網站伺服器，上傳量過大的時候，瓶頸在網站伺服器，採用表單上傳後 上傳都是直接從客戶

web服務端安全---文件上傳漏洞

業務 舉例 不可 用戶 改變 一點 web容器 ash bsh 1、簡述 　　文件上傳漏洞是指用戶上傳了一個可執行的腳本文件，並通過此腳本文件獲得了執行服務端命令的能力。這種攻擊方式是最直接和有效的，而且互聯網中我們經常會用到文件上傳功能，它本身是沒有問題的，正常的業務需求

Xshell 5+lrzsz實現Windows客戶端向CentOS伺服器上傳檔案

安裝lrzsz 在centost的命令列上執行命令： yum install lrzsz 安裝完成後，可以進入需要上傳檔案的目錄，然後執行命令： rz 這時會彈出一個上傳檔案的視窗，選擇需要上傳的檔案即可上傳。

終於搞定使用node.js +redis 作為服務端，提供圖片上傳儲存服務

系統不提供業務層面上的邏輯，只負責儲存和結構關係。業務相關的資料，全部通過引數化傳入。 upload.js 檔案程式碼： //自定義引數區 var basePath='e:/';//上傳的根路徑 var tempPath='c:/'; var redis_ip='127.0

SSH登入後無法上傳檔案，修改sftp-server目錄解決

今天要給一臺伺服器上傳檔案，使用SSH登入上去之後上傳檔案時發生報錯。 file transfer server could not be started or it exited unexpectedly. exit value 127 was returned.most

阿里雲OSS物件儲存URL簽名授權下的PHP服務端和iOS端上傳檔案的設計

阿里雲的OSS物件儲存服務,具有易用,高可靠,高安全,低成本的特性,對於在圖片,音視訊儲存服務的應用非常適用,可以不搭建自己的儲存伺服器. 本來將介紹OSS儲存服務中在服務端進行URL簽名授權,然後移動端進行直傳功能的實現.除此之外還可以使用STS臨時授權,構造授權引數,返回給客戶端,由客戶端自

使用.net在服務端進行圖片下載後再上傳

上傳視頻 read list sap ebr ring bytes web add 最近做了阿裏的視頻接口，很蛋疼，阿裏的視頻獲取封面圖片是有時間限制的，過期就無法訪問了，只能先下載後上傳。 廢話不多說，直接上代碼 public ActionResult Uploadvi

使用TCP協議，分別編寫服務端和客戶端，要求客戶端向服務端上傳檔案。(使用字元流完成)

package Test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileReader; import java.io.IOException; import java.io

Android客戶端使用OkGo上傳檔案或者圖片，客戶端和服務端程式碼分享

（一）上傳單個檔案或者圖片： 客戶端程式碼： /** * 儲存資料到伺服器 */ private void saveToInternet() { //上傳單個檔案 String url = Constants.USER_NET_ICON;   Fi

七牛雲後端上傳檔案

我的案例是對接tp框架的，亦可用於其他框架，本文章只針對tp框架進行詳解，大概步驟如下： 一、引入七牛雲外掛，本部落格裡面有外掛可進行下載，亦可加本人QQ（296346102）拿資料 二、修改tp框架中的config.php配置檔案 三、在php檔案進行程式的編寫，詳情

Python socket上傳檔案的服務端和客戶端實現

socket官方文件：https://docs.python.org/2/library/socket.html socket中文詳細介紹：http://blog.csdn.net/rebelqsp/article/details/22109925 檢視某埠是否被佔用(如6666埠)：s

mac上傳檔案到服務端的方法

1.使用命令列 將本地檔案傳到104.224.166.36的伺服器  scp -P 27988 /Users/hill/Desktop/start.sh [email protected]:/root -P表示埠號 大寫 27988表示伺服器的埠號,一般不填寫表

ajax上傳檔案到後端

JSP程式碼：<input type="file" style="display: none" id="file" name="file" onchange="upload(this);">JS程式碼：window.upload = function(el){

java、 http模擬post上傳檔案到服務端 模擬form上傳檔案

需求是這樣的： **1，前後端分離，前端對接pc軟體進行檔案同步的介面，後的springboot微服務進行檔案接收和處理。 2，軟體不能直接呼叫微服務的介面進行上傳，只能先走一下前端controller進行轉發過來（）。 3，這樣就只能用httpclien

httpclient通過POST來上傳檔案，而不是通過流的形式，並在服務端進行解析(通過httpmime.jar來操作)

1. 首先需要對應的JAR包 匯入 httpmime-4.1.1.jar。 package url; import io.IoStreamUtil; import java.io.File; import java.io.IOException; import jav

Java 實現上傳檔案服務端程式碼(一)

服務端：通過Servlet + fileupload 等實現 jar：commons-fileupload-1.3.1.jar，commons-io-2.4.jar 客戶端上傳見：Java 上傳檔案客戶端程式碼(二) package com.http.servlet;

使用WebClient上傳檔案並同時Post表單資料欄位到服務端

  之前遇到一個問題，就是使用WebClient上傳檔案的同時，還要Post表單資料欄位，一開始以為WebClient可以直接做到，結果發現如果先Post表單欄位，就只能獲取到欄位及其值，如果先上傳檔案，也只能獲取到上傳檔案的內容。測試了不少時間才發現WebClient不能這麼使用。     G

在雲伺服器（Windows系統）端建立ftp服務端，並上傳檔案

1.開始—》搜尋“mstsc”—>如下圖 之後有要求輸入使用者名稱和密碼，注意是使用者名稱預設是administrator，密碼是雲伺服器的密碼（包括大小寫和字元的那個密碼） 2.連