vue组件适配横屏竖屏_方便的Vue FilePond适配器组件

vue组件适配横屏竖屏

Vue FilePond (Vue FilePond)

Vue FilePond is a handy adapter component for FilePond, a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

Vue FilePond是FilePond的便捷适配器组件，它是一个JavaScript库，可以上传您扔给它的任何内容，优化图像以加快上传速度，并提供出色的，可访问的，柔滑的流畅用户体验。

View demo 查看演示 Download Source 下载源

Installation:

安装：

npm install vue-filepond --save

Usage:

用法：

<template>
  <div id="app">
    
    <FilePond
        name="test"
        ref="pond"
        labelIdle="Drop files here..."
        allowMultiple="true"
        acceptedFileTypes="image/jpeg, image/png"
        v-bind:files="myFiles"
        v-on:init="handleFilePondInit"/>
    
  </div>
</template>

<script>
// Import Vue FilePond
import FilePond, { registerPlugin } from 'vue-filepond';

// Import FilePond styles
import 'filepond/dist/filepond.min.css';

// Register file type validation plugin
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
registerPlugin(FilePondPluginFileValidateType);

export default {
    name: 'app',
    data: function() {
        return { myFiles: ['index.html'] };
    },
    methods: {
        handleFilePondInit: function() {
            console.log('FilePond has initialized');
            
            // FilePond instance methods are available on `this.$refs.pond`
        }
    },
    components: {
        FilePond
    }
};
</script>

翻译自: https://vuejsexamples.com/a-handy-filepond-adapter-component-for-vue/

vue组件适配横屏竖屏