vue具有预览功能的精美文件上传组件–File Agent

vue具有预览功能的精美文件上传组件–File Agent
插件名称 File Agent
发布时间 2020年4月28日
插件作者 safrazik

File Agent是Vue.js的功能强大,响应迅速,可自定义的拖放式文件上传器组件。

安装和下载:

# NPM
$ npm install vue-file-agent --save

更多功能:

  • 文件预览:图像,视频,音频。
  • 文件类型图标。
  • 平滑过渡。
  • 服务器端验证和错误处理。
  • 支持PHP和Node.js。
  • 以及更多。

用法:

安装并导入Vue文件代理组件。

import Vue from 'vue';
import VueFileAgent from 'vue-file-agent';
import VueFileAgentStyles from 'vue-file-agent/dist/vue-file-agent.css';

注册组件,我们就可以开始了。

Vue.use(VueFileAgent);

创建一个新的文件上传组件。

<template>
  <VueFileAgent
    :uploadUrl="/path/to/uploadUrl"
    v-model="filesData"
  ></VueFileAgent>
</template>
export default {
  data(){
    return {
    };
  }
}

所有可能的props来配置文件上传器。

  • uploadUrl
  • uploadHeaders
  • multiple:支持多个文件?
  • deletable:可删除?
  • read
  • accept
  • value
  • progress
  • helpText
  • maxSize
  • maxFiles
  • errorText
  • meta
  • compact
  • thumbnailSize
  • theme