专栏首页河湾欢儿的专栏vue上传和浏览图片(FileReader)

vue上传和浏览图片(FileReader)

<template>
    <div ref="box">
      ...
      <input ... />
      // 给个img来承担预览工作就行了
      <img :src="dataUrl" />
      ...
    </div>
</template>
<sctipt>
    data () {
        return {
            // 转base64码后的data字段
            dataUrl: ''
        }
    },
    methods: {,
        imgPreview (file) {
            let self = this;
            // 看支持不支持FileReader
            if (!file || !window.FileReader) return;
    
            if (/^image/.test(file.type)) {
                // 创建一个reader
                let reader = new FileReader();
                // 将图片将转成 base64 格式
                reader.readAsDataURL(file);
                // 读取成功后的回调
                reader.onloadend = function () {
                    self.dataUrl = this.result;
                }
            }
        },
        handleFileChange (e) {
            ...
            this.file = inputDOM.files[0];
            ...
            // 在获取到文件对象进行预览就行了!
            this.imgPreview(this.file);
            ...
        }
    }
</script>

上传

uploader的话选择完图片在handleFileChange里直接执行个请求上传

在父组件里获取值该怎么传怎么传

    ...vue
    <input :id="inputId" ... />
    ...
</template>
<script>
...
methods: {
    gengerateID () {
        let nonstr = Math.random().toString(36).substring(3, 8);
        if (!document.getElementById(nonstr)) {
            return nonstr
        } else {
            return this.gengerateID()
        }
    },
},
mounted () {
    this.inputId = this.id || this.gengerateID();
}    
...
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 去除字符串乱码和 不用循环给数组赋值 自有的时间调度器

    一、用正则表达式来将字符串I?���love�??�the�?great�?�?wall�in��?beijing更改为:I love the Great Wa...

    河湾欢儿
  • 第一节预解释、作用域、this原理

    河湾欢儿
  • 第九节 js里的new方法

    要创建 Person 的新实例,必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4 个步骤: (1) 创建一个新对象; (2) 将构造函...

    河湾欢儿
  • 设计模式中工厂方法与抽象工厂之间的区别联系

    个人觉得这个区别在于产品,如果产品单一,最合适用工厂模式,但是如果有多个业务品种、业务分类时,通过抽象工厂模式产生需要的对象是一种非常好的解决方式。 再通俗深化...

    JAVA日知录
  • 线上Storm的worker,executor,task参数调优篇

    线上最近的数据量越来越大,出现了数据处理延迟的现象,观察storm ui的各项数据,发现有大量的spout失败的情况,如下:

    小勇DW3
  • ASP.NET MVC 5 - 视图

    在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML。 您将创建一个视图模板文件...

    葡萄城控件
  • 2023年,超过40%的隐私合规技术将依赖AI

    根据Gartner的数据,到2023年,超过40%的隐私合规技术将依赖人工智能(AI),而目前这一比例仅5%。

    FB客服
  • Upload-labs通关笔记(一)

    Upload-labs是一个帮你总结所有类型的上传漏洞的靶场 项目地址:https://github.com/c0ny1/upload-labs

    轩辕小子
  • 设计模式(6)——抽象工厂模式(Abstract Factory Pattern,创建型)

    使用设计模式可以提高代码的可复用性、可扩充性和可维护性。抽象工厂模式(Abstract Factory Pattern)属于创建型模式,为创建一组相关或者相互依...

    Dabelv
  • 美国调查显示未来10年公众或逐渐放弃隐私

    大数据文摘

扫码关注云+社区

领取腾讯云代金券