vue2 上传图片

<template>
  <div class="about">
    <input type="file" accept="image/*" name="" id="" @change="uploadImg"><br>
    <img src="" alt="" ref="img">
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    uploadImg(ev) {
      // ev.dataTransfer.files 支持拖拽上传
      const files = ev.target.files || ev.dataTransfer.files
      const target = files[0]
      this.$refs.img.src = URL.createObjectURL(target)
    }
  }
}
</script>
<style>
.about {
  text-align: center;
}
img {
  width: 350px;
  height: 350px;
  object-fit: cover;
}
</style>

ev.dataTransfer.files 支持拖拽上传

URL.createObjectURL() 是一个 JavaScript 方法，用于创建一个临时的 URL 对象。

它的作用是将给定的对象（如 Blob、File 或 MediaSource）转换为一个临时 URL，该 URL 可以被用作浏览器中某些元素的源，比如 <video>、<audio> 或 <img>。

临时 URL 的创建是基于浏览器环境提供的 URL.createObjectURL() API，它为对象分配一个唯一的 URL。这个 URL 在浏览器中只能被当前页面访问，它不会发送到服务器，而是存在于浏览器的内部资源管理中。