Vue中原生实现文件上传

原理：*就是利用原生的type=file input输入框，由于原生输入框样式很难修改，可以让其透明，在他的下面放一张图片或者按钮，效果就是看到是图片或者按钮，选中的是输入框，功能和样式都实现了

<template>
  <div
    class="upload__wrap"
    :style="{ width: `${size}px`, height: `${size}px` }"
  >
    <input
      ref="fileInputRef"
      type="file"
      class="file-input"
      title=""
      @change="fileChange"
    >
    <img
      v-if="!imgUrl"
      class="avatar__img"
      src="@/assets/image/avatar.png" >
    <img
      v-else
      class="avatar__img"
      :src="imgUrl" >
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  size: {
    type: [String, Number],
    default: 50,
  },
  modelValue: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["update:model-value", "change"]);
const { size } = toRefs(props);
const imgUrl = computed<string>({
  set(val) {
    emit("update:model-value", val);
  },
  get() {
    return props.modelValue;
  },
});
const fileInputRef = ref();
/**
 * 上传头像
 */
const uploadInf = async (data: FormData) => {
  
};
const fileChange = () => {
  const file = fileInputRef.value.files[0];
  if (!file) return;
  const formData = new FormData();
  formData.append("file", file);
  uploadInf(formData);
};
</script>
<style lang="scss" scoped>
.upload__wrap {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  .file-input,
  .avatar__img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .file-input {
    opacity: 0;
    z-index: 10;
    cursor: pointer;
  }
  .avatar__img {
    z-index: 1;
    cursor: pointer;
  }
}
</style>