H5静态化

doum

2025-09-26 9057e04efad1b7d61c77a72e5c37a504d0aee935

 admin/src/components/common/upload.vue

对比新文件
@@ -0,0 +1,146 @@
<template>
    <div class="file">
        <div class="file_list">
            <div class="file_list_item" :style="{width: width, height: height}" v-for="(item, index) in list" :key="index">
                <div class="dele" @click="deleItem(index)">
                    <i class="el-icon-close"></i>
                </div>
                <img :src="item.url" v-if="fileType(item.url) === 'img'" />
                <video controls autoplay :src="item.url" v-else></video>
            </div>
          <div class="file_list_item" :style="{width: width, height: height, cursor: 'pointer'}" @click="$refs.file.click()">
            <i class="el-icon-plus" style="font-size: 18px;color: #8c939d;text-align: center;margin-top: 10px"></i>
            <i style="font-size: 12px;color: #8c939d;font-style: normal;text-align: center">{{tips}}</i>
          </div>
          <input type="file" ref="file" :accept="accept" @change="getFile" />
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    width: {
      type: String,
      default: '90px'
    },
    height: {
      type: String,
      default: '90px'
    },
    list: {
      type: Array,
      default: []
    },
    tips: {
      type: String,
      default: '0'
    },
    accept: {
      type: String,
      default: ''
    },
    folder: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/web/public/upload'
    }
  },

  methods: {
    fileType (url) {
      if (url.indexOf('.mp4') !== -1) {
        return 'video'
      } else {
        return 'img'
      }
    },
    getFile (e) {
      if (e.target && e.target.files.length > 0) {
        this.$emit('loading')
        const formdate = new FormData()
        formdate.append('file', e.target.files[0])
        formdate.append('folder', this.folder)
        axios.post(this.uploadImgUrl, formdate)
          .then(res => {
            this.$emit('success', res.data.data)
            console.log(res.data.data)
          })
          .catch(e => {
          })
          .finally(() => {
            this.$refs.file.value = null
          })
      }
    },
    deleItem (index) {
      this.$emit('dele', index)
    }
  }
}
</script>

<style lang="scss" scoped>
    .file {
        /*width: 100%;*/
        /*height: 90px;*/
        margin: 10px 0;
        input {
            opacity: 0;
        }
        .file_list {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .file_list_item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                border-radius: 5px;
                border: 1px solid #d5d5d5;
                margin: 5px;
                position: relative;
                &:first-child {
                    margin: 0 !important;
                }
                .dele {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 20px;
                    height: 20px;
                    background: red;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 10000;
                    cursor: pointer;
                    .el-icon-close {
                        color: #ffffff;
                        font-size: 14px;
                    }
                }
                .el-icon-plus {
                    font-size: 30px;
                    color: black;
                }
                img {
                    width: 100%;
                }
                video {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>