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 = ;
var g_object_name = "";
var g_object_name_type = "";
var now = Date.parse(new Date()) / ;
var timestamp = Date.parse(new Date()) / ; 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 = ; 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()) / ;
if (expire < now + ) {
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 || ;
var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
var maxPos = chars.length;
var pwd = "";
for (i = ; 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 != -) {
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() + 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,不然,默认会返回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")[].innerHTML =
"<span>" + file.percent + "%</span>";
var prog = d.getElementsByTagName("div")[];
var progBar = prog.getElementsByTagName("div")[];
progBar.style.width = * file.percent + "px";
progBar.setAttribute("aria-valuenow", file.percent);
}, FileUploaded: function(up, file, info) {
if (info.status == ) {
document
.getElementById(file.id)
.getElementsByTagName("b")[].innerHTML =
"upload to oss success, object name:" +
get_uploaded_object_name(file.name) +
" 回调服务器返回的内容是:" +
info.response;
} else if (info.status == ) {
document
.getElementById(file.id)
.getElementsByTagName("b")[].innerHTML =
"上传到OSS成功,但是oss访问用户设置的上传回调服务器失败,失败原因是:" +
info.response;
} else {
document
.getElementById(file.id)
.getElementsByTagName("b")[].innerHTML = info.response;
}
}, Error: function(up, err) {
if (err.code == -) {
document
.getElementById("console")
.appendChild(
document.createTextNode(
"\n选择的文件太大了,可以根据应用情况,在upload.js 设置一下上传的最大大小"
)
);
} else if (err.code == -) {
document
.getElementById("console")
.appendChild(
document.createTextNode(
"\n选择的文件后缀不对,可以根据应用情况,在upload.js进行设置可允许的上传文件类型"
)
);
} else if (err.code == -) {
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>

3. 了解更多plupload的配置参考:

前端上传组件Plupload使用指南: https://www.cnblogs.com/2050/p/3913184.html

https://www.jianshu.com/p/b54af6e5539c?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

vue plupload 的使用的更多相关文章

  1. Vue技巧小结(持续更新)

    1. 动态生成的input自动focus 背景: input元素在需要时才插入DOM,这时元素用autofocus属性第一次是可以获取焦点,但是如果有第二个,就不再生效,所以得另外的办法. 方法: / ...

  2. 阿里oss上传图片react组件alioss-react,vue组件alioss-vue (不用我先收藏着,后端看下前端处理方法)

    1.介绍 最近开发了一个项目,其中需要一个上传图片到阿里云的 oss 上面,就是上传图片到阿里云的 oss 上面. 因为之前开发过 vue 的阿里云 oss 上传,所以直接复制粘 vue 的组件. 因 ...

  3. vue+大文件断点续传

    根据部门的业务需求,需要在网络状态不良的情况下上传很大的文件(1G+).其中会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长,请求超时:3,传输中断,必须重新上传导致前功尽弃.解 ...

  4. c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件

    废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...

  5. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  6. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  7. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  8. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  9. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

随机推荐

  1. openGL起飞篇

    我的技术路线:glfw+glad(有了glfw,什么glew,freeglut都不要了) GLFW:直接下载,然后新建vs项目,在<VC++>的<包含目录>添加include路 ...

  2. IBM MQ V6.0 for Windows7

    https://blog.csdn.net/guolf521/article/details/87913141 websphere 商用中间件MQ 轨道交通使用

  3. Union-Find(并查集): Quick union improvements

    Quick union improvements1: weighting 为了防止生成高的树,将smaller tree放在larger tree的下面(smaller 和larger是指number ...

  4. Continuous Subarray Sum II

    Description Given an circular integer array (the next element of the last element is the first eleme ...

  5. usa单位换算

    1.温度换算 摄氏度    C = 5/9(F-32) ≍ (F-32)/1.8 (F为华氏温度值) 华氏度   F = 1.8C + 32 (C为摄氏温度值) 3.重量换算 1品脱(pint) ≍ ...

  6. Oracle ALERT日志中常见监听相关报错之二:ORA-3136错误的排查 (转载)

    近期在多个大型系统中遇到此问题,一般来说如果客户端未反映异常的话可以忽略的.如果是客户端登陆时遇到ORA-12170: TNS:Connect timeout occurred,可以参考 http:/ ...

  7. JMX类型监控

    zabbix服务器配置 zabbix_server.conf: JavaGateway=10.42.239.219 #JavaGateway的IP JavaGatewayPort=10052 #Jav ...

  8. Js验证正则表达式

    //验证是否手机 var base = Objcet();base.isPhone = function(num) { var preg = /^1[3-7,8]{1}[0-9]{9}$/; retu ...

  9. 计数器的原理,设计及verilog实现

    若计数器由n个触发器组成,则计数器的位数为n,所能计数的最大模数为2的n次幂.以下为同步二进制加法计数器电路; 驱动方程:状态图 状态方程(此时的Q0,Q1为上一次状态值): 下例是同步4位2进制计数 ...

  10. Ceph osd故障恢复

    1  调高osd的日志等级 加上红框那一行就可以了 osd的日志路径:/var/log/ceph/ceph-osd.3.log 注意:加上了这一行后日志会刷很多,所以要特别注意日志容量的变化,以防把v ...