前端封装 自定义-上传文件-组件

<template>
  <a href="javascript:;" class="file" v-show='list.length == 0'>
    <iconfont name="shangchuan" class="ico"/> 上传文件
    <input type="file" name="file" id="fileField" :accept="accept" @change="beforeUpload">
  </a>
  <template v-show='list.length !== 0' v-for="(item,index) in list" :key="index">
    <div class="upload_name"  >
      <div class="left">
        <iconfont name="lianjie" class="ico"/>
      </div>
      <div class="name">{{item.name}}</div>
      <div class="operate">
        <a :href="item.url" class="down"><iconfont name="xiazai" color='#85bbec'/></a>
        <a class="dele" @click="Delete(index)"><iconfont name="shanchu-copy" color='red'/></a>
      </div>
  </div>
  </template>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'app-upload',
  props: {
    value: {
      type: [String, Array],
      default: '',
    },
    accept: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    request: {
      type: Function
    }
  },
  data() {
    return {
      list: [],
      place:'',
      result: '',
      yulan: {
        visible: false,
        url: '',
      },
      showUploadList:true
    }
  },
  emits: ['update:value'],
  watch: {
    value: {
      handler(value) {
        if (this.result === value) return;
        let array = [];
        if (typeof value == 'string' && value) {
          let values = value.split(',').filter((value) => Boolean(value));
          let name = this.place == '' ? this.name : this.place
          array = [
              {
                status: 'done',
                uid: this.random(),
                name: name,
                url: values[0],
              },
            ];
        }
        this.list = array;
      },
      immediate: true,
      deep: true,
    },
    list: {
      handler(value) {
        let result = [];
        value.filter((item) => {
          if (item.status == 'error' || item.status == 'removed') return false;
          else if (item.status == 'done') {
            if (item.url) result.push(item.url);
            else if (item.response && item.response.url)
              result.push(item.response.url);
          }
          return true;
        });
        this.result = result.join(',');
        this.$emit('update:value', this.result);
      },
      immediate: true,
      deep: true,
    }
  },
  methods: {
    random() {
      return Math.random().toString(36).slice(-8);
    },
    preview(file) {
      let url = '';
      if (file.url) url = file.url;
      else if (file.response && file.response.url) url = file.response.url;
      this.yulan.visible = url ? true : false;
      this.yulan.url = url;
    },
    Delete(index){
      this.$success('删除成功')
      setTimeout(()=>{
        this.list.splice(index,1)
      },500)
    },
    beforeUpload(e) {
      let file = e.target.files[0]
      const max = 1024 * 1024 * 5
      if (file.size > max) {
        file = ''
        this.$error('大小不能超过 5MB!');
        this.list.length = 0   
        return false
      }
      this.place = file.name
      // this.list = []
      this.request(file)
    }
  }
})
</script>

.file {
    position: relative;
    display: inline-block;
    background: #feffff;
    border: 1px solid #b9babb;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #b9babb;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    text-decoration: none;
    cursor: pointer;
}
.upload_but{
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
    border-radius: 5px;
    border: 1px #9999 solid;
    /* font-weight: 700; */
  }
  .upload_but:hover{
      cursor: pointer;
    }
  .upload_name{
      display: flex;
      font-size: 13px;
      align-items: center;
      justify-content: space-between;
      /* margin-top: 10px; */
      width: 80%;
      /*  */
      /* background-color: red; */
      .left{
          flex:1;
          padding-top: 5px;
      }
      .name{
          flex: 6;
          color: #60a7e6;
          margin-left: 10px;
          /* margin: 0 5px 0 20px; */
      }
      .operate{
          flex: 2;
          display: flex;
        .down{
            margin: 0 10px;
        }
        .dele{}
      }

  }

</style>

//使用
 <app-upload v-model:value="spirit.audio.url" :request="uploadAudio" accept='audio/mp3' name="音频"></app-upload>

//value是上传路径
//接收子组件最后传过来的文件//accept传给子组件类型//name传给子组件的名词