vue plupload 的使用
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
vue plupload 的使用的更多相关文章
- Vue技巧小结(持续更新)
1. 动态生成的input自动focus 背景: input元素在需要时才插入DOM,这时元素用autofocus属性第一次是可以获取焦点,但是如果有第二个,就不再生效,所以得另外的办法. 方法: / ...
- 阿里oss上传图片react组件alioss-react,vue组件alioss-vue (不用我先收藏着,后端看下前端处理方法)
1.介绍 最近开发了一个项目,其中需要一个上传图片到阿里云的 oss 上面,就是上传图片到阿里云的 oss 上面. 因为之前开发过 vue 的阿里云 oss 上传,所以直接复制粘 vue 的组件. 因 ...
- vue+大文件断点续传
根据部门的业务需求,需要在网络状态不良的情况下上传很大的文件(1G+).其中会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长,请求超时:3,传输中断,必须重新上传导致前功尽弃.解 ...
- c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件
废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
随机推荐
- 微信小程序~App.js中获取用户信息
(1)代码:主要介绍下获取用户信息部分 onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] l ...
- C# 6.0 中的新增功能(.NET Framework 4.6 与 Visual Studio 2015 )
C#6.0 在 2015 年7月随着.NET Framework 4.6 一同发布,后期发布了.NET Framework 4.6.1,4.6.2. 一.自动属性初始化(Auto-property i ...
- TCP/IP 协议栈及 OSI 参考模型详解
OSI参考模型 OSI RM:开放系统互连参考模型(open systeminterconnection reference model) OSI参考模型具有以下优点: 简化了相关的网络操作: 提供设 ...
- go语言-for循环
一.for循环语法: for 循环变量初始化:循环条件:循环变量迭代{ 循环体 }案例: 打印10句hello 方式一 package main import "fmt" func ...
- Acwing P298 围栏
Analysis ①首先将所有粉刷匠,按照必须刷的小木块Si从小到大排序. 上面这个操作为了保证我们可以顺序处理. ②我们可以设f[i][j]表示为,前i个粉刷匠,刷了前i个木块.可以有些木块选择不刷 ...
- MySQL 效率提高N倍的19条MySQL优化秘籍
一.EXPLAIN 做MySQL优化,我们要善用 EXPLAIN 查看SQL执行计划. 下面来个简单的示例,标注(1,2,3,4,5)我们要重点关注的数据 type列,连接类型.一个好的sql语句至少 ...
- ps -ef、ps aux(查看进程占用内存大小)
Linux下ps -ef和ps aux的区别及格式详解 Linux下显示系统进程的命令ps,最常用的有ps -ef 和ps aux.这两个到底有什么区别呢?两者没太大差别,讨论这个问题,要追溯到Uni ...
- asp.net实现大文件上传分片上传断点续传
HTML部分 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...
- SSM 整合 ehcache spring 配置文件报错
添加 <!-- end MyBatis使用ehcache缓存 --> <cache:annotation-driven cache-manager="cacheManage ...
- LoadRunner学习目录
已更新: 未更新: 1.loadrunner 11破解版及破解包 2.如何录制一个LR脚本 3.自定义loadrunner脚本