fe-manage/src/components/common/FJUpload.vue

<template>
  <div>
    <div>
      <Upload v-model:value="files" ref="uploadRef" :file-type="fileType">
        <div class="accessory" style="cursor: pointer">
          <span class="accessory_icon">
            <img
                src="@/assets/images/coursewareManage/enclosure.png"
                alt="enclosure"
            />
          </span>
          <span style="color: #4ea6ff;margin-left:10px">添加附件</span>
        </div>
      </Upload>
      <div>支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div>
    </div>
    <div class="mbl_items12" style="margin-left: 0">
      <div
          class="i12_box1"
          v-for="(item, index) in files"
          style="align-items: flex-end"
          :key="index"
      >
        <div class="file_img"></div>
        <div class="file_detail">
          <div class="file_name">
            <span style="color: #6f6f6f；width:200px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{{ item.name }}</span>
          </div>
          <!--          <div class="file_size">-->
          <!--            <span style="color: #999ba3">{{ item.size }}</span>-->
          <!--          </div>-->
          <div class="file_updata">
            <div class="updatabox">
              <div
                  :class="`${{uploading: 'updatacolor3', done: 'updatacolor' ,error: 'updatacolor2'}[item.status] || 'updatacolor'}`"
                  :style="{width:`${item.status==='uploading'?parseInt(item.percent):100}%`}"></div>
              <div v-if="item.status"
                   :class="`${{uploading: 'updataxq1', done: 'updataxq' ,error: 'updataxq2'}[item.status] || 'updataxq'}`">
                {{ {uploading: '正在上传', done: '上传完成', error: '上传失败'}[item.status] || '' }}
              </div>
            </div>
            <div class="upjd" v-if="item.percent">
              <span style="margin: auto 5px">{{ item.status === 'uploading' ? parseInt(item.percent) : 100 }}%</span>
            </div>
          </div>
        </div>
        <div class="file_operation" @click="del(index)" style="color: #4ea6ff">
          删除
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {defineEmits, defineProps, ref, watch, onMounted} from "vue";
import Upload from "./BaseUpload.vue";

const emit = defineEmits({})
const props = defineProps({
  value: String,
})
const files = ref([])
const uploadRef = ref()

const fileType = ref([
  "jpg",
  "jpeg",
  "png",
  "gif",
  "pdf",
  "ppt",
  "pptx",
  "doc",
  "docx",
  "xls",
  "xlsx",
  "zip",
])

onMounted(() => {
  init()
})

watch(files, () => {
  files.value && files.value.length && emit('update:value', files.value.filter(e => e.url).map(e => e.url).join(','))
})

watch(props, init)

function init() {
  if (props.value !== files.value.map(e => e.url).join(',')) {
    files.value = props.value ? props.value.split(',').map(e => ({name: e, url: e})) : []
  }
}

function del(i) {
  uploadRef.value.remove(i)
}

</script>
<style lang="scss">
.mbl_items12 {
  width: 440px;
  margin-left: 100px;

  .i12_box1 {
    display: flex;
    align-items: center;
    padding: 17px 0px 17px 21px;
    border: 1px solid #eff4fc;
    border-radius: 8px;
    margin-bottom: 10px;

    .file_img {
      width: 27px;
      height: 32px;
      background-image: url(@/assets/images/coursewareManage/imgs.png);
      margin-right: 22px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .file_detail {
      width: 250px;
      margin-right: 21px;

      .file_updata {
        display: flex;
        align-items: center;

        .updatabox {
          position: relative;
          width: 230px;
          height: 5px;
          background-color: rgba(192, 192, 192, 0.25);
          border-radius: 3px;

          .updatacolor {
            position: absolute;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #57c887;
            border-radius: 3px;
          }

          .updatacolor2 {
            position: absolute;
            left: 0;
            width: 80%;
            height: 5px;
            background-color: #ff7474;
            border-radius: 3px;
          }

          .updatacolor3 {
            position: absolute;
            left: 0;
            width: 60%;
            height: 5px;
            background-color: #388be1;
            border-radius: 3px;
          }

          .updataxq {
            position: absolute;
            right: -62px;
            top: -30px;
            color: #57c887;
          }

          .updataxq1 {
            position: absolute;
            right: -62px;
            top: -30px;
            color: #388be1;
          }

          .updataxq2 {
            position: absolute;
            right: -62px;
            top: -30px;
            color: #ff7474;
          }
        }
      }
    }

    .file_operation {
      display: flex;

      .fobox {
        margin-right: 5px;
        cursor: pointer;
      }
    }
  }
}
</style>