Webapi之文件上传

最新推荐文章于 2023-03-15 16:13:46 发布

Song_Lynn

最新推荐文章于 2023-03-15 16:13:46 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web js 前端文章标签： webapi 文件上传 c# vue.js

本文链接：https://blog.youkuaiyun.com/Song_Lynn/article/details/79645674

本文介绍了一种结合Vue.js前端框架和C# WebAPI后端技术实现文件上传的方法。前端利用element-ui的上传组件及axios库进行文件上传操作，后端采用C#处理文件存储。目前该方案仅在本地环境中进行了调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#Webapi之文件上传

范例说明：

前端：vue.js + element-ui + axios
后端：c# webapi
先上传存储起来，然后再读取文件
仅尝试过在本地调试，未验证服务器

前端部分

使用element-ui的上传组件

// html 直接调用api
<el-upload
          class="upload-demo"
          ref="upload"
          :action="/api/handledoc/upload'"
          :show-file-list="false"
          :multiple="false"
          :limit="1">
          <el-button size="mini" round icon="el-icon-upload">导入</el-button>
        </el-upload>

使用原生input

// html
<input id="file" type="file" @change="uploadExcel"/>

// js，调用api
uploadExcel: function () {
        var file = document.getElementById('file').files[0];
        var formData = new FormData();
        formData.append('file', file);
        console.log(file);
        this.axios({
          url: '/api/handledoc//upload',