vue中input框的fileREader技术上传图片

2021-01-28 20:16

阅读：746

标签：vue res ali line height nload ret get 覆盖

1.在前端中使用input框，type=”file“来实现选择文件夹的功能

在表单中的input框中的添加按钮

"产品图片" prop="picture" style="position:relative">
"form1.picture" placeholder="图片大小为200x200" style="width:85%">class="replace">上传
"file" class="file" ref="files" @change="getImages" />

2.input中type="type"的样式很难调整，可以采用重写样式覆盖，让input的opacity:0

.file {
  position: absolute;
width: 6%;
padding: 4%;
  right: 0;
  top: 0;
  opacity: 0;
}
.replace {
  position: absolute;
    right: 0;
  top: 0;
width: 7.5%;
  padding: 3.7%;
text-align: center;
  font-size: 13px;
line-height: 5px;
  border: 1px solid #ooo;
}

3.在js中写入fileReader

getImages(e) {
      let _this = this;
      _this.form1.picture = e.target.files[0].name;
      console.log(e.target.files);
      if (!e || !window.FileReader) return; // 看支持不支持FileReader
      let reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);
      reader.onloadend = function(){
        _this.src1 = this.result;
      };
    },

vue中input框的fileREader技术上传图片

标签：vue res ali line height nload ret get 覆盖

原文地址：https://www.cnblogs.com/xiaoyiyiaixuexi/p/13207206.html

上一篇：Leaky Images: Targeted Privacy Attacks in the Web

下一篇：Spider_基础总结2_Request+Beautifulsoup解析HTML

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：vue中input框的fileREader技术上传图片
文章链接：http://soscw.com/index.php/essay/48389.html

亲，登录后才可以留言！

vue中input框的fileREader技术上传图片

评论

热门文章

推荐文章

最新文章

置顶文章