vue-filepond

vue-filepond 介绍

vue FilePond是FilePond的一个方便的适配器组件，它是一个JavaScript库，可以上传你投入的任何内容，优化图像以加快上传速度，并提供出色的，可访问的，如丝般顺畅的用户体验。

核心功能

接受目录，文件，blob，本地URL，远程URL和数据URI。

删除文件，选择文件系统，复制和粘贴文件，或使用API​​添加文件。

使用AJAX进行异步上传，或将文件编码为base64数据并沿表单发送。

可访问，使用VoiceOver和JAWS等AT软件进行测试，可通过键盘导航。

图像优化，自动调整图像大小，裁剪和修复EXIF方向。

响应式，自动扩展到可用空间，可在移动和桌面设备上使用。

安装

npm install vue-filepond filepond --save

用法

<template>

<div id="app">

<file-pond

name="test"

ref="pond"

label-idle="Drop files here..."

v-bind:allow-multiple="true"

accepted-file-types="image/jpeg,image/png"

server="/api"

v-bind:files="myFiles"

v-on:init="handleFilePondInit"/>

</div>

</template>

<script>

// Import vue FilePond

import vueFilePond from 'vue-filepond';

// Import FilePond styles

import 'filepond/dist/filepond.min.css';

// Import FilePond plugins

// Please note that you need to install these plugins separately

// Import image preview plugin styles

import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

// Import image preview and file type validation plugins

import FilePondpluginFileValidateType from 'filepond-plugin-file-validate-type';

import FilePondpluginImagePreview from 'filepond-plugin-image-preview';

// Create component

const FilePond = vueFilePond(FilePondpluginFileValidateType,FilePondpluginImagePreview);

export default {

name: 'app',

data: function() {

return { myFiles: ['cat.jpeg'] };

},

methods: {

handleFilePondInit: function() {

console.log('FilePond has initialized');

// FilePond instance methods are available on `this.$refs.pond`

}

},

components: {

FilePond

}

};

</script>

网站地址:https://pqina.nl/filepond

GitHub:https://github.com/pqina/vue-filepond

网站描述:一个便利FilePond适配器Vue组件

vue-filepond

官方网站：https://pqina.nl/filepond