vue+type="file"文件上传思路

<template>
  <div>
    <div class="selectfile">选择文件</div>
    <input type="file"  accept=".doc,.docx,application/msword,.pdf,image/*,xls,xlsx"
     name="file" ref="file" @change="uploadFiles" value="" multiple="multiple" class="set-opcity" />
    <button type="button" @click="handleUpload">上传</button>
    <div v-if="fileList.length>0" class="file-list">
      <div v-for="(item,index) in fileList" :key="index"><span class="filename">{{item.name}}</span><span
          @click="del(item,index)">删除</span></div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <a href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" download="vue.js" target="_blank">文件查看</a>

    <br>
    <br>
  </div>
</template>

<script>
  export default {
    name: "Upload",
    data() {
      return {
        fileList: []
      }
    },
    methods: {
      uploadFiles(value) {
        console.log(value)
        console.log(this.$refs.file.files)
        this.fileList = [...this.fileList, ...this.$refs.file.files]
        console.log(this.fileList)
      },
      handleUpload() {
        if (this.fileList.length !== 0) {

          this.fileList.forEach(item => {
            this.upload(item)
          })

        } else {
          alert("请选择文件")
        }
      },
      upload(file) {
        var formData = new FormData();
        formData.append("file", file)
        // 调用接口
      },
      // 删除附件
      del(fileInfo, index) {
        console.log(fileInfo)
        console.log(index)
        this.fileList.splice(index, 1)
      }
    }
  }
</script>

<style scoped="scoped">
  .selectfile {
    position: absolute;
    z-index: -1;
    color: green;
    padding: 4px 8px;
    border: 1px solid #008000;
    border-radius: 8px;

  }

  .set-opcity {
    opacity: 0;
  }
  .file-list>div{
      /* line-height: 28px; */
      list-style: none;
      display: flex;
      justify-content: space-between;
      margin-top: 18px;
      padding: 0px 10px;
   }
   .filename{
     width: 80%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
</style>

效果