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
小编说
以上是编程之家为你收集整理的vue-filepond全部内容。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。