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/ dis t/filepond.min.css';
// Import FilePond plugins
// Please note that you need to install these plugins sep ara tely
// Import image preview plugin styles
import 'filepond-plugin-image-preview/ dis t/filepond-plugin-image-preview.min.css';
// Import image preview and file type validation plugins
import FilePon dpl uginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePon dpl uginImagePreview from 'filepond-plugin-image-preview';
// Create component
const FilePond = vueFilePond(FilePon dpl uginFileValidateType,FilePon dpl uginImagePreview);
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
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。