T_fileupload NPM

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  tengqingya@yeah.net

Try the source

[https://github.com/tengqingya/myFirstVue](https://github.com/tengqingya/myFirstVue)

How to use?

npm install t_fileupload

important 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/vue@2.2.6'></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)

@infinitebrahmanuniverse/nolb-t_@everything-registry/sub-chunk-2870

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago