vue-upload-component

18 KiB

Raw Blame History

安装

npm 方式安装

npm install vue-upload-component --save

const VueUploadComponent = require('vue-upload-component')
Vue.component('file-upload', VueUploadComponent)

html 方式安装

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-upload-component"></script>
<script>
Vue.component('file-upload', VueUploadComponent)
</script>

使用

例子

https://lian-yue.github.io/vue-upload-component/

例子源代码

https://github.com/lian-yue/vue-upload-component/tree/2.0/example

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue-upload-component Test</title>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-upload-component"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="file in files">{{file.name}} - Error: {{file.error}}, Success: {{file.success}}</li>
  </ul>
  <file-upload
    ref="upload"
    v-model="files"
    post-action="/post.method"
    put-action="/put.method"
    @input-file="inputFile"
    @input-filter="inputFilter"
  >
  Upload file
  </file-upload>
  <button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">Start upload</button>
  <button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">Stop upload</button>
</div>
<script>
new Vue({
  el: '#app',
  data: function() {
    return {
      files: []
    }
  },
  components: {
    FileUpload: VueUploadComponent
  },
  methods: {
    /**
     * 已更新
     * @param  Object|undefined   newFile 新的 File 对象 只读
     * @param  Object|undefined   oldFile 旧的 File 对象 只读
     * @return undefined
     */
    inputFile: function(newFile, oldFile) {
      if (newFile && oldFile && !newFile.active && oldFile.active) {
        // 取得 响应数据
        console.log('response', newFile.response)
        if (newFile.xhr) {
          //  取响应状态码 需要 html5 支持
          console.log('status', newFile.xhr.status)
        }
      }
    },

    /**
     * 预处理
     * @param  Object|undefined   newFile 新的 File 对象 可以直接修改
     * @param  Object|undefined   oldFile 旧的 File 对象 只读
     * @param  Function           prevent 阻止修改
     * @return undefined
     */
    inputFilter: function(newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 过滤 非 图片文件
        if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.file)) {
          return prevent()
        }
      }

      // 创建 blob 字段
      newFile.blob = ''
      let URL = window.URL || window.webkitURL
      if (URL && URL.createObjectURL) {
        newFile.blob = URL.createObjectURL(newFile.file)
      }
    }
  }
});
</script>
</body>
</html>

SSR (服务器同构)

import FileUpload from 'vue-upload-component/src'

webpack.config.js

const nodeExternals = require('webpack-node-externals');
{
  //.....
  externals: [
    nodeExternals({whitelist:[/^vue-upload-component/]})
  ]
  //.....
}

Props 参数

inputId

类型： String
默认值： this.name
描述： input标签的 id 属性

用法：

<file-upload inputId="file2"></file-upload>
<!--输出-->
<input id="file2" />

name

类型： String
默认值： file
描述： input标签的 name 属性

用法：

<file-upload name="file"></file-upload>
<!--输出-->
<input name="file" />

post-action

类型： String
默认值： undefined
描述： POST 请求的上传URL

用法：

<file-upload put-action="/upload/put.php"></file-upload>

put-action

类型： String
默认值： undefined
描述： PUT 请求的上传URL put-action 不为空请优先 PUT 请求需要HTML5支持
用法：
```
<file-upload put-action="/upload/put.php"></file-upload>
```
PUT 请求的上传地址地址不为空请优先 PUT 请求

headers

类型： Object
默认值： {}
描述： 自定义 HTTP Header 需要HTML5支持

用法：

<file-upload :headers="{'X-Token-CSRF': 'code'}"></file-upload>

data

类型： Object
默认值： {}
描述： POST 请求: 附加请求的 body PUT 请求: 附加请求的 query

用法：

<file-upload :data="{'access_token': 'access_token'}"></file-upload>

value, v-model

类型： Array<Object>
默认值： []
描述： 文件列表 为了防止不可预知的错误，不可直接修改 files，请使用 add, update, remove 方法修改
文件对象信息

用法：

<file-upload :value="files" @input="updatetValue"></file-upload>
<file-upload v-model="files"></file-upload>

accept

类型： String
默认值： undefined
描述： 表单的accept属性, MIME type 需要HTML5支持

用法：

<file-upload accept="image/png,image/gif,image/jpeg,image/webp"></file-upload>
<file-upload accept="image/*"></file-upload>

multiple

类型： Boolean
默认值： false
描述： 文件表单的 multiple 属性是否允许选择多个文件如果是 false files 里面最多只有一个文件多的会自动删除

用法：

<file-upload :multiple="true"></file-upload>

extensions

类型： Array | String | RegExp
默认值： undefined
描述： 允许上传的文件后缀

用法：

<file-upload extensions="jpg,gif,png,webp"></file-upload>
<file-upload :extensions="['jpg', 'gif', 'png', 'webp']"></file-upload>
<file-upload :extensions="/\.(gif|jpe?g|png|webp)$/i"></file-upload>

size

类型： Number
默认值： 0
描述： 允许上传的最大字节

用法：

<file-upload :size="1024 * 1024"></file-upload>

timeout

类型： Number
默认值： 0
描述： 上传超时时间毫秒

用法：

<file-upload :timeout="600 * 1000"></file-upload>

thread

类型： Number
默认值： 1
描述： 同时并发上传的文件数量线程数需要HTML5支持

用法：

<file-upload :thread="3"></file-upload>

drop

类型： Boolean | Element | CSS selector
默认值： false
描述： 拖拽上传如果设置成 true 则读取父组件作为容器需要HTML5支持

用法：

<file-upload :drop="true"></file-upload>
<file-upload drop=".drop-container"></file-upload>
<file-upload :drop="$el"></file-upload>

drop-directory

类型： Boolean
默认值： true
描述： 是否开启拖拽目录如果设置成 false 则过滤掉目录

用法：

<file-upload :drop-directory="false"></file-upload>

事件

@input

参数：
- files: Array<Object>
描述： 文件被改变触发的方法默认用于v-model绑定

用法：

<file-upload :value="files" @input="updatetValue"></file-upload>
<file-upload v-model="files"></file-upload>

{
  data() {
    return {
      files: []
    }
  },
  methods: {
    updatetValue(value) {
      this.files = value
    }
  }
}

@input-filter

参数：
- newFile: Object | undefined 读写
- oldFile: Object | undefined 只读
- prevent: Function
描述： 添加，更新，移除前过滤器事件内不可使用 update, add, remove, clear 方法事件内可修改 newFile 对象

用法：

<ul>
  <li v-for="file in files">
    <img :src="file.blob" width="50" height="50" />
  </li>
</ul>
<file-upload :value="files" @input-filter="inputFilter"></file-upload>

{
  data() {
    return {
      files: []
    }
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 添加文件

        // 过滤非图片文件
        // 不会添加到 files 去
        if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.file)) {
          return prevent()
          return
        }


        // 创建 `blob` 字段 用于缩略图预览
        newFile.blob = ''
        let URL = window.URL || window.webkitURL
        if (URL && URL.createObjectURL) {
          newFile.blob = URL.createObjectURL(newFile.file)
        }
      }

      if (newFile && oldFile) {
        // 更新文件

        // 增加版本号
        if (!newFile.version) {
          newFile.version = 0
        }
        newFile.version++
      }

      if (!newFile && oldFile) {
        // 移除文件

        // 拒绝删除文件
        // return prevent()
      }
    }
  }
}

@input-file

参数：
- newFile: Object | undefined 读写
- oldFile: Object | undefined 只读
描述： 添加，更新，移除后事件内可使用 update, add, remove, clear 方法事件内不可修改 newFile 对象事件内不可修改 oldFile 对象

用法：

<file-upload ref="upload" :value="files" @input-file="inputFile"></file-upload>

{
  data() {
    return {
      files: []
    }
  },
  methods: {
    inputFile(newFile, oldFile) {
      if (newFile && !oldFile) {
        // 添加文件

        // 自动上传
        if (!this.$refs.upload.active) {
          this.$refs.upload.active = true
        }
      }

      if (newFile && oldFile) {
        // 更新文件

        // 上传进度
        if (newFile.progress !== oldFile.progress) {
          console.log('progress', newFile.progress, newFile)
        }

        // 上传错误
        if (newFile.error !== oldFile.error) {
          console.log('error', newFile.error, newFile)
        }

        // 上传成功
        if (newFile.success !== oldFile.success) {
          console.log('success', newFile.success, newFile)
        }
      }

      if (!newFile && oldFile) {
        // 删除文件

        // 自动删除 服务器上的文件
        if (oldFile.success && oldFile.response.id) {
          // $.ajax({  
          //   type: 'DELETE',  
          //   url: '/file/delete?id=' + oldFile.response.id,
          // });
        }
      }
    }
  }
}

Methods 方法

get

参数：
- id: Object | String 文件对象 | 文件id
返回值： Object | Boolean 存在返回文件对象否则返回false
描述： 使用id获得某个文件对象

add

参数：
- files: Object | Array<Object> | window.File 文件对象 | 文件数组(多个) | window.File 对象
- start: Boolean 是否从开始位置插入
返回值： Object | Array<Object> | Boolean 传入的是数组返回数组否则对象或false
描述： 添加一个或多个文件

用法：

<ul>
  <li v-for="file in files">
    <span>{{file.name}}</span>
  </li>
</ul>
<file-upload v-model="files"></file-upload>
<button type="button" @click.prevent="addText">添加一个文件</button>

{
  data() {
    return {
      files: []
    }
  },
  methods: {
    addText() {
      let file = new File(['foo'], 'foo.txt', {
        type: "text/plain",
      })
      this.$refs.upload.add(file)
    }
  }
}

update

参数：
- id: Object | String 文件对象 | 文件id
- data: Object 更新的数据对象
返回值： Object | Boolean 成功返回newFile 失败返回 false
描述： 更新某个文件对象

用法：

