.vue文件_.NET Core 3.1 WebAPI+Vue+Element UI实现文件上传

weixin_39867708

墨衍会员 · AI 创作全网分发码龄9年

关注

最新推荐文章于 2026-07-30 10:12:35 发布 443 阅读 AI 写同款· GEO 优化 ›

(给DotNet加星标，提升.Net技能)

转自：吕小不cnblogs.com/shapman/p/12272120.html

前言

首先，先看我个人的项目结构。

这个webapi项目是专门作为图片上传的业务处理，而其中分为两个控制器：单图片上传和多图片上传。在接下来的内容主要还是针对单文件上传，对于多文件的上传，我暂且尚未研究成功。

其中pictureoptions类，由于我把关于图片上传相关的配置项(保存路径、限制的文件类型和大小)写在了配置文件中，所以接下来会通过依赖注入的方式，注入到这个类中

第一步，配置文件的设置

"PictureOptions": {

然后在项目根目录下新建PictureOptions类

public

第二步，依赖注入

servicesConfiguration

在SingleImageUploadController中构造注入

这里要注意，你要把Cors跨域配置好，关于跨域《.NET Core WebAPI + vue.js + axios 实现跨域》，可以前往阅读我的另一篇博文

第三步，构建POST api

在element-ui中关于upload组件的api说明文档，可以发现一个非常重要的信息

upload组件他实际是通过提交form表单的方式去请求url

所以，后台这边，我们也是要通过form表单，获取上传的文件，具体代码如下：

///

第四步前端Vue项目

  action="http://192.168.43.73:5008/api/SingleImageUpload"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-success="handleUploadSuccess"
  :on-error="handleUploadError"
>
class="el-icon-plus">

"dialogVisible">"100%" :src="dialogImageUrl" alt />

然后是method

data () {
return {
dialogImageUrl: '',
dialogVisible: false,
images: []
  }
},
methods: {
  handleRemove (file, fileList) {
this.images.forEach((element, index, arr) => {
if (file.name === element.oldFile.name) {
        arr.splice(index, 1)
      }
    })
console.log(this.images)
  },
  handlePictureCardPreview (file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
  },
  handleUploadSuccess (response, file, fileList) {
console.log(response)
console.log(file)
console.log(fileList)
this.images.push({
newFileName: response.newFileName, // 服务器端的新文件名，即后端回调过来的数据
      oldFile: {
name: file.name, // 上传之前的文件名，客户端的
        url: file.url // 页面显示上传的图片的src属性绑定用的
      }
    })
  },
  handleUploadError (response, file, fileList) {
this.$message.error(JSON.parse(response.message).msg)
  }
}