Upload OSS Process: Client (Request signature to Web server) = "Web server (server return signature) =" Client (send the acquired signature into URL to be sent to OSS authentication) = "OSS Server
1. Form through balls OSS advantages:
Process-One less step forward,
Architecture-Go to the website server, upload volume is too large, the bottleneck in the site server, after the use of form upload
Upload is sent directly from the client to the OSS, the upload volume is too large, the pressure on the OSS, and not on the Web server
2. What data does the front end require:
1. What data is required in the signature: policyBase64 (background definition authorization policy in Base64 encoded format) Signature (background through POLICYBASE64 + Accesskeysecret-computed signature) Expires (valid time for current signature), Ossaccesskeyid, OSS save path/file name
3. Note which issues
1. The upload prompt has been uploaded successfully but cannot find the uploaded file on OSS: because there is no definition of the name of the uploaded file (key)
2. It is best to define the OSS return 200, otherwise return 204 by default
3. Agree with the background is to use the URL to include the signature or header contains the signature upload, because different upload method background computing signature method inconsistent
//upload-oss-start upload video to OSS
Console.log (window.location.host);
var headhttp = window.location.host;
If (Headhttp! = "Www.huakr.com" | | headhttp! = "120.26.225.37:9999") {
Headhttp = "Localhost:8080/huahan";
}
var flog = false;
var objdata;
var file = this.files[0];
//Request signature to server and assign return information to global variable Objdata
$.ajax ({
URL: '/http ' +headhttp+ '/oss/weboss ',
DataType: ' json ',
Async:false,
data:{' contentType ': File.type},
Type: ' Post ',
Success:function (resp) {
Console.log (resp.code);
if (Resp.code = = 13000) {
alert (resp.msg);
}else{
Flog = true;
Objdata = resp;
}
}
});
Flog is to determine if the service side is returning the signature correctly
if (flog) {
Because the name of the upload file and the path are defined before uploading, so here directly after the uploaded file path stitching back to the background
var Videopath = objdata.data.domain+ "/" +objdata.data.folder;
Data that needs to be uploaded to Oss
var glo_image_data = {
ossaccesskeyid:objdata.data.accesskey,//need to fill in the details according to their buckets see OSS API
POLICY:OBJDATA.DATA.POLICY.POLICY,//POLICYBASE64 specifies the legitimacy of the requested form field
Signature:objdata.data.policy.useKeyId,/////based on the signature information computed by Access Key secret and policy, the OSS validates the signature information to verify the validity of the POST request
Success_action_status: ' 200′,//Let the server return 200, otherwise, 204 will be returned by default
Key:objdata.data.folder,//file name, can set path
File:file
},
OSS Extranet Access Address
Glo_image_upload_url = "http://huahan.oss-cn-hangzhou.aliyuncs.com/";
Upload method
function Douploadimage (url,data) {
var omyform = new FormData ();
for (var field_name in data) {
Omyform.append (Field_name,data[field_name]);
}
var oreq = new XMLHttpRequest ();
Upload Results
Oreq.onreadystatechange = function (e) {
if (oreq.readystate = = 4) {
if (oreq.status==200) {//here if successfully returned is the value of the Success_action_status setting
Dialog.hideloading ();
Alert (' success ');
This is the link back to the background.
$.ajax ({
URL: '/http '/' +headhttp+ '/oss/getvideoimg ',
DataType: ' JSON ',
Async:false,
data:{"Videopath": Videopath},
Type: ' Post ',
Success:function (Result) {
Console.log (Result.data);
if (Result.code = = 13000) {
alert (result.msg);
}else{
Videopath = videopath+ "@oneposter" + "=" +result.data+ "@two";
ifrmimg = Result.data;
}
}
})
This is the data that is needed in the rich text editor, no tube
Urlbox.val (Videopath);
}
}
};
Oreq.open ("POST", url);
Submit data here to OSS
Oreq.send (Omyform);
}
Douploadimage (Glo_image_upload_url,glo_image_data);
}
Upload-oss-end