Vue + WebApi 實(shí)現(xiàn)上傳下載功能(完整示例)

更新時(shí)間：2025年10月22日 15:41:41 作者：_tiddler

本文通過實(shí)例代碼介紹Vue + WebApi實(shí)現(xiàn)上傳下載功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

vue上傳：

UI：

  <el-button
        size="mini"
        type="text"
        icon="el-icon-document-add"
        @click="handleUpload()"
        >上傳
      </el-button>
      <el-dialog
        :title="Title"
        :visible.sync="open"
        width="600px"
        append-to-body
        :close-on-click-modal="false"
      >
        <el-upload
          ref="upload"
          :limit="1"
          :on-remove="handleRemove"
          :on-error="onError"
          :file-list="fileList"
          :auto-upload="false"
          :http-request="customUpload"
          action="http://localhost:5000/api/Resource/AddResource"
          class="upload-demo"
        >
          <el-button slot="trigger" size="small" type="primary"
            >選取文件</el-button
          >
          <el-button
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload"
            >上傳到服務(wù)器</el-button
          >
          <div slot="tip" class="el-upload__tip">
            支持上傳 {{ strRebuild(fileType) }} 格式，且不超過 {{ fileSize }}M
          </div>
        </el-upload>
      </el-dialog>

點(diǎn)擊按鈕觸發(fā)方法，open為true 上傳彈窗出現(xiàn)：

handleUpload() {
      this.title = "XXXX";
      this.open = true;
    },

選擇文件后，點(diǎn)擊上傳到服務(wù)器，觸發(fā)以下方法：

 customUpload(file) {
      console.debug("進(jìn)入上傳方法");
      const param = new FormData();
      param.append("files", file.file);
      console.log("上傳文件:", file);
      console.log("FormData:", param);
      uploadFile(param);
      setTimeout(() => {
        this.open = false;
        message("success", "上傳成功");
        this.$refs.upload.clearFiles();
        this.fileList = [];
      }, 1500);
    },

其中觸發(fā)封裝的請(qǐng)求方法：

export async function uploadFile(file) {
  try {
    console.log("上傳資源參數(shù):", file);
    // 嘗試不同的路徑格式
    
    const response = await request.post("/Resource/UploadFile", file);

    console.log("API響應(yīng):", response);
    return response;
  } catch (error) {
    console.error("獲取文章列表失敗:", error);
    throw error;
  }
}

.Net 后端Api：

/// <summary>
/// 上傳客戶端文件并保存
/// </summary>
[HttpPost("UploadFile")]
public async Task<IActionResult> UploadFile(IFormFileCollection files)
{
    foreach (var file in files)
    {
        // 判斷文件是否有內(nèi)容
        if (file.Length == 0)
        {
            Console.WriteLine("該文件無任何內(nèi)容!!!");
            continue;
        }
        // 獲取附件原名
        string fileName = file.FileName;
        // 如果是獲取的含有路徑的文件名，那么截取掉多余的，只剩下文件名和后綴名
        if (fileName.Contains("\\"))
        {
            int index = fileName.LastIndexOf("\\");
            fileName = fileName.Substring(index + 1);
        }
        // 判斷單個(gè)文件大于1M
        long fileSize = file.Length;
        if (fileSize > 1024 * 1024)
        {
            Console.WriteLine($"文件大小為(單位字節(jié)):{fileSize}");
            Console.WriteLine("該文件大于1M");
        }
        // 構(gòu)建完整保存路徑
        var fullPath = Path.Combine(_webHostEnvironment.WebRootPath, $"Resources/{Guid.NewGuid()}{fileName}");
        var directory = Path.Combine(_webHostEnvironment.WebRootPath, $"Resources");
        if (!Directory.Exists(directory))
        {
            Directory.CreateDirectory(directory);
        }
        try
        {
            // 將文件保存到指定位置
            using (var stream = new FileStream(fullPath, FileMode.Create))
            {
                await file.CopyToAsync(stream);
            }
        }
        catch (Exception e)
        {
            Console.WriteLine(e.ToString());
            return StatusCode(500, new { message = "文件上傳失敗", error = e.Message });
        }
    }
    return Ok(new { success = true, message = "上傳成功" });
}

可以使用IFormFileCollection 接口類型對(duì)接前端的FormData類型。通過FileStream 類傳輸文件。

因?yàn)開webHostEnvironment.WebRootPath對(duì)應(yīng)wwwroot，所以文件會(huì)保存在wwwroot目錄下。

其實(shí)應(yīng)該有對(duì)應(yīng)的表格。上傳的文件信息會(huì)保存在數(shù)據(jù)庫里，這里圖方便就沒寫。

下載:

下載的方法有很多種，這里展示Fetch下載：

 downloadFile(fileName) {
      const fileUrl = this.$baseURL + "\\Resources\\" + fileName; // 文件的URL地址
      fetch(fileUrl)
        .then((response) => response.blob())
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          console.error(error);
        });
    },

按鈕調(diào)用：

<button @click="downloadFile('test.png')">下載文件2</button>

在方法里直接拼接了圖片（其他文件類似）的url，會(huì)在瀏覽器中下載以下圖片：

完整vue代碼：

