phpwebuploader教程,webuploader⽂件上传组件的开发实例最近项⽬中需要⽤到百度的webuploader⼤⽂件的分⽚上传，对接后端的fastdfs，于是着⼿写了这个⽂件上传的⼩插件，步骤很简单，但是其中猜到的坑也不少，本⽂主要介绍了vue webuploader ⽂件上传组件开发，⼩编觉得挺不错的，现在分享给⼤家，也给⼤家做个参考，希望能帮助到⼤家。
详细如下：
⼀、封装组件
引⼊百度提供的webuploader.js、Uploader.swf
css样式就直接写在组件⾥⾯了
上传到服务器
暂停上传
{{tip}}
{{file.name}}
v-if="file.status === 'uploading'"
:type="listType === 'picture-card' ? 'circle' : 'line'"
:stroke-width="listType === 'picture-card' ? 6 : 2"
:percentage="file.percentage">
import '../js/jquery.js'
import '../js/webuploader.js'
import { Base64 } from 'js-base64'
import CryptoJS from 'crypto-js';
export default{
name: 'fileUpload',
props: {
id: {
type: String,
default: function(){
return "filePicker";
}
},
//上传提⽰
tip: {
type: String,
default: function(){
return "";
}
},
//⽂件后缀名限制
ext: {
type: String,
default: function(){
return "jpg,jpeg,png,pdf,mp4,avi.mp3"; }
},
//分⽚⼤⼩设置
chunkSize: {
type: Number,
default: function(){
return 2097152;
}
},
//分⽚上传重试次数
chunkRetry: {
type: Number,
default: function(){
return 1;
}
},
/
/是否⾃动上传
auto: {
type: Boolean,
default: function(){
return false;
}
},
//上传⽂件⼤⼩限制
sizeLimit: {
type: Number,
default: function(){
return 209715200;
}
},
//上传⽂件数量限制
countLimit: {
type: Number,
default: function(){
return 5;
}
}
},
data(){
return{
appId: AppConfig.appId, securityKey: AppConfig.securityKey, checkUrl: AppConfig.checkUrl, uploadUrl: AppConfig.uploadUrl, mergeUrl: Url, previewName: '选择⽂件',
wul_fileMd5: '',
wul_size: 0,
wul_fileName: '',
wul_chunk: 0,
wul_uploader: '',
fileList: [],
listType: 'text',
percentage: 0,
fileObject: {
uid: '',
name: '',
ext: '',
type: '',
status: '',
percentage: 0,
url: ''
},
uploadLoading: false,
stopBtn: true
}
},
methods: {
/**
* 获取当前上传列表中的⽂件
* @returns {Array|*}
*/
getFileList: function(){
return this.fileList;
},
//绑定事件
wul_init: function() {
//提⽰只能选择⼀个⽂件
this.('filesQueued', function (files) { if (files.length > 1) {
this.$message({
message: '请选择⼀张图⽚',
type: 'error'
});
for (var i = 0; i < files.length; i++) {
this.wul_uploader.cancelFile(files[i]);
}
this.set();
this.wul_fileMd5 = "";
this.wul_size = 0;
this.wul_fileName = "";
this.wul_chunk = 0; //当前切⽚数
}else{
if( this.fileList.length == untLimit ){
this.$message({
message: '已经达到上传⽂件限制数量',
type: 'error'
});
}else{
/
/此时往需要上传的⽂件列表中添加⽂件
let file = {
uid: w() + pIndex++,
name: files[0].name,
type: files[0].type,
ext: files[0].ext,
status: "ready",
percentage: 0
}
this.fileObject = file;
this.fileList.push(this.fileObject);
}
}
}.bind(this));
//⽂件校验格式和⼤⼩
this.('error', function (type) { debugger
if (type == 'Q_EXCEED_SIZE_LIMIT') {
this.$message({
message: '⽂件超过指定⼤⼩',
type: 'error'
});
}
if (type == 'Q_TYPE_DENIED') {
this.$message({
jquery在线教程交流message: '⽂件格式错误，请选择⽂件',
type: 'error'
});
}
if (type == 'F_EXCEED_SIZE') {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。