vue3_11上传文件

选择文件用的文件字段

<input
  type="file"
  @change="onChangeFile"
  accept="image/png,image/jpg,image/jpeg"   //这里选择文件格式
/>

---

使用 FileReader 生成预览图像

<template>
<div v-if="imagePreviewUrl">
    <img class="image-preview" :src="imagePreviewUrl" alt="" />
  </div>
</template>

<script>
  export default{
    data() {
    return {
      imagePreviewUrl: null,
    };
  },
  methods: {
    createImagePreview(file) {
      const reader = new FileReader();
      reader.readAsDataURL(file);

      reader.onload = event => {
        this.imagePreviewUrl = event.target.result;
      };
    },
     onChangeFile(event) {
      console.log(event.target.files);
      const file = event.target.files[0];

      if (file) {
        this.file = file;

        this.title = file.name.split('.')[0];

        // 生成预览图像
        this.createImagePreview(file);
      }
    },
  }
  }
</script>

---

上传文件

async createFile(file, postId) {
  //  创建表单
  const formData = new FormData();

  // 添加字段
  formData.append('file', file);

  // 上传文件
  try {
    const response = await apiHttpClient.post(
      `/files?post=${postId}`,
      formData,
      {
        headers: {
          Authorization: `Bearer ${this.token}`,
        },
      },
    );

    // 清理
    this.file = null;
    this.imagePreviewUrl = null;
    this.$refs.file.value = '';
    console.log(response.data);
  } catch (error) {
    this.errorMessage = error.message;
  }
},

---

上传进度

<template>
 <div v-if="imageUploadProgress">
    <span class="image-upload-progress">{{ imageUploadProgress + '%' }}</span>
  </div>
</template>

<script>
async createFile(file, postId) {
      //  创建表单
      const formData = new FormData();

      // 添加字段
      formData.append('file', file);

      // 上传文件
      try {
        const response = await apiHttpClient.post(
          `/files?post=${postId}`,
          formData,
          {
            headers: {
              Authorization: `Bearer ${this.token}`,
            },
            onUploadProgress: event => {      //使用这个函数获取到文件的大小和已上传大小
              console.log(event);

              const { loaded, total } = event;

              this.imageUploadProgress = Math.round((loaded * 100) / total);   //这里计算出进度
            },
          },
        );

        // 清理
        this.file = null;
        this.imagePreviewUrl = null;
        this.$refs.file.value = '';
        this.imageUploadProgress = null;
        console.log(response.data);
      } catch (error) {
        this.errorMessage = error.message;
      }
    },
</script>

拖放上传

<div class="drag-zone" @dragover.prevent @drop.prevent="onDropDragZone">
    <div>把图像文件拖放到这里</div>
  </div>

.drag-zone {
  width: 360px;
  height: 250px;
  background: #f8f8f8;
  color: #ababab;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

onDropDragZone(event) {
    console.log(event.dataTransfer.files);

    const file = event.dataTransfer.files[0];

    if (file) {
      this.file = file;

      //  设置内容标题
      this.title = file.name.split('.')[0];

      // 生成预览图像
      this.createImagePreview(file);
    }
  },

拖放文件时的激活状态

<div
  :class="['drag-zone', { active: dragZoneActive }]"
  @dragover.prevent
  @drop.prevent="onDropDragZone"
  @dragenter="dragZoneActive = true"
  @dragleave="dragZoneActive = false"
>
  <div>把图像文件拖放到这里</div>
</div>

.drag-zone.active {
  background: #83c7f7;
  color: #179039;
}

onDropDragZone(event) {
  console.log(event.dataTransfer.files);

  this.dragZoneActive = false;

  const file = event.dataTransfer.files[0];

  if (file) {
    this.file = file;

    //  设置内容标题
    this.title = file.name.split('.')[0];

    // 生成预览图像
    this.createImagePreview(file);
  }
},