xingzi
/
vue-upload-component
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix #60, Remove props.filter

Browse Source
master
git 8 years ago
parent f0972e48b3
commit 5202df85ce
10 changed files with 185 additions and 136 deletions
Show Stats Download Patch File Download Diff File

4
README.md
Unescape View File

@ -174,10 +174,6 @@ npm run build
thread="Number (Multi-file uploads at the same time)"
filter="Function(file) (Custom upload filters)"
value="Upload files"
v-model="files"
@input="Function(files)"

116
dist/example.js vendored
Unescape View File

@ -8126,8 +8126,10 @@
name: 'file',
postAction: './post.php',
putAction: './put.php',
headers: {
"X-Csrf-Token": "xxxx"
},
@ -8166,34 +8168,34 @@
};
});
},
filter: function filter(file) {
if (file.size < 100 * 1024) {
file = this.$refs.upload.update(file, { error: 'size' });
}
return file;
},
inputFile: function inputFile(newFile, oldFile) {
if (newFile && !oldFile) {
console.log('add', newFile);
var URL = window.URL || window.webkitURL;
if (URL && URL.createObjectURL) {
this.$refs.upload.update(newFile, { blob: URL.createObjectURL(newFile.file) });
if (URL && URL.createObjectURL && file.type.substr(0, 6) == 'image/') {
newFile = this.$refs.upload.update(newFile, { blob: URL.createObjectURL(newFile.file) });
}
newFile.data.name = newFile.name;
}
if (newFile && oldFile) {
console.log('update', newFile, oldFile);
if (newFile.progress != oldFile.progress) {
console.log('progress', newFile.progress);
if (newFile.active && !oldFile.active) {
if (newFile.size < 100 * 1024) {
newFile = this.$refs.upload.update(newFile, { error: 'size' });
}
}
}
if (!newFile && oldFile) {
console.log('remove', oldFile);
if (newFile.progress != oldFile.progress) {}
if (newFile.error && !oldFile.error) {}
if (newFile.success && !oldFile.success) {}
}
if (!newFile && oldFile) {}
if (this.auto && !this.$refs.upload.uploaded && !this.$refs.upload.active) {
this.$refs.upload.active = true;
}
@ -8247,6 +8249,9 @@
InputFile: _InputFile2.default
},
props: {
inputId: {
type: String
},
name: {
type: String,
default: 'file'
@ -8330,8 +8335,6 @@
};
},
mounted: function mounted() {
var _this = this;
var input = document.createElement('input');
input.type = 'file';
if (window.FormData && input.files) {
@ -8344,7 +8347,7 @@
this.$parent.$forceUpdate();
this.$nextTick(function () {
_this.watchDrop(_this.drop);
this.watchDrop(this.drop);
});
},
beforeDestroy: function beforeDestroy() {
@ -8387,29 +8390,40 @@
this.files = _value;
}
},
files: function files(_files, oldFiles) {
var _this2 = this;
files: function files(_files) {
var _this = this;
this.input = true;
this.$emit('input', _files);
this.$nextTick(function () {
this.input = false;
});
this._oldFiles = oldFiles;
var idMaps = {};
var _loop = function _loop() {
var file = _files[i];
var old = _this2._maps[file.id];
var old = _this._maps[file.id];
idMaps[file.id] = true;
if (!old || old != file) {
_this2.$emit('input-file', file, old);
_this2._maps[file.id] = file;
_this.$emit('input-file', file, old);
_this._maps[file.id] = file;
if (file.active && (!old || !old.active)) {
_this2.upload(file).then(function () {
_this2.update(file, { active: false, success: true });
}).catch(function (e) {
_this2.update(file, { active: false, success: false, error: e.code || e.error || e.message });
_this.$nextTick(function () {
var _this2 = this;
setTimeout(function () {
_this2.upload(file).then(function () {
_this2.update(file, { active: false, success: true });
}).catch(function (e) {
_this2.update(file, { active: false, success: false, error: e.code || e.error || e.message || e });
});
}, 64);
});
} else if (!file.active && !file.error && !file.success && old && old.active) {
_this2.update(file, { error: 'abort' });
_this.update(file, { error: 'abort' });
}
}
};
@ -8426,14 +8440,8 @@
delete this._maps[id];
this.$emit('input-file', undefined, old);
}
this.input = true;
this.$emit('input', _files);
this.$nextTick(function () {
_this2.input = false;
});
if (this.active) {
this.watchActive(true);
}
this.active && this.watchActive(true);
},
drop: function drop(value) {
this.watchDrop(value);
@ -8605,11 +8613,15 @@
},
upload: function upload(file) {
if (!(file = this.get(file))) {
return _promise2.default.reject(new Error('not_exists'));
return _promise2.default.reject('not_exists');
}
if (file.error) {
return _promise2.default.reject(file.error);
}
if (file.error || file.success) {
file = this.update(file, { error: '', success: false });
if (file.success) {
return _promise2.default.resolve(file);
}
var extensions = this.extensions;
@ -8625,18 +8637,26 @@
extensions = new RegExp('\\.(' + extensions.join('|').replace(/\./g, '\\.') + ')$', 'i');
}
if (file.name.search(extensions) == -1) {
return _promise2.default.reject(new Error('extension'));
return _promise2.default.reject('extension');
}
}
if (this.size > 0 && file.size >= 0 && file.size > this.size) {
return _promise2.default.reject(new Error('size'));
return _promise2.default.reject('size');
}
file = this.filter(file) || this.get(file);
if (!file || file.error || file.success) {
return _promise2.default.reject(new Error(file ? file.error : 'not_exists'));
if (!file) {
return _promise2.default.reject('not_exists');
}
if (file.error) {
return _promise2.default.reject(file.error);
}
if (file.success) {
return _promise2.default.resolve(file);
}
if (this.mode == 'html5' && file.putAction) {
@ -10451,7 +10471,7 @@
attrs: {
"type": "file",
"name": _vm.$parent.name,
"id": _vm.$parent.id || _vm.$parent.name,
"id": _vm.$parent.inputId || _vm.$parent.name,
"accept": _vm.$parent.accept,
"webkitdirectory": _vm.$parent.directory && _vm.$parent.mode === 'html5',
"directory": _vm.$parent.directory && _vm.$parent.mode === 'html5',
@ -10475,7 +10495,9 @@
"id": "lists"
}
}, [_c('table', [_vm._m(0), _vm._v(" "), _c('tbody', _vm._l((_vm.files), function(file, index) {
return _c('tr', [_c('td', [_vm._v(_vm._s(index))]), _vm._v(" "), _c('td', [_vm._v(_vm._s(file.id))]), _vm._v(" "), (file.type.substr(0, 6) == 'image/' && file.blob) ? _c('td', [_c('img', {
return _c('tr', {
key: file.id
}, [_c('td', [_vm._v(_vm._s(index))]), _vm._v(" "), _c('td', [_vm._v(_vm._s(file.id))]), _vm._v(" "), (file.type.substr(0, 6) == 'image/' && file.blob) ? _c('td', [_c('img', {
attrs: {
"src": file.blob,
"width": "50",
@ -10519,7 +10541,6 @@
}, [_c('table', [_c('tbody', [_c('tr', [_c('td', [_c('file-upload', {
ref: "upload",
attrs: {
"name": _vm.name,
"post-action": _vm.postAction,
"put-action": _vm.putAction,
"extensions": _vm.extensions,
@ -10531,7 +10552,6 @@
"headers": _vm.headers,
"data": _vm.data,
"drop": _vm.drop,
"filter": _vm.filter,
"dropDirectory": _vm.dropDirectory
},
on: {

2
dist/example.js.map vendored
View File

File diff suppressed because one or more lines are too long

78
dist/vue-upload-component.js vendored
Unescape View File

@ -919,6 +919,9 @@ return /******/ (function(modules) { // webpackBootstrap
InputFile: _InputFile2.default
},
props: {
inputId: {
type: String
},
name: {
type: String,
default: 'file'
@ -1002,8 +1005,6 @@ return /******/ (function(modules) { // webpackBootstrap
};
},
mounted: function mounted() {
var _this = this;
var input = document.createElement('input');
input.type = 'file';
if (window.FormData && input.files) {
@ -1016,7 +1017,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.$parent.$forceUpdate();
this.$nextTick(function () {
_this.watchDrop(_this.drop);
this.watchDrop(this.drop);
});
},
beforeDestroy: function beforeDestroy() {
@ -1059,29 +1060,40 @@ return /******/ (function(modules) { // webpackBootstrap
this.files = _value;
}
},
files: function files(_files, oldFiles) {
var _this2 = this;
files: function files(_files) {
var _this = this;
this.input = true;
this.$emit('input', _files);
this.$nextTick(function () {
this.input = false;
});
this._oldFiles = oldFiles;
var idMaps = {};
var _loop = function _loop() {
var file = _files[i];
var old = _this2._maps[file.id];
var old = _this._maps[file.id];
idMaps[file.id] = true;
if (!old || old != file) {
_this2.$emit('input-file', file, old);
_this2._maps[file.id] = file;
_this.$emit('input-file', file, old);
_this._maps[file.id] = file;
if (file.active && (!old || !old.active)) {
_this2.upload(file).then(function () {
_this2.update(file, { active: false, success: true });
}).catch(function (e) {
_this2.update(file, { active: false, success: false, error: e.code || e.error || e.message });
_this.$nextTick(function () {
var _this2 = this;
setTimeout(function () {
_this2.upload(file).then(function () {
_this2.update(file, { active: false, success: true });
}).catch(function (e) {
_this2.update(file, { active: false, success: false, error: e.code || e.error || e.message || e });
});
}, 64);
});
} else if (!file.active && !file.error && !file.success && old && old.active) {
_this2.update(file, { error: 'abort' });
_this.update(file, { error: 'abort' });
}
}
};
@ -1098,14 +1110,8 @@ return /******/ (function(modules) { // webpackBootstrap
delete this._maps[id];
this.$emit('input-file', undefined, old);
}
this.input = true;
this.$emit('input', _files);
this.$nextTick(function () {
_this2.input = false;
});
if (this.active) {
this.watchActive(true);
}
this.active && this.watchActive(true);
},
drop: function drop(value) {
this.watchDrop(value);
@ -1277,11 +1283,15 @@ return /******/ (function(modules) { // webpackBootstrap
},
upload: function upload(file) {
if (!(file = this.get(file))) {
return _promise2.default.reject(new Error('not_exists'));
return _promise2.default.reject('not_exists');
}
if (file.error) {
return _promise2.default.reject(file.error);
}
if (file.error || file.success) {
file = this.update(file, { error: '', success: false });
if (file.success) {
return _promise2.default.resolve(file);
}
var extensions = this.extensions;
@ -1297,18 +1307,26 @@ return /******/ (function(modules) { // webpackBootstrap
extensions = new RegExp('\\.(' + extensions.join('|').replace(/\./g, '\\.') + ')$', 'i');
}
if (file.name.search(extensions) == -1) {
return _promise2.default.reject(new Error('extension'));
return _promise2.default.reject('extension');
}
}
if (this.size > 0 && file.size >= 0 && file.size > this.size) {
return _promise2.default.reject(new Error('size'));
return _promise2.default.reject('size');
}
file = this.filter(file) || this.get(file);
if (!file || file.error || file.success) {
return _promise2.default.reject(new Error(file ? file.error : 'not_exists'));
if (!file) {
return _promise2.default.reject('not_exists');
}
if (file.error) {
return _promise2.default.reject(file.error);
}
if (file.success) {
return _promise2.default.resolve(file);
}
if (this.mode == 'html5' && file.putAction) {
@ -3163,7 +3181,7 @@ return /******/ (function(modules) { // webpackBootstrap
attrs: {
"type": "file",
"name": _vm.$parent.name,
"id": _vm.$parent.id || _vm.$parent.name,
"id": _vm.$parent.inputId || _vm.$parent.name,
"accept": _vm.$parent.accept,
"webkitdirectory": _vm.$parent.directory && _vm.$parent.mode === 'html5',
"directory": _vm.$parent.directory && _vm.$parent.mode === 'html5',

2
dist/vue-upload-component.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
dist/vue-upload-component.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/vue-upload-component.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

43
example/Home.vue
Unescape View File

@ -56,7 +56,7 @@ table th,table td {
</tr>
</thead>
<tbody>
<tr v-for="(file, index) in files">
<tr v-for="(file, index) in files" :key="file.id">
<td>{{index}}</td>
<td>{{file.id}}</td>
<td v-if="file.type.substr(0, 6) == 'image/' && file.blob">
@ -94,7 +94,6 @@ table th,table td {
:headers="headers"
:data="data"
:drop="drop"
:filter="filter"
:dropDirectory="dropDirectory"
v-model="files"
@input-file="inputFile"
@ -197,7 +196,9 @@ export default {
name: 'file',
postAction: './post.php',
// postAction: 'http://upload.qiniu.com/',
putAction: './put.php',
// putAction: '',
headers: {
"X-Csrf-Token": "xxxx",
@ -238,32 +239,19 @@ export default {
})
},
// Custom filter
filter(file) {
// beforeSend
// min size
if (file.size < 100 * 1024) {
file = this.$refs.upload.update(file, {error: 'size'})
}
return file
},
// File Event
inputFile(newFile, oldFile) {
if (newFile && !oldFile) {
console.log('add', newFile)
// console.log('add', newFile)
// 缩略图
var URL = window.URL || window.webkitURL
if (URL && URL.createObjectURL) {
this.$refs.upload.update(newFile, {blob: URL.createObjectURL(newFile.file)})
if (URL && URL.createObjectURL && file.type.substr(0, 6) == 'image/') {
newFile = this.$refs.upload.update(newFile, {blob: URL.createObjectURL(newFile.file)})
}
// post filename
@ -271,28 +259,37 @@ export default {
}
if (newFile && oldFile) {
console.log('update', newFile, oldFile)
// console.log('update', newFile, oldFile)
if (newFile.active && !oldFile.active) {
// this.beforeSend(newFile)
// min size
if (newFile.size < 100 * 1024) {
newFile = this.$refs.upload.update(newFile, {error: 'size'})
}
}
if (newFile.progress != oldFile.progress) {
// this.progress(newFile)
console.log('progress', newFile.progress)
// console.log('progress', newFile.progress)
}
if (newFile.error && !oldFile.error) {
// this.error(newFile)
console.log('error', newFile.error, newFile.response)
// console.log('error', newFile.error, newFile.response)
}
if (newFile.success && !oldFile.success) {
// this.success(newFile)
console.log('success', newFile.response)
// console.log('success', newFile.response)
}
}
if (!newFile && oldFile) {
// this.remove(oldFile)
console.log('remove', oldFile)
// console.log('remove', oldFile)
}

2
package.json
Unescape View File

@ -1,7 +1,7 @@
{
"name": "vue-upload-component",
"description": "Vue.js file upload component, Support for multiple file uploads, progress, html5, html4, support ie9",
"version": "2.4.0-beta.6",
"version": "2.4.0-beta.8",
"author": "LianYue",
"scripts": {
"dev": "webpack-dev-server --inline --hot",

68
src/FileUpload.vue
Unescape View File

@ -138,7 +138,7 @@ export default {
this._maps = {}
this.$parent.$forceUpdate()
this.$nextTick(() => {
this.$nextTick(function() {
this.watchDrop(this.drop)
})
},
@ -187,8 +187,13 @@ export default {
}
},
files(files, oldFiles) {
this._oldFiles = oldFiles
files(files) {
this.input = true
this.$emit('input', files)
this.$nextTick(function() {
this.input = false
})
var idMaps = {}
for (var i = 0; i < files.length; i++) {
let file = files[i]
@ -200,10 +205,14 @@ export default {
this.$emit('input-file', file, old)
this._maps[file.id] = file
if (file.active && (!old || !old.active)) {
this.upload(file).then(() => {
this.update(file, {active: false, success: true})
}).catch((e) => {
this.update(file, {active: false, success: false, error: e.code || e.error || e.message})
this.$nextTick(function() {
setTimeout(()=> {
this.upload(file).then(() => {
this.update(file, {active: false, success: true})
}).catch((e) => {
this.update(file, {active: false, success: false, error: e.code || e.error || e.message || e})
})
}, 64)
})
} else if (!file.active && !file.error && !file.success && old && old.active) {
this.update(file, {error: 'abort'})
@ -220,14 +229,8 @@ export default {
delete this._maps[id]
this.$emit('input-file', undefined, old)
}
this.input = true
this.$emit('input', files)
this.$nextTick(() => {
this.input = false
})
if (this.active) {
this.watchActive(true)
}
this.active && this.watchActive(true)
},
drop(value) {
this.watchDrop(value)
@ -426,13 +429,19 @@ export default {
// 上传
upload(file) {
// 被删除
if (!(file = this.get(file))) {
return Promise.reject(new Error('not_exists'))
return Promise.reject('not_exists')
}
// 重置上传数据
if (file.error || file.success) {
file = this.update(file, {error: '', success: false})
// 有错误直接响应
if (file.error) {
return Promise.reject(file.error)
}
// 已完成直接响应
if (file.success) {
return Promise.resolve(file)
}
// 后缀
@ -445,25 +454,34 @@ export default {
extensions = new RegExp('\\.('+ extensions.join('|').replace(/\./g, '\\.') +')$', 'i')
}
if (file.name.search(extensions) == -1) {
return Promise.reject(new Error('extension'))
return Promise.reject('extension')
}
}
// 大小
if (this.size > 0 && file.size >= 0 && file.size > this.size) {
return Promise.reject(new Error('size'))
return Promise.reject('size')
}
// 过滤器
file = this.filter(file) || this.get(file)
// 被过滤掉
if (!file || file.error || file.success) {
return Promise.reject(new Error(file ? file.error : 'not_exists'))
if (!file) {
return Promise.reject('not_exists')
}
// 错误相应
if (file.error) {
return Promise.reject(file.error)
}
// 直接相应
if (file.success) {
return Promise.resolve(file)
}
if (this.mode == 'html5' && file.putAction) {
return this.uploadPut(file)
} else if (this.mode == 'html5') {

Write Preview
Loading…
Cancel
Save