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

最新推荐文章于 2021-05-18 23:07:10 发布

weixin_34088598

最新推荐文章于 2021-05-18 23:07:10 发布

阅读量225

点赞数

原文链接：https://juejin.im/post/5cb5fbb4e51d456e46603e12

版权

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 只读

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

转载于:https://juejin.im/post/5cb5fbb4e51d456e46603e12