input file上传base编码图片及上传同一张图片

226 阅读1分钟

input type='file'

使用了vuejs的change事件

<input type="file" accept="image/*" @change='tirggerFile' id='file' value=''>
accept="image/*"(兼容了安卓客户端)
//上述代码中 value='';不能少:
js
    tirggerFile: function (event) {
        var files = event.target.files;
         this.showUpload(files[0]);
    },
    showUpload(img) {
         var _this = this;
         var reader = new FileReader();
         reader.readAsDataURL(img);
         reader.onload = function (e) {
          console.log('执行这里', this.result);
          _this.uploadSrc = this.result;
          // 传递同一张图片时,清空value值
          document.getElementById('file').value = '';
         }
    },

FileReader对象

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader.result 只读

文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。