elementuiplus的上传组件，封装图片回显2022/6/6am

最新推荐文章于 2024-05-19 09:06:12 发布

xumengxia—xu

最新推荐文章于 2024-05-19 09:06:12 发布

阅读量1.4k

点赞数

分类专栏：工作2022年5月，记录生活的每一天文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_56514785/article/details/125141796

版权

工作2022年5月，记录生活的每一天专栏收录该内容

37 篇文章 1 订阅

订阅专栏

<template>
  <div class="upload">
    <!-- <h1>upLoad页面开发中</h1> -->
    <div style="min-width:320px" class="left">
      <div class="title">
        Drag 'n' drop or upload your file here
      </div>
      <div style="margin:8px 0" class="info">( .png Or .jpg Or .jpeg )</div>
      <div class="info">Or</div>
      <el-upload
         ref="upload"
         class="upload-demo"
         action="#"
         :limit="1"
         :on-exceed="handleExceed"
         :auto-upload="false"
         :file-list="fileList"
         :show-file-list="false"
      >
        <template #trigger>
          <el-button class="btn" size="large" color="#6a49ac" >Upload</el-button>
        </template>
       </el-upload>
      <div style="margin-top:8px" class="info">Minimum size: 300px. Recommended to be squared</div>
    </div>
    <div class="mid">

    </div>
    <div class="r" v-if="logoingurl">
      <div class="r-left">
        <div style="font-size:18px;color:#1f252e">Uploaded Image:</div>
        <div>
          <img style="width:100px;height:100px;" :src="logoingurl" alt="">
        </div>
        <el-button class="btn" color="#d54e30" type="danger" icon="Delete" @click="handleRemove" >Delete</el-button>
      </div>

    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, toRefs, reactive, computed, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile, UploadFile, UploadUserFile } from 'element-plus'
export default defineComponent({
  name: 'upLoad',
  // props: {

  //   logoingurl: String

  // },
  setup (props, ctx) {
    onMounted(() => {
      // console.log('result', result)

    })
    const Router = useRouter()
    const Store = useStore()
    const upload = ref<UploadInstance>()
    const fileList = ref<UploadUserFile[]>([
      {
        name: Store.state.Microstore.logourl.split('?')[0].split('/')[Store.state.Microstore.logourl.split('?')[0].split('/').length - 1],
        url: Store.state.Microstore.logourl
      }

    ])
    const handleExceed: UploadProps['onExceed'] = (files) => {
      console.log('1')
      upload.value!.clearFiles()
      const file = files[0] as UploadRawFile
      console.log(Store.state.Microstore.logourl.split('?')[0].split('/'))

      Store.commit('baibiaochangeLogourl', URL.createObjectURL(file))
      file.uid = genFileId()
      upload.value!.handleStart(file)
    }

    const handleRemove = (file: UploadFile) => {
      console.log(file)
      Store.commit('baibiaochangeLogourl', '')
    }

    const data = reactive({

      logoingurl: computed(() => {
        return Store.state.Microstore.logourl
      })

    })

    return {
      ...toRefs(data), handleRemove, handleExceed, upload, fileList

    }
  }

})
</script>
<style lang="less" scoped>
.upload {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  .left {
    width: 50%;
    padding-top: 30px ;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #f2f4f6;
    // 虚线边框回头有时间的时候设置
    // border: 1px solid #e7eaef;
    .title {
      font-size: 18px;
      color: #080c16;
      font-weight: 600;
    }
    .info {
      font-size: 14px;
      color: #98a3b3;
    }
    .btn {
      width: 90px;
      height: 40px;
      margin-top: 4px;
      font-size: 18px;
    }

  }
  .mid {
    min-width: 80px;

  }
  .r {
    flex: 1;
    display:flex;
    .r-left {
      display:flex;
      flex-flow: column; //垂直排列
      justify-content: space-between;//两端对齐
      .btn {
        width: 107px;
        height: 40px;
        font-size: 18px;
      }
    }

  }
}
// 重置radio标签样式
::v-deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: #6a49ac;
  background:#6a49ac;
}
::v-deep(.el-radio__input.is-checked+.el-radio__label) {
  color: #4a5463;
}
</style>