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)" thread="Number (Multi-file uploads at the same time)"
filter="Function(file) (Custom upload filters)"
value="Upload files"
v-model="files" v-model="files"
@input="Function(files)" @input="Function(files)"

116
dist/example.js vendored
Unescape View File

@ -8126,8 +8126,10 @@
name: 'file', name: 'file',
postAction: './post.php', postAction: './post.php',
putAction: './put.php', putAction: './put.php',
headers: { headers: {
"X-Csrf-Token": "xxxx" "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) { inputFile: function inputFile(newFile, oldFile) {
if (newFile && !oldFile) { if (newFile && !oldFile) {
console.log('add', newFile);
var URL = window.URL || window.webkitURL; var URL = window.URL || window.webkitURL;
if (URL && URL.createObjectURL) { if (URL && URL.createObjectURL && file.type.substr(0, 6) == 'image/') {
this.$refs.upload.update(newFile, { blob: URL.createObjectURL(newFile.file) }); newFile = this.$refs.upload.update(newFile, { blob: URL.createObjectURL(newFile.file) });
} }
newFile.data.name = newFile.name; newFile.data.name = newFile.name;
} }
if (newFile && oldFile) { if (newFile && oldFile) {
console.log('update', newFile, oldFile);
if (newFile.progress != oldFile.progress) { if (newFile.active && !oldFile.active) {
console.log('progress', newFile.progress); if (newFile.size < 100 * 1024) {
newFile = this.$refs.upload.update(newFile, { error: 'size' });
}
} }
}
if (!newFile && oldFile) { if (newFile.progress != oldFile.progress) {}
console.log('remove', oldFile);
if (newFile.error && !oldFile.error) {}
if (newFile.success && !oldFile.success) {}
} }
if (!newFile && oldFile) {}
if (this.auto && !this.$refs.upload.uploaded && !this.$refs.upload.active) { if (this.auto && !this.$refs.upload.uploaded && !this.$refs.upload.active) {
this.$refs.upload.active = true; this.$refs.upload.active = true;
} }
@ -8247,6 +8249,9 @@
InputFile: _InputFile2.default InputFile: _InputFile2.default
}, },
props: { props: {
inputId: {
type: String
},
name: { name: {
type: String, type: String,
default: 'file' default: 'file'
@ -8330,8 +8335,6 @@
}; };
}, },
mounted: function mounted() { mounted: function mounted() {
var _this = this;
var input = document.createElement('input'); var input = document.createElement('input');
input.type = 'file'; input.type = 'file';
if (window.FormData && input.files) { if (window.FormData && input.files) {
@ -8344,7 +8347,7 @@
this.$parent.$forceUpdate(); this.$parent.$forceUpdate();
this.$nextTick(function () { this.$nextTick(function () {
_this.watchDrop(_this.drop); this.watchDrop(this.drop);
}); });
}, },
beforeDestroy: function beforeDestroy() { beforeDestroy: function beforeDestroy() {
@ -8387,29 +8390,40 @@
this.files = _value; this.files = _value;
} }
}, },
files: function files(_files, oldFiles) { files: function files(_files) {
var _this2 = this; var _this = this;
this.input = true;
this.$emit('input', _files);
this.$nextTick(function () {
this.input = false;
});
this._oldFiles = oldFiles;
var idMaps = {}; var idMaps = {};
var _loop = function _loop() { var _loop = function _loop() {
var file = _files[i]; var file = _files[i];
var old = _this2._maps[file.id]; var old = _this._maps[file.id];
idMaps[file.id] = true; idMaps[file.id] = true;
if (!old || old != file) { if (!old || old != file) {
_this2.$emit('input-file', file, old); _this.$emit('input-file', file, old);
_this2._maps[file.id] = file; _this._maps[file.id] = file;
if (file.active && (!old || !old.active)) { if (file.active && (!old || !old.active)) {
_this2.upload(file).then(function () { _this.$nextTick(function () {
_this2.update(file, { active: false, success: true }); var _this2 = this;
}).catch(function (e) {
_this2.update(file, { active: false, success: false, error: e.code || e.error || e.message }); 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) { } 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]; delete this._maps[id];
this.$emit('input-file', undefined, old); this.$emit('input-file', undefined, old);
} }
this.input = true;
this.$emit('input', _files); this.active && this.watchActive(true);
this.$nextTick(function () {
_this2.input = false;
});
if (this.active) {
this.watchActive(true);
}
}, },
drop: function drop(value) { drop: function drop(value) {
this.watchDrop(value); this.watchDrop(value);
@ -8605,11 +8613,15 @@
}, },
upload: function upload(file) { upload: function upload(file) {
if (!(file = this.get(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) { if (file.success) {
file = this.update(file, { error: '', success: false }); return _promise2.default.resolve(file);
} }
var extensions = this.extensions; var extensions = this.extensions;
@ -8625,18 +8637,26 @@
extensions = new RegExp('\\.(' + extensions.join('|').replace(/\./g, '\\.') + ')$', 'i'); extensions = new RegExp('\\.(' + extensions.join('|').replace(/\./g, '\\.') + ')$', 'i');
} }
if (file.name.search(extensions) == -1) { 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) { 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); file = this.filter(file) || this.get(file);
if (!file || file.error || file.success) { if (!file) {
return _promise2.default.reject(new Error(file ? file.error : 'not_exists')); 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) { if (this.mode == 'html5' && file.putAction) {
@ -10451,7 +10471,7 @@
attrs: { attrs: {
"type": "file", "type": "file",
"name": _vm.$parent.name, "name": _vm.$parent.name,
"id": _vm.$parent.id || _vm.$parent.name, "id": _vm.$parent.inputId || _vm.$parent.name,
"accept": _vm.$parent.accept, "accept": _vm.$parent.accept,
"webkitdirectory": _vm.$parent.directory && _vm.$parent.mode === 'html5', "webkitdirectory": _vm.$parent.directory && _vm.$parent.mode === 'html5',
"directory": _vm.$parent.directory && _vm.$parent.mode === 'html5', "directory": _vm.$parent.directory && _vm.$parent.mode === 'html5',
@ -10475,7 +10495,9 @@
"id": "lists" "id": "lists"
} }
}, [_c('table', [_vm._m(0), _vm._v(" "), _c('tbody', _vm._l((_vm.files), function(file, index) { }, [_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: { attrs: {
"src": file.blob, "src": file.blob,
"width": "50", "width": "50",
@ -10519,7 +10541,6 @@
}, [_c('table', [_c('tbody', [_c('tr', [_c('td', [_c('file-upload', { }, [_c('table', [_c('tbody', [_c('tr', [_c('td', [_c('file-upload', {
ref: "upload", ref: "upload",
attrs: { attrs: {
"name": _vm.name,
"post-action": _vm.postAction, "post-action": _vm.postAction,
"put-action": _vm.putAction, "put-action": _vm.putAction,
"extensions": _vm.extensions, "extensions": _vm.extensions,
@ -10531,7 +10552,6 @@
"headers": _vm.headers, "headers": _vm.headers,
"data": _vm.data, "data": _vm.data,
"drop": _vm.drop, "drop": _vm.drop,
"filter": _vm.filter,
"dropDirectory": _vm.dropDirectory "dropDirectory": _vm.dropDirectory
}, },
on: { 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 InputFile: _InputFile2.default
}, },
props: { props: {
inputId: {
type: String
},
name: { name: {
type: String, type: String,
default: 'file' default: 'file'
@ -1002,8 +1005,6 @@ return /******/ (function(modules) { // webpackBootstrap
}; };
}, },
mounted: function mounted() { mounted: function mounted() {
var _this = this;
var input = document.createElement('input'); var input = document.createElement('input');
input.type = 'file'; input.type = 'file';
if (window.FormData && input.files) { if (window.FormData && input.files) {
@ -1016,7 +1017,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.$parent.$forceUpdate(); this.$parent.$forceUpdate();
this.$nextTick(function () { this.$nextTick(function () {
_this.watchDrop(_this.drop); this.watchDrop(this.drop);
}); });
}, },
beforeDestroy: function beforeDestroy() { beforeDestroy: function beforeDestroy() {
@ -1059,29 +1060,40 @@ return /******/ (function(modules) { // webpackBootstrap
this.files = _value; this.files = _value;
} }
}, },
files: function files(_files, oldFiles) { files: function files(_files) {
var _this2 = this; var _this = this;
this.input = true;
this.$emit('input', _files);
this.$nextTick(function () {
this.input = false;
});
this._oldFiles = oldFiles;
var idMaps = {}; var idMaps = {};
var _loop = function _loop() { var _loop = function _loop() {
var file = _files[i]; var file = _files[i];
var old = _this2._maps[file.id]; var old = _this._maps[file.id];
idMaps[file.id] = true; idMaps[file.id] = true;
if (!old || old != file) { if (!old || old != file) {
_this2.$emit('input-file', file, old); _this.$emit('input-file', file, old);
_this2._maps[file.id] = file; _this._maps[file.id] = file;
if (file.active && (!old || !old.active)) { if (file.active && (!old || !old.active)) {
_this2.upload(file).then(function () { _this.$nextTick(function () {
_this2.update(file, { active: false, success: true }); var _this2 = this;
}).catch(function (e) {
_this2.update(file, { active: false, success: false, error: e.code || e.error || e.message }); 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) { } 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]; delete this._maps[id];
this.$emit('input-file', undefined, old); this.$emit('input-file', undefined, old);
} }
this.input = true;
this.$emit('input', _files); this.active && this.watchActive(true);
this.$nextTick(function () {
_this2.input = false;
});
if (this.active) {
this.watchActive(true);
}
}, },
drop: function drop(value) { drop: function drop(value) {
this.watchDrop(value); this.watchDrop(value);
@ -1277,11 +1283,15 @@ return /******/ (function(modules) { // webpackBootstrap
}, },
upload: function upload(file) { upload: function upload(file) {
if (!(file = this.get(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) { if (file.success) {
file = this.update(file, { error: '', success: false }); return _promise2.default.resolve(file);
} }
var extensions = this.extensions; var extensions = this.extensions;
@ -1297,18 +1307,26 @@ return /******/ (function(modules) { // webpackBootstrap
extensions = new RegExp('\\.(' + extensions.join('|').replace(/\./g, '\\.') + ')$', 'i'); extensions = new RegExp('\\.(' + extensions.join('|').replace(/\./g, '\\.') + ')$', 'i');
} }
if (file.name.search(extensions) == -1) { 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) { 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); file = this.filter(file) || this.get(file);
if (!file || file.error || file.success) { if (!file) {
return _promise2.default.reject(new Error(file ? file.error : 'not_exists')); 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) { if (this.mode == 'html5' && file.putAction) {
@ -3163,7 +3181,7 @@ return /******/ (function(modules) { // webpackBootstrap
attrs: { attrs: {
"type": "file", "type": "file",
"name": _vm.$parent.name, "name": _vm.$parent.name,
"id": _vm.$parent.id || _vm.$parent.name, "id": _vm.$parent.inputId || _vm.$parent.name,
"accept": _vm.$parent.accept, "accept": _vm.$parent.accept,
"webkitdirectory": _vm.$parent.directory && _vm.$parent.mode === 'html5', "webkitdirectory": _vm.$parent.directory && _vm.$parent.mode === 'html5',
"directory": _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> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(file, index) in files"> <tr v-for="(file, index) in files" :key="file.id">
<td>{{index}}</td> <td>{{index}}</td>
<td>{{file.id}}</td> <td>{{file.id}}</td>
<td v-if="file.type.substr(0, 6) == 'image/' && file.blob"> <td v-if="file.type.substr(0, 6) == 'image/' && file.blob">
@ -94,7 +94,6 @@ table th,table td {
:headers="headers" :headers="headers"
:data="data" :data="data"
:drop="drop" :drop="drop"
:filter="filter"
:dropDirectory="dropDirectory" :dropDirectory="dropDirectory"
v-model="files" v-model="files"
@input-file="inputFile" @input-file="inputFile"
@ -197,7 +196,9 @@ export default {
name: 'file', name: 'file',
postAction: './post.php', postAction: './post.php',
// postAction: 'http://upload.qiniu.com/',
putAction: './put.php', putAction: './put.php',
// putAction: '',
headers: { headers: {
"X-Csrf-Token": "xxxx", "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 // File Event
inputFile(newFile, oldFile) { inputFile(newFile, oldFile) {
if (newFile && !oldFile) { if (newFile && !oldFile) {
console.log('add', newFile) // console.log('add', newFile)
// 缩略图 // 缩略图
var URL = window.URL || window.webkitURL var URL = window.URL || window.webkitURL
if (URL && URL.createObjectURL) { if (URL && URL.createObjectURL && file.type.substr(0, 6) == 'image/') {
this.$refs.upload.update(newFile, {blob: URL.createObjectURL(newFile.file)}) newFile = this.$refs.upload.update(newFile, {blob: URL.createObjectURL(newFile.file)})
} }
// post filename // post filename
@ -271,28 +259,37 @@ export default {
} }
if (newFile && oldFile) { 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) { if (newFile.progress != oldFile.progress) {
// this.progress(newFile) // this.progress(newFile)
console.log('progress', newFile.progress) // console.log('progress', newFile.progress)
} }
if (newFile.error && !oldFile.error) { if (newFile.error && !oldFile.error) {
// this.error(newFile) // this.error(newFile)
console.log('error', newFile.error, newFile.response) // console.log('error', newFile.error, newFile.response)
} }
if (newFile.success && !oldFile.success) { if (newFile.success && !oldFile.success) {
// this.success(newFile) // this.success(newFile)
console.log('success', newFile.response) // console.log('success', newFile.response)
} }
} }
if (!newFile && oldFile) { if (!newFile && oldFile) {
// this.remove(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", "name": "vue-upload-component",
"description": "Vue.js file upload component, Support for multiple file uploads, progress, html5, html4, support ie9", "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", "author": "LianYue",
"scripts": { "scripts": {
"dev": "webpack-dev-server --inline --hot", "dev": "webpack-dev-server --inline --hot",

68
src/FileUpload.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save