8) 文件上传&图片裁剪上传

• 在abp YiAim.Cms.Application.Contracts 里面新建Files文件夹，新建

IFileAppService.cs

FileUploadInput


• 在 YiAim.Cms.Application  里面新建Files文件夹，新建 FileAppService.cs

• 在 YiAim.Cms.HttpApi里Controllers 新建

• FileController.cs

• 在 YiAim.Cms.Web 里面的 CmsWebModule配置

到此后台的上传文件已经完成了，可以来看一下效果

文件上传是很多系统都会涉及到的一个基础功能，在ABP的模块化思路下，文件管理可以做成一个通用的模块，便可以在多个项目中复用，后面也许会把 现在的文件上传相关的代码抽出变成，自己一个文件管理的模块~

后台的api文件上传完成了，现在切换到vue里面，继续完成文章管理里面的图片上传

• 在src\api 新建file.js ,然后再文章里面使用接口

el-upload 组件里自定义上传（http-request）或者直接 action="/api/file/upload"，这里使用自定义上传

到此，图片上传已经可以了！ 如下效果

但是图片并没有显示出来，本地开发需要配置反向代理，正式部署的话可以使用nginx配置代理或者直接将vue项目跟api项目一起打包部署

• abp里面配置静态文件访问 在 YiAim.Cms.Web，CmsWebModule.cs里面OnApplicationInitialization使用（ConfigureStaticFiles）

• 本地开发配置反向代理

在  vue.config.js 里面的 devServer里面配置

重写运行vue项目,此时图片已经正常显示出来了

图片裁剪使用的是vue的组件 ImageCropper,vue-element-admin框架好像自带了裁剪功能，这里就不贴代码了，需要就拉源码吧。

到这里本章就结束了。下章来完成 接口权限，swagger上锁以及第三方登录