• 在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配置

到此后臺(tái)的上傳文件已經(jīng)完成了，可以來看一下效果

文件上傳是很多系統(tǒng)都會(huì)涉及到的一個(gè)基礎(chǔ)功能，在ABP的模塊化思路下，文件管理可以做成一個(gè)通用的模塊，便可以在多個(gè)項(xiàng)目中復(fù)用，后面也許會(huì)把 現(xiàn)在的文件上傳相關(guān)的代碼抽出變成，自己一個(gè)文件管理的模塊~

后臺(tái)的api文件上傳完成了，現(xiàn)在切換到vue里面，繼續(xù)完成文章管理里面的圖片上傳

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

el-upload 組件里自定義上傳（http-request）或者直接 action="/api/file/upload"，這里使用自定義上傳

到此，圖片上傳已經(jīng)可以了！ 如下效果

但是圖片并沒有顯示出來，本地開發(fā)需要配置反向代理，正式部署的話可以使用nginx配置代理或者直接將vue項(xiàng)目跟api項(xiàng)目一起打包部署

• abp里面配置靜態(tài)文件訪問 在?YiAim.Cms.Web，CmsWebModule.cs里面OnApplicationInitialization使用（ConfigureStaticFiles）

• 本地開發(fā)配置反向代理

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

重寫運(yùn)行vue項(xiàng)目,此時(shí)圖片已經(jīng)正常顯示出來了

圖片裁剪使用的是vue的組件?ImageCropper,vue-element-admin框架好像自帶了裁剪功能，這里就不貼代碼了，需要就拉源碼吧。

到這里本章就結(jié)束了。下章來完成 接口權(quán)限，swagger上鎖以及第三方登錄