zoukankan      html  css  js  c++  java
  • input file 上传图片并显示

    <template>
      <div class="about">
        <h1>This is an about page</h1>
        <input type="file" value="上传图片" class="upload" @change="handleFileChange" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
        <img v-for="item of filelists" :src="item" :key="item" alt="">
      </div>
    </template>
    
    <script lang="ts">
        import { Component, Vue } from "vue-property-decorator";
        @Component({
            
        })
        export default class About extends Vue {
            filelists = [];
            handleFileChange(e:any){
                let file = e.target.files;
                let _this = this;
                for(let i in [...Array(file.length).keys()]){
                    let reader = new FileReader();
                    reader.readAsDataURL(file[i]); // 读出 base64
                    reader.onloadend = function () {
                        _this.filelists.push(reader.result);
                    };
                }
            }
            
            
        }
    </script>    

      File对象继承自Blob对象,也就是说Blob对象的属性和方法,File对象也可以使用,而File对象本身也有自己的属性和方法。

      lastModified属性,返回File对象引用文件最后的修改时间。

      lastModifiedDate属性,引用文件最后修改时间的Date对象。

      name属性,所引用文件的名字。

      size属性,返回文件大小。

      webkitRelativePath属性,相关的Path或URL。

      type属性,返回文件的多用途互联网邮件扩展类型。

      File的方法。

      geAsBinary()把文件内容按照二进制形式解析成字符串并返回

    Valid Accept Types:
    
    For CSV files (.csv), use: 
    
    <input type="file" accept=".csv" />
    For Excel Files 2003-2007 (.xls), use: 
    
    <input type="file" accept="application/vnd.ms-excel" />
    For Excel Files 2010 (.xlsx), use: 
    
    <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
    For Text Files (.txt) use: 
    
    <input type="file" accept="text/plain" />
    For Image Files (.png/.jpg/etc), use: 
    
    <input type="file" accept="image/*" />
    For HTML Files (.htm,.html), use:
    
    <input type="file" accept="text/html" />
    For Video Files (.avi, .mpg, .mpeg, .mp4), use:
    
    <input type="file" accept="video/*" />
    For Audio Files (.mp3, .wav, etc), use:
    
    <input type="file" accept="audio/*" />
    For PDF Files, use:
    
    <input type="file" accept=".pdf" /> 
  • 相关阅读:
    无线鼠标换电池了
    Jython Interactive Servlet Console YOU WILL NEVER KNOW IT EXECLLENT!!! GOOD
    Accessing Jython from Java Without Using jythonc
    jython podcast cool isnt't it?
    Python里pycurl使用记录
    Creating an Interactive JRuby Console for the Eclipse Environment
    微软为AJAX和jQuery类库提供CDN服务
    Download A File Using Cygwin and cURL
    What is JMRI?这个是做什么用的,我真没看懂但看着又很强大
    用curl 发送指定的大cookie的http/https request
  • 原文地址:https://www.cnblogs.com/mary-123/p/12383301.html
Copyright © 2011-2022 走看看