<template>
  <div class="front-container">
    <div>
      <h2>往昔崢嶸</h2>
      <el-button
        size="mini"
        type="text"
        icon="el-icon-document-add"
        @click="handleUpload()"
        >上傳
      </el-button>
      <el-dialog
        :title="Title"
        :visible.sync="open"
        width="600px"
        append-to-body
        :close-on-click-modal="false"
      >
        <el-upload
          ref="upload"
          :limit="1"
          :on-remove="handleRemove"
          :on-error="onError"
          :file-list="fileList"
          :auto-upload="false"
          :http-request="customUpload"
          action="http://localhost:5000/api/Resource/AddResource"
          class="upload-demo"
        >
          <el-button slot="trigger" size="small" type="primary"
            >選取文件</el-button
          >
          <el-button
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload"
            >上傳到服務(wù)器</el-button
          >
          <div slot="tip" class="el-upload__tip">
            支持上傳 {{ strRebuild(fileType) }} 格式，且不超過 {{ fileSize }}M
          </div>
        </el-upload>
      </el-dialog>
      <button @click="downloadFile('test.png')">下載文件2</button>
    </div>
    <div class="blog-list">
      <BlogCard
        v-for="blog in blogs"
        :key="blog.id"
        :blog="blog"
        @view-detail="handleViewDetail"
      />
    </div>
  </div>
</template>
<script>
import { lastSubstring, strRebuildEx } from "@/utils/util";
import { message } from "@/utils/message";
import { blogList } from "../mock/blogData.ts";
import { uploadFile } from "@/api/resources";
import BlogCard from "@/components/BlogCard.vue";
export default {
  name: "BlogList",
  components: {
    BlogCard,
  },
  data() {
    return {
      Title: "上傳組件",
      open: false,
      blogs: blogList,
      // 附件列表
      fileList: [],
      // 允許的文件類型,可依據(jù)實(shí)際需求增加格式
      fileType: [
        "xls",
        "xlsx",
        "pdf",
        "doc",
        "docx",
        "txt",
        "jpg",
        "png",
        "jpeg",
        "zip",
      ],
      //fileType: ["pdf", "doc", "zip"],
      // 運(yùn)行上傳文件大小，單位 M
      fileSize: 10,
    };
  },
  methods: {
    handleViewDetail(blog) {
      console.log("查看博客詳情:", blog);
    },
    // downloadFile(fileName) {
    //   const fileUrl = this.$baseURL + "\\Resources\\" + fileName; // 文件的URL地址
    //   console.debug(fileUrl);
    //   const link = document.createElement("a");
    //   link.href = fileUrl;
    //   link.setAttribute("download", fileName);
    //   link.click();
    // },
    downloadFile(fileName) {
      const fileUrl = this.$baseURL + "\\Resources\\" + fileName; // 文件的URL地址
      fetch(fileUrl)
        .then((response) => response.blob())
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          console.error(error);
        });
    },
    handleUpload() {
      this.title = "XXXX";
      this.open = true;
    },
    // 清空表單
    clear() {
      // 清空附件
      this.$refs.upload.clearFiles();
    },
    // 附件檢查
    // 檢查附件是否屬于可上傳類型
    // 檢查附件是否超過限制大小
    checkFile() {
      var flag = true;
      var tip = "";
      var files = this.$refs.upload.uploadFiles;
      files.forEach((item) => {
        // 文件過大
        if (item.size > this.fileSize * 1024 * 1024) {
          flag = false;
          tip = " 文件超過" + this.fileSize + "M";
        }
        // 文件類型不屬于可上傳的類型
        if (!this.fileType.includes(lastSubstring(item.name, "."))) {
          flag = false;
          tip = " 文件類型不可上傳";
          this.clientOpen = false;
        }
      });
      if (!flag) {
        message("error", tip);
      }
      return flag;
    },
    // 提交附件
    submitUpload() {
      if (this.checkFile()) {
        console.log("上傳附件...");
        this.$refs.upload.submit();
      } else {
        console.log("取消上傳");
      }
    },
    // 自定義文件上傳方法
    customUpload(file) {
      console.debug("進(jìn)入上傳方法");
      const param = new FormData();
      param.append("files", file.file);
      // 模擬上傳成功
      console.log("上傳文件:", file);
      console.log("FormData:", param);
      uploadFile(param);
      // 模擬API調(diào)用
      setTimeout(() => {
        this.open = false;
        message("success", "上傳成功");
        this.$refs.upload.clearFiles();
        this.fileList = [];
      }, 1500);
    },
    // 移除附件
    handleRemove(file, fileList) {
      console.log("移除附件...");
    },
    // 附件上傳失敗，打印下失敗原因
    onError(err) {
      message("error", "附件上傳失敗");
      console.log(err);
    },
    strRebuild(arr) {
      strRebuildEx(arr, ",");
    },
  },
};
</script>
<style>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2c3e50;
  padding: 1rem 2rem;
}
.nav-brand {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-link {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.nav-link:hover {
  background-color: #34495e;
  transform: translateY(-1px);
}
.router-link-active {
  background-color: #42b883;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.separator {
  width: 1px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0 0.5rem;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.viewmore-row {
  float: right;
  background: #12b7de;
  color: #fff;
  border-radius: 3px;
  padding: 0px 10px;
  height: 30px;
}
.bg-purple {
  background: #eaeaea;
  -webkit-animation: loading 1s ease-in-out infinite;
  animation: loading 1s ease-in-out infinite;
}
@keyframes loading {
  0% {
    width: 90%;
  }
  50% {
    width: 100%;
  }
  to {
    width: 90%;
  }
}
[v-cloak] {
  display: none !important;
}
</style>

根據(jù)自己需要把其中報(bào)錯(cuò)，不相干的代碼刪減掉。

到此這篇關(guān)于Vue + WebApi 實(shí)現(xiàn)上傳下載功能的文章就介紹到這了,更多相關(guān)Vue WebApi上傳下載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: