入力タイプ=「ファイル」使用

問題：

実際の開発プロセスでは、我々はファイルをアップロードするための要件の一部を満たしています。しかし、ネイティブの使用は<input type="file" />、使用中のいくつかの問題があります

設定不可能、「何のファイル選びだし」、ユーザーフレンドリーなインターフェイスを表示しない、ファイルをアップロードしない場合
同じファイルをアップロードし、それがトリガされませんchange変更がファイルに加えられた場合でも、イベントを
ユーザーがクリックは、アップロードプロセス中に「キャンセル」した場合、アップロードされたファイルが削除されます

ソリューション

ソースコードの一部を読んだ後、私たちは、次の解決方法をまとめました。少しは手段を人手不足しました：

実際の<input type="file" />カスタムを使用して非表示、button経由$refsトリガファイルのアップロードには、カスタム表示を実現します
ファイルがアップロードされた後、ファイルが処理されたものであり、次の偶数意志まだトリガー同じファイルをアップロードするように、nullに設定イベント<input type="file" />valuechange
上記の方法を使用して、ファイルを[キャンセル]をクリックします削除されますが、ページの表示には影響しません。

実現

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <title>Vue</title>
</head>

<body>
    <div id="app">
        <button type="button" @click="click">
            <span v-if="fileName">重新上传</span>
            <span v-else>上传文件</span>
        </button>
        <span>{{fileName}}</span>
        <input type="file" ref="uploadFile" style="display:none" accept="image/gif, image/jpeg" @change="upload"/>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                fileName: ''
            },
            methods: {
                click () {
                    // 偷梁换柱,触发文件上传
                    this.$refs.uploadFile.click();
                },
                upload (event) {
                    let files = event.target.files || event.dataTransfer.files;

                    if (!files.length) {
                        this.fileName = '';
                        return;
                    }
                    this.fileName = files[0].name;

                    // 上传之后调用接口...
                    let params = new FormData();
                    params.append('file', files[0]);
                    console.log(params);

                    this.$refs.uploadFile.value = null; // 移除文件，可以保证上传同样的文件时，也会触发change事件
                }
            }
        })
    </script>
</body>

</html>

感想

それが問題に来たときより学ぶことがたくさんの問題を解決するため、他の人が書く方法を見てほぼ同時期に描画します。

問題：

ソリューション

実現

感想

おすすめ