如何单击标签上传文件并在VUE 2中显示文件名

Question

这是我的代码，但尚未添加逻辑。 我正在尝试单击标签以上传文件，而不是使用输入标签。 apply.vue

<div class="line">
  <h6>Upload CV:</h6>
  <div class="up-cv">
    <button @click="onFileChange" type="button" id="custom-button">
      <img src="../../assets/recruit/taicv.svg" alt="" />Upload
    </button>
    <input id="real-file" type="file" style="display: none" name="image" />
    <div class="name-cv">
      <h5 id="custom-text">you have not selected the file</h5>
      <img onclick="deleteFile()" src="../../assets/recruit/delete.svg" alt="" />
    </div>
  </div>
</div>

期待您的帮助，非常感谢...

Answer 1

我已经在Stackblitz上创建了一个演示。

链接 - https://vue-j4h4a6.stackblitz.io/

我也已将源代码连接起来

<template>
 <div id="app">
<div class="line">
  <h6>Upload CV:</h6>
  <div class="up-cv">
    <button
      @click="onFileChange"
      type="button"
      id="custom-button"
    >
      <!-- <img src="../../assets/recruit/taicv.svg" alt="" /> -->
      <span class="material-symbols-outlined"> file_upload </span>
      Upload
    </button>

    <input
      id="real-file"
      type="file"
      style="display: none"
      name="image"
      @change="fileName"
    />
    <div class="name-cv">
      <h5 v-if="uploadedFileName">{{ uploadedFileName }}</h5>
      <h5 v-else id="custom-text">you have not selected the file</h5>
      <!-- <img
        onclick="deleteFile()"
        src="../../assets/recruit/delete.svg"
        alt=""
      /> -->

      <span
        v-if="uploadedFileName"
        class="material-symbols-outlined deleteBtn"
        @click="deleteFile"
      >
        delete
      </span>
     </div>
    </div>
  </div>
 </div>
</template>

<script>
 export default {
 name: 'App',
 data() {
  return {
  uploadedFileName: null,
 };
},
methods: {
onFileChange() {
  document.getElementById('real-file').click();
},
fileName(e) {
  this.uploadedFileName = e.target.value;
},
deleteFile() {
  this.uploadedFileName = null;
},
},
};
</script>

<style>
 #custom-button {
  display: inline-block;
  border: 1px solid grey;
  padding: 10px;
  cursor: pointer;
 }
 #custom-button span {
  display: inline-block;
  vertical-align: bottom;
 }
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
 }
.deleteBtn {
 cursor: pointer;
 color: red;
 }
 </style>