szzs/src/views/base/merchantManage/components/upload.vue

<template>
  <div class="upload">
    <el-button type="primary" @click="uploadHandle" v-if="!pathImg">点击上传</el-button>
    <div class="msg" v-if="!pathImg">只能上传jpg/png文件，且不超过2MB</div>
    <div class="uopload-box" v-if="pathImg">
      <div class="upload-img">
        <!-- <img :src="pathUrl + pathImg" style="width: 60px;" /> -->
        <el-image
          style="width: 60px; height: 60px"
          :src="pathUrl + pathImg"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="srcList"
          :initial-index="4"
          fit="cover"
        />
      </div>
      <div class="del" @click="delPath">删除</div>
    </div>
</div>
</template>

<script setup>
  import { ref } from 'vue'
  const { proxy } = getCurrentInstance();
  const value = ref([])
  const config = ref({})
  const srcList = ref([])
  const pathUrl = ref('')
  const emit = defineEmits();
  const pathImg = ref('')
  const props = defineProps({
    propConfig:{},
    propValue:{},
    parentValue:{}
  })
 
  const uploadHandle = () => {
    const accept = '.jpg,.png'
    let input = document.createElement('input')
    input.style.display = 'none'
    input.type = 'file'
    input.accept = accept
    document.body.appendChild(input)
    input.addEventListener('change', function (e) {
      let txt = e.target.files[0];
      let s = txt.name.split('.');
      let suffix = '.' + s[s.length - 1];
      if(accept.indexOf(suffix) == -1){
        proxy.$message({message:'不支持该类型文件上传！'})
        return
      }
      let siz = 2 * 1024*1024;
      if(siz < txt.size){
        proxy.$message({message:'上传文件不能超过2M！'})
        return
      }
      let data = new FormData();
      data.append('file' , txt)
      proxy.request({
        url:'/system/oss/upload',
        method:'post',
        data:data
      }).then(res => {
        pathImg.value = res.data.fileName
        srcList.value[0] = pathUrl.value + res.data.fileName
        onChange()
      }).catch(err => {
        if(err && err.msg) {
          proxy.$message({
            showClose: true,
            message:err.msg,
            type:'error'
          })
        }
      })

    })
    input.click()
    document.body.removeChild(input)
  }

  const delPath = () => {
    proxy.$confirm('您确定删除该图片?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      pathImg.value = '';
      srcList.value = []
      onChange()
    }).catch(()=>{})
    
  }

  const onChange = () => {
    srcList.value[0] = pathUrl.value + pathImg.value
    emit('onChange',pathImg.value)
  }

  const setValue = data => {
    pathImg.value = data ? data : '';
    srcList.value[0] = pathUrl.value + pathImg.value
  }

  defineExpose({
    setValue
  })
  pathUrl.value = import.meta.env.VITE_APP_UPLOAD_URL
  if(props.propValue){
    setValue(props.propValue)
  }
</script>

<style lang="scss" scoped>
.upload{
  width: 100%;
  .msg{
    font-size: 12px;
    // padding: 8px 0;
  }
  .uopload-box{
    display: flex;
    align-items: end;
    .del{
      font-size: 12px;
      color: red;
      margin-left: 8px;
      cursor: pointer;
    }
  }
  .upload-img{
    height: 60px;
    width: 60px;
    border: solid 1px #EEE;
    overflow: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    >img{
      width: 100%;
    }
  }
}
</style>