自定义上传组件

封装上传组件，在前端项目中可以作为公共组件使用

<template>
  <div class="upload-container">
    <el-upload
      ref="fileUpload"
      class="upload-demo"
      drag
      :action="uploadUrl"
      multiple
      :headers="headers"
      :disabled="isView"
      :on-success="handleFileSuccess"
      :on-remove="handleRemove"
      style="width: 670px"
      :file-list="fileList"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">请将文件拖到此处，或<em>点击上传</em></div>
      <template slot="file" slot-scope="{ file }">
        <div class="file-item">
          {{ file.name }}
          <el-button
            type="text"
            size="small"
            @click="handleDownloadFile(file.url)"
            >下载</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="handleRemove(file)"
            v-if="!isView"
            >删除</el-button
          >
        </div>
      </template>
    </el-upload>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { Message, Loading } from "element-ui";
import { downloadFile } from "@/utils/common.js";

export default {
  name: "uploadCom",
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    isView: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      number: 0,
      uploadUrl: process.env.VUE_APP_BASE_API + "/file/file/uploads",
      headers: { Authorization: "Bearer " + getToken() },
      fileList: [],
    };
  },
  watch: {
    value: {
      handler(val) {
        let temp = 1;
        if (val && val.length > 0) {
          this.fileList = val.map((item) => {
            item.uid = item.uid || new Date().getTime() + temp++;
            return item;
          });
        } else {
          this.fileList = [];
          return [];
        }
      },
    },
  },
  methods: {
    //删除上传文件
    handleRemove(file, fileList) {
      this.fileList = this.fileList.filter((item) => item.id != file.id);
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log('自定义组件response: ', response);
      if (response.code === 200) {
        Message.success("上传成功！");
        let newArr = [];
        newArr.push({
          id: response.data[0].id,
          name: response.data[0].fileName,
          url: response.data[0].previewUrl,
        });
        this.fileList = this.fileList.concat(newArr);
        this.$emit("input", this.fileList);
      }
    },
    //下载文件
    handleDownloadFile(url) {
      downloadFile(url);
    },
  },
};
</script>

辅助函数

export async function downloadFile(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`An error has occurred: ${response.statusText}`);
    }
    const blob = await response.blob();
    const fileName = extractFileNameFromUrl(url);
    const urlObject = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = urlObject;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(urlObject);
    link.remove();
  } catch (error) {
    console.error("Download failed:", error);
    Message.error("文件下载失败，请重试。");
  }
}

// 辅助方法：从URL中提取文件名
export function extractFileNameFromUrl(url) {
  const urlParts = url.split("/");
  return decodeURIComponent(urlParts[urlParts.length - 1]); // 解码并返回最后一部分作为文件名
}