美文网首页
vue上传图片并显示

vue上传图片并显示

作者: jing_bao | 来源:发表于2018-10-15 20:57 被阅读0次

    html部分:
    <input type="file" id="img" @change="uploadImg" />//上传文件
    <img :src="imgUrl" />//显示图片

    js部分:
    new Vue({
    el: '#app',
    data() {
    return {
    imgUrl: ''
    }
    },
    methods: {
    uploadImg: function(e) {
    var file = e.target.files[0];
    if(!/image/\w+/.test(file.type)) {
    alert("请确保文件为图像类型");
    return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    var that = this
    reader.onload = function(e) {
    that.imgUrl = e.target.result
    }
    },

                }
            })

    相关文章

      网友评论

          本文标题:vue上传图片并显示

          本文链接:https://www.haomeiwen.com/subject/sxuqzftx.html