1. 首選npm安裝plupload
2. 阿里雲OSS PHP 安全上傳
<template>
<div class="imgUpload">
aaa
<br>
<div id="ossfile">你的瀏覽器不支持flash,Silverlight或者HTML5!</div>
<div id="container">
<a id="selectfiles" href="javascript:void(0);" class="btn">選擇文件</a>
<a id="postfiles" href="javascript:void(0);" class="btn">開始上傳</a>
</div>
<pre id="console"></pre>
</div>
</template>
<script>
import plupload from "plupload";
var accessid = "";
var accesskey = "";
var host = "";
var policyBase64 = "";
var signature = "";
var callbackbody = "";
var filename = "";
var key = "";
var expire = 0;
var g_object_name = "";
var g_object_name_type = "";
var now = Date.parse(new Date()) / 1000;
var timestamp = Date.parse(new Date()) / 1000;
function send_request() {
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp != null) {
// serverUrl是 用戶獲取 '簽名和Policy' 等信息的應用服務器的URL,請將下面的IP和Port配置爲您自己的真實信息。
// serverUrl = 'http://88.88.88.88:8888/aliyun-oss-appserver-php/php/get.php'
let serverUrl = "http://xxx/oss/up/";
xmlhttp.open("GET", serverUrl, false);
xmlhttp.send(null);
return xmlhttp.responseText;
} else {
alert("Your browser does not support XMLHTTP.");
}
}
function check_object_radio() {
var tt = document.getElementsByName("myradio");
for (var i = 0; i < tt.length; i++) {
if (tt[i].checked) {
g_object_name_type = tt[i].value;
break;
}
}
}
function get_signature() {
// 可以判斷當前expire是否超過了當前時間, 如果超過了當前時間, 就重新取一下,3s 作爲緩衝。
now = timestamp = Date.parse(new Date()) / 1000;
if (expire < now + 3) {
let body = send_request();
var obj = eval("(" + body + ")");
host = obj["host"];
policyBase64 = obj["policy"];
accessid = obj["accessid"];
signature = obj["signature"];
expire = parseInt(obj["expire"]);
callbackbody = obj["callback"];
key = obj["dir"];
return true;
}
return false;
}
function random_string(len) {
len = len || 32;
var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
var maxPos = chars.length;
var pwd = "";
for (i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
function get_suffix(filename) {
let pos = filename.lastIndexOf(".");
let suffix = "";
if (pos != -1) {
suffix = filename.substring(pos);
}
return suffix;
}
function calculate_object_name(filename) {
if (g_object_name_type == "local_name") {
g_object_name += "${filename}";
} else if (g_object_name_type == "random_name") {
let suffix = get_suffix(filename);
g_object_name = key + random_string(10) + suffix;
}
return "";
}
function get_uploaded_object_name(filename) {
if (g_object_name_type == "local_name") {
tmp_name = g_object_name;
tmp_name = tmp_name.replace("${filename}", filename);
return tmp_name;
} else if (g_object_name_type == "random_name") {
return g_object_name;
}
}
function set_upload_param(up, filename, ret) {
if (ret == false) {
ret = get_signature();
}
g_object_name = key;
if (filename != "") {
let suffix = get_suffix(filename);
calculate_object_name(filename);
}
let new_multipart_params = {
key: g_object_name,
policy: policyBase64,
OSSAccessKeyId: accessid,
success_action_status: "200", //讓服務端返回200,不然,默認會返回204
callback: callbackbody,
signature: signature
};
up.setOption({
url: host,
multipart_params: new_multipart_params
});
up.start();
}
export default {
model: {
prop: "msg",
event: "ee"
},
props: {
msg: ""
},
data() {
return {
url: this.msg || ""
};
},
created() {},
mounted() {
this.initPlUploader();
},
methods: {
/**
* 初始化上傳插件
*/
initPlUploader() {
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文件
{ title: "Image files", extensions: "jpg,gif,png,bmp" },
{ title: "Zip files", extensions: "zip,rar,ipa" }
],
max_file_size: "20mb", //最大隻能上傳10mb的文件
prevent_duplicates: true //不允許選取重複文件
},
init: {
PostInit: function() {
document.getElementById("ossfile").innerHTML = "";
document.getElementById("postfiles").onclick = function() {
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) {
check_object_radio();
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) {
document
.getElementById(file.id)
.getElementsByTagName("b")[0].innerHTML =
"upload to oss success, object name:" +
get_uploaded_object_name(file.name) +
" 回調服務器返回的內容是:" +
info.response;
} else if (info.status == 203) {
document
.getElementById(file.id)
.getElementsByTagName("b")[0].innerHTML =
"上傳到OSS成功,但是oss訪問用戶設置的上傳回調服務器失敗,失敗原因是:" +
info.response;
} 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();
}
},
watch: {}
};
</script>
<style lang="less" scoped>
@import "./less.less";
</style>