input上传图片；input上传file；vue上传图片。js读取文件的base64；通过File文件读取base64；

i_am_a_div_日积月累_

已于 2022-08-04 10:21:55 修改

阅读量1.7k

点赞数 1

分类专栏： vue 文章标签： js上传图片 vue上传图片 input上传图片

于 2022-02-28 17:05:03 首次发布

本文链接：https://blog.csdn.net/i_am_a_div/article/details/123186774

版权

vue 专栏收录该内容

107 篇文章 5 订阅

订阅专栏

本篇是通过File文件来获取base64的；如果需要通过文件url获取base64看这篇

需求：上传图片并获取base，用的是input file功能上传
注意点：input上传相同文件不触发的原因。需要将inputDOM.value = null (不过置空后 29行的打印就看不到 event.target.files 文件数据（可以先注释此行看下数据–就是图片文件） )

以下代码可以直接复制使用！！！有效的点赞

注意文件取值有的是event.target.files[0] ；有的是event.detail.file ；看自己的控制台输出。
记住是读取这个File格式文件即可

<template>
  <div class="content">
    <input type="file" class="box-orc-input" @change="uploadPic($event)" />
    <img class="img_box" :src="imgsrc" alt="">

    <div>{{imgsrc}}</div>

  </div>
</template>

<script>
function ie9 () {
  if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
    return true
  } else {
    return false
  }
}
export default {
  data () {
    return {
      imgsrc: '',
    }
  },

  methods: {
    // 通过input上传图片
    uploadPic (event) {
      console.log(event)
      console.log('event.target.files[0]==',event.target.files[0])//注意有的是取值 event.target.files[0]  有的是取值 event.detail.file
      if (event.target.files[0].type != 'image/png' && event.target.files[0].type != 'image/jpg' && event.target.files[0].type != 'image/jpeg') {
        return this.$message.warning('请选择上传图片，格式支持：.png 或 .jpeg 或 .jpeg')
      }
      if (ie9()) {
        this.$message.warning('iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。')
        retrun
      }
      //iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。
      let inputDOM = event.target
      let _this = this
      var reader = new FileReader()
      reader.readAsDataURL(inputDOM.files[0])
      reader.onload = function (e) {
        var base = e.target.result

        let res = base.split(',')
        console.log(1111, e)
        console.log('图片的base64码，可以直接赋值给img的src显示图片', base)
        _this.imgsrc = base
        console.log()

      }

      inputDOM.value = null //将input置空 否则上传相同文件无反应 (不过置空后 29行的打印 就看不到 event.target.files 文件数据 30行直接打印可以看到文件数据（可以先注释此行看下数据--就是图片文件）   )
    },
  }
}
</script>

<style>
.img_box {
  /* width: 100px;
  height: 100px; */
}
.content {
  padding: 20upx;
}
</style>