vue.js获取上传图片名称

最新推荐文章于 2024-07-20 05:42:48 发布

Mirinda-

最新推荐文章于 2024-07-20 05:42:48 发布

阅读量386

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47546282/article/details/139068590

版权

在Vue.js中，获取上传图片的名称通常需要使用HTML5的File API。具体步骤如下：

定义一个input元素，使用type="file"来实现文件上传功能，并给它一个ref属性来获取该元素的引用。
给input元素绑定一个change事件处理函数，当用户选择文件后会触发该事件。
在change事件处理函数中，使用File API获取上传文件的名称，并将其保存到Vue实例的一个数据属性中。

代码示例如下

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
    <p>上传文件名：{{ fileName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileName: '' // 保存上传文件名的数据属性
    };
  },
  methods: {
    handleFileChange() {
      const file = this.$refs.fileInput.files;
      this.fileName = file ? file.name : '';
    }
  }
};
</script>