vue3封装图片上传组件的两种方式

1、使用element plus中的 el-upload实现图片上传
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>

script

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({
   ........ 
  })
}

2、使用input的type="file"来实现
template

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

script

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) // 其他操作
  }
}