input file实现文件上传预览

最新推荐文章于 2024-10-06 22:53:49 发布

原创

最新推荐文章于 2024-10-06 22:53:49 发布 · 528 阅读

本文介绍如何使用HTML5的input file元素配合JavaScript和CSS实现文件上传前的预览功能。通过JavaScript读取文件内容并显示在页面上，提供用户友好体验。

效果

html部分

<div>
    <div>
      <label for="file1" class="a-upload"
        >上传文件
        <input
          type="file"
          @change="file1($event)"
          name="file1"
          id="file1"
          multiple="multiple"
        />
      </label>
    </div>
    <div class="img">
      <p>图片预览</p>
      <img src="https://blog.csdn.net/assets/logo.png" alt="" id="portrait" />
    </div>
  </div>

js部分

<script>
export default {
  created() {},
  data() {
    return {
      file: "",
    };
  },
  methods: {
    file1(event) {
      this.file = event.target.files[0]; //获取fileList只读对象下的第一个file对象,该对象保存所有的File对象
      console.log(this.file);
      var fr = new FileReader()