vue拖动文件上传效果代码-html代码-BFW代码库

vue拖动文件上传效果代码

代码语言：html

所属分类：上传

代码描述：vue拖动文件上传效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    </head>
<body>
    <div id="app" v-cloak @drop.prevent="addFile" @dragover.prevent>
        <h2>拖动文件到这</h2>
        <ul>
            <li v-for="file in files">
                {{ file.name }} ({{ file.size | kb }} kb) <button @click="removeFile(file)" title="Remove">X</button>
            </li>
        </ul>

        <button :disabled="uploadDisabled" @click="upload">Upload</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        Vue.config.devtools = false;

        Vue.filter('kb', val => {
            return Math.floor(val/1024);
        });

        const app = new Vue({
            el: '#app',
            data: {
                files: []
            },
            computed: {
                uploadDisabled() {
                    return this.files.length === 0;
                }
            },
            methods: {
                addFile(e) {
                 .........完整代码请登录后点击上方下载按钮下载查看