<ul>
  <li v-for="file in files">
    <span>{{file.name}}</span>
    <button v-show="file.active" type="button" @click.prevent="abort(file)">停止</button>
  </li>
</ul>
<file-upload v-model="files"></file-upload>

{
  data() {
    return {
      files: []
    }
  },
  methods: {
    abort(file) {
      this.$refs.upload.update(file, {active: false})

      // or
      // this.$refs.upload.update(file, {error: 'abort'})
    }
  }
}

remove

参数：
- id: Object | String 文件对象 | 文件id
返回值： Object | Boolean 成功返回 oldFile 失败返回 false
描述： 移除某个文件对象

用法：

<ul>
  <li v-for="file in files">
    <span>{{file.name}}</span>
    <button type="button" @click.prevent="remove(file)">删除</button>
  </li>
</ul>
<file-upload v-model="files"></file-upload>

{
  data() {
    return {
      files: []
    }
  },
  methods: {
    remove(file) {
      this.$refs.upload.remove(file)
    }
  }
}

clear

返回值： Boolean 总是返回 true
用法： 清空文件列表

组件 Data

features

类型： Object
只读： true
默认值： {html5: true, directory: false, drag: false}
描述： 用于判断浏览器支持的特性

用法：

<app>
  <file-upload ref="upload"></file-upload>
  <span v-show="$refs.upload && $refs.upload.features.drag">支持拖拽上传</span>
  <span v-show="$refs.upload && $refs.upload.features.directory">支持文件夹上传</span>
  <span v-show="$refs.upload && $refs.upload.features.html5">支持HTML5</span>
</app>

active

类型： Boolean
只读： false
默认值： false
描述： 激活或停止上传

用法：

<app>
  <file-upload ref="upload"></file-upload>
  <span v-if="!$refs.upload || !$refs.upload.active" @click="$refs.upload.active = true">开始上传</span>
  <span v-else @click="$refs.upload.active = false">停止上传</span>
</app>

dropActive

类型： Boolean
只读： true
默认值： false
描述： 是否正在拖拽

用法：

<app>
  <file-upload ref="upload" :drop="true"></file-upload>
  <span v-show="$refs.upload && $refs.upload.dropActive">拖拽到这里上传<span>
</app>

是否正在拖拽中

uploaded

类型： Boolean
只读： true
默认值： true
描述： 是否全部已上传

用法：

<app>
  <file-upload ref="upload"></file-upload>
  <span v-show="$refs.upload && $refs.upload.uploaded">全部文件已上传完毕<span>
</app>

File

文件对象在input-filter事件外修改请使用 $refs.upload.update(file, data Object)

id

类型： String | Number
只读： true
默认值： Math.random().toString(36).substr(2)
描述： 文件id

size

类型： Number
只读： false
默认值： -1
描述： 文件大小

需要HTML5支持

name

类型： String
只读： false
默认值： empty
描述： 文件名

格式： directory/filename.gif filename.gif

type

类型： String
只读： false
默认值：
描述： MIME类型

格式： image/gif image/png text/html

需要HTML5支持

active

类型： Boolean
只读： false
默认值： false
描述： 激活或终止上传

true = 上传 false = 停止

error

类型： String
只读： false
默认值：
描述： 上传失败错误代码

内置 size, extension, timeout, abort, network, server, denied

success

类型： Boolean
只读： false
默认值： false
描述： 是否上传成功

putAction

类型： String
只读： false
默认值： this.putAction
描述： 自定义当前文件 PUT 地址

postAction

类型： String
只读： false
默认值： this.postAction
描述： 自定义当前文件 POST 地址

headers

类型： Object
只读： false
默认值： this.headers
描述： 自定义当前文件 HTTP Header

data

类型： Object
只读： false
默认值： this.data
描述： 自定义当前文件 body 或 query 附加内容

timeout

类型： Number
只读： false
默认值： 0
描述： 自定义当前单个文件的上传超时时间

response

类型： Object | String
只读： false
默认值： {}
描述： 响应的数据

progress

类型： String
只读： true
默认值： 0.00
描述： 上传进度

speed

类型： Number
只读： true
默认值： 0
描述： 每秒的上传速度

xhr

类型： XMLHttpRequest
只读： true
默认值： undefined
描述： HTML5 上传 XMLHttpRequest 对象

iframe

类型： Element
只读： true
默认值： undefined
描述： HTML4 上传 iframe 元素

18 KiB Raw Blame History

安装

npm 方式安装

html 方式安装

使用

例子

例子源代码

html

SSR (服务器同构)

webpack.config.js

Props 参数

inputId

name

post-action

put-action

headers

data

value, v-model

accept

multiple

directory

extensions

size

timeout

thread

drop

drop-directory

事件

@input

@input-filter

@input-file

Methods 方法

get

add

update

remove

clear

组件 Data

features

active

dropActive

uploaded

File

id

size

name

type

active

error

success

putAction

postAction

headers

data

timeout

response

progress

speed

xhr

iframe

18 KiB

Raw Blame History