t_fileupload
v1.0.16
Published
vue fileupload by element ui with vue2.0+;usage: npm install t_fileupload;
Readme
t_fileupload
element ui upload Component
twice packaging
<img src="http://img.blog.csdn.net/20170516171221723?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3RhcnJ5bmluZ2xvbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast"/>
[demo](http://img.blog.csdn.net/20170516171221723?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3RhcnJ5bmluZ2xvbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) : http://img.blog.csdn.net/20170516171221723?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3RhcnJ5bmluZ2xvbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
Q&A:author email [email protected]Try the source
[https://github.com/tengqingya/myFirstVue](https://github.com/tengqingya/myFirstVue)How to use?
npm install t_fileuploadimportant codes
<template>
<fileupload @fileadd="fileAdd" @filedel="fileDel" :files="fileShow" :num="fileNum" :action="action"></fileupload>
</template>
<script>
fileAdd:function (file) {
this.fileList.push(file)
},
fileDel:function (file) {
removeArrByValue(this.fileList,file)
},
fileList:[],
fileShow:[],
fileNum:3,
action:"/manage/upload/pic"
const removeArrByValue = (arr, val)=> {
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}
const rowObj = function (a) {
this.url = a
}
const rowFile = function (...a) {
var rowFile={}
rowFile.status='ready'
rowFile.name='name'
rowFile.size=1
rowFile.percentage=0
rowFile.uid=1
rowFile.raw=new rowObj(a[0])
return rowFile;
}
//show images without upload just use a url
this.fileList = ["http://image.meizu.com/image/ebook/823df1d1320742efabebe46565518abaz/auto"]
this.fileShow = [new rowFile("http://image.meizu.com/image/ebook/823df1d1320742efabebe46565518abaz/auto")]
</script>Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>t_fileupload</title>
</head>
<body>
<script src='https://unpkg.com/[email protected]'></script>
<script src="../dist/index_fileupload.min.js"></script>
<a href="https://github.com/tengqingya" class="github-corner" aria-label="View source on Github">
</a>
<div id="app">
<template>
<fileupload @fileadd="fileAdd" @filedel="fileDel" :files="fileShow" :num="fileNum" :action="action"></fileupload>
<!--action is your file upload address!!!-->
</template>
</div>
<script>
// import fileupload from 't_fileupload/dist/index_fileupload.min.js'
// import fileupload from 't_fileupload'
const removeArrByValue = (arr, val)=> {
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}
var Main = {
name: 'test',
data() {
return {
fileList:[],
fileShow:[],
fileNum:3,
action:"/manage/upload/pic"
}
},
computed: {
},
// components: {fileupload},
methods: {
fileAdd:function (file) {
this.fileList.push(file)
},
fileDel:function (file) {
removeArrByValue(this.fileList,file)
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body>
</html>explain
1. fileadd:method that u add a file and uploaded.
2. filedel:method that u delete a file.
3. files:files that u what to show the first time before uploading a
file(use the image url,such
as:http://image.***.com/image/ebook/823df1d1320742efabebe46565518abaz/auto)
4. num:limit the upload file numbers,default 1.
5. action:the upload url from server(JAVA/NODE SERVER)