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 条评论
登录 后参与评论

相关文章

来自专栏Danny的专栏

机房收费系统(VB.NET)——超详细的报表制作过程

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

2503
来自专栏数据小魔方

如何将html格式动态图表网页嵌入ppt中

前几天魔方学院(其实就是我的公众号交流群啦~_~)的一位群友突然在群里提了一个问题! 看了之前推送的REmap相关内容,结果导出的图表是html格式的动态图,不...

6.1K7
来自专栏web开发

前后端分离跨服务器文件上传-Java SpringMVC版

 近来工作上不上特别忙,加上对后台java了解一点,所以就抽时间,写了一个java版本的前后端分离的跨服务器文件上传功能,包括前后端代码。 一、Tomcat服务...

3.1K8
来自专栏破晓之歌

HTML5学习之FileReader接口 转

用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目...

772
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(一)

通过本文,你可以创建你的第一个Mac Application,编译并指定版本号,而且经过练习,你应该掌握:

2673
来自专栏CRPER折腾记

Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)

不推荐完全copy过去,可以看看我是如何针对我这边业务; 做的一个axios的封装及实现的思路

4532
来自专栏腾讯移动品质中心TMQ的专栏

基于自定义向导的C++单元测试环境自动化配置

导语:相信使用过Visual Studio的小伙伴都感受过VS向导的强大,通过应用程序向导,我们可以很方便地搭建应用程序,通过代码向导,可以大大提高我们编写代码...

20810
来自专栏我的博客

FCK编辑器使用详解(PHP版本)

前些日子(很久了),胡乱捣鼓了一番FCK编辑器的使用,结果还是没有捣鼓明白个所以然(今天又想起来fck的强大,我以前见到的只是它的冰山一角) 今天是按照一下过程...

3936
来自专栏挖坑填坑

Angular4记账webApp练手项目之三(在angular4项目中使用路由router)

要使用路由,我们需要在 app.module.ts 模块中,导入 RouterModule 。具体如下:

763
来自专栏Golang语言社区

【Go 语言社区】golang channel 有缓冲 与 无缓冲 的重要区别

golang channel 有缓冲 与 无缓冲 是有重要区别的 我之前天真的认为 有缓冲与无缓冲的区别 只是 无缓冲的 是 默认 缓冲 为1 的缓冲式 其实是...

7158

扫码关注云+社区

领取腾讯云代金券