VUE使用後にreadAsDataURLは、画像ファイルのプレビューを選択して実現

VUE実現した後、画像ファイルのプレビューを選択

これは、API H5は、ファイルとプレビューを選択し使用して達成することができます

readAsDataURL

メソッドは、指定されたBLOBまたはFileオブジェクトを読み込みます。readyStateのが完了したとき、操作が完了した読み取り結果のプロパティは、データが含まれている間、DONEとなり、トリガloadendイベントます：文字列（Base64エンコード）URL形式ファイルの読み込みの内容を表現するために

VUEの論文の紹介

<script src="./vue.js"></script>

ファイル選択ボックス、および変更イベントを追加し、操作refのDOM

 <input type="file" @change="uploadImg" ref="img" />

IMGは、プレビューを表示するためのタグを追加します

<img id="img" />

操作の例として、完全なVUE

var vm = new Vue({
        el: '#app',
        methods: {
        //change事件
            uploadImg(el) {
                //根据ref得到图片文件
                var file = this.$refs.img;
                //使用h5的读取文件api
                var reader = new FileReader();
                reader.readAsDataURL(file.files[0]);
                //读取完成后触发
                reader.onload = function () {
                //改变img的路径
                    document.querySelector("img").src = this.result;
                };
            }
        },
    })

効果

完全なコード

キャビン

もっと注意森の中で私の個人的なブログのキャビン