vue3 elelment-Plus el-update组件手动上传图片，不自动上传图片

一、组件库方式上传

<template>
<div class="front upload-item">
    <el-upload
    :limit="1"
    action="#"
    list-type="picture"
    :auto-upload="false"
    accept="image/png,image/gif,image/jpg,image/jpeg"
    :on-success="handleSuccess"
    :on-change="imgSaveToUrl"
    :show-file-list='false'
    ref='frontUpload'
    >
    <img  class="icon-img" v-if='imageFrontUrl' :src="imageFrontUrl"/>
    <img  class="icon-img" v-else src="@/assets/defaultImg.png"/>
</el-upload>
</template>

//js代码
const imageFrontUrl = ref('')
function imgSaveToUrl (file) {
    imageFrontUrl.value = URL.createObjectURL(file.raw)
    const fileSize = file.size
    const fileType = file.raw.type
    if (!fileSize) {
    // 是否为空
        ElMessage({
            type: 'error',
            showClose: true,
            message: '无效的文件，请重新选择！',
        })
        logoPicRemove()
        return
    }
    if (fileSize / 1024 / 1024 > 10) {
    // 图片大小
      ElMessage({
            type: 'error',
            showClose: true,
            message: '请上传小于10M的图片！',
        })
        logoPicRemove()
        return
    }
    if (fileType.indexOf('image') === -1) { 
    // 如果不是图片格式
        ElMessage({
            type: 'error',
            showClose: true,
            message: '不是有效的图片文件，或格式不支持，请重新选择!',
        })
        logoPicRemove()
        return
    }
        imageUpload(file)
    }

function logoPicRemove() { // 清空内容
    frontUpload.value.clearFiles()
    imageFrontUrl.value = ''
}
async function imageUpload (file) {
  let res = await axios.post({
   ........ 
  })
}

值得一提的是还有一种将raw文件类型转换成url的方式

// 获取选中图片的预览路径，并赋值给本地img路径，在前端展示
    imgSaveToUrl (file) {
      // 获取上传图片的本地URL，用于上传前的本地预览，转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
      this.imageUrl = URL.createObjectURL(file.raw)
      console.log('图片预览地址：', this.imageUrl)
    }
  }

二、原生上传图片方式

<template>
  <div  @click.capture.stop="handle_doUpload">
    <input
      type="file"
      accept="image/*"
      ref="getFile"
      @change="handle_choseFile"
    />
  </div>
</template>

const emit = defineEmits(['update:fileUrl'])
defineProps({
  fileUrl: {
    type: String,
    default: ""
  },
})

const getFile = ref(null)
function handle_doUpload() {
  getFile.value.click()
}
async function handle_choseFile(e) {
  let file = getFile.value.files[0]
  if (file.size > 10 * 1024 * 1024) {
    // 文件大小超限了
    ElMessage.closeAll()
    ElMessage({
      type: 'error',
      showClose: true,
      message: '请上传小于10M的图片'
    })
    getFile.value.value = '' // 清空内容
    return
  }
  let forms = new FormData()
  forms.append('file', file)
  forms.append('filePath', `pc/client-${moment().format('YYYY-MM-DD')}/`)
  getFile.value.value = '' // 清空内容
  let res = await axios.post({
   ........
  })
  if (res) {
    emit("update:fileUrl", res.data) // 其他操作
  }
}