asp.net core中上传文件的解决方案

上传是经常使用的功能，每遇到一个新项目，频繁写重复代码不是什么好事，推荐一个上传类库，仅通过配置文件，即可拥有上传功能和下载控制，RsCode.Storage是专门解决上传这个问题的。它分两个版本：本地服务器上传文件库和使用七牛上传远程服务器

一本地服务器上传步骤

RsCode.Storage.LocalStorage可以完成文件上传到本地服务器，以及上传文件的访问控制，通过在appsettings.json文件中配置即可拥有这些功能，使用步骤如下

1.appsettings.json中添加上传的配置信息

 //本地存储配置 "LocalStorage": {"UploadTokenUrl":"/storage/uptoken", //获取token的地址"UploadUrl": "/storage/upload",  //文件上传地址"SavePath": "d:\\test\\",  //服务器上保存文件的物理路径 必须以/或\ 结尾"AcccessPath":"/res/", //虚拟文件访问地址开始的标记"AccessKey": "",//不填"SecretKey": "",//不填"Domain": "上传后资源地址", //上传后资源地址，例：http://res.rscode.cn"Bucket": "", //不填"Zone": "", //不填"UploadTokenExpireTime": 30, // 上传token有效时间单位：秒"DownloadTokenExpireTime": 5,//下载token有效时间"ManageTokenExpireTime": 5   //管理token有效时间}

这个示例配置，可以将上传文件post到/storage/upload，保存在d盘test目录下，通过 http://xx.cc/res/xx.xx访问

2.添加存储服务

引用RsCode.Storage.LocalStorage到项目中
添加本地存储服务

public void ConfigureServices(IServiceCollection services)
{//其它服务...services.AddLocalStorage(Configuration);
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{//其它服务...app.UseLocalStorage(Configuration); //本地上传中间件
}

3.获取上传token信息

注入服务 IEnumerable<IStorageProvider>providers
获取实例 var local=providers.FirstOfDefault(s=>s.StorageName=="local");
获取token var tokenInfo=local.GetUploadToken();

4.发送上传请求

//获取本地存储配置
[Inject]LocalStorageOptions storageOptions { get; set; }

1.获取上传token信息

var local=providers.FirstOfDefault(s=>s.StorageName=="local");
var tokenInfo=local.GetUploadToken();模拟上传,提交参数key,token,上传文件，从表单中取值local.UploadAsync();

5.访问上传的资源

中间件会拦截 LocalStorage.AccessPath 值开头的网址，然后去LocalStorage.SavePath值定义的物理路径中找文件，如果找到就返回文件
继承ILocalStorageAccess,实现方法AccessFileAsync(),可以自定义资源访问逻辑

注意：上传地址不能和现有页面或控制器重名

调试上传时程序退出的办法：
vs 工具-选项-项目和解决方案-web项目，取消 “在浏览器窗口关闭时停止调试程序，在调试停止时关闭浏览器”

二远程服务器上传的步骤

使用七牛存储,直接存储文件到远程服务器

1. 在appsettings.json中添加存储配置

//存储配置"Storage": [{"Name": "qiniu","UploadTokenUrl": "https://localhost:5001/storage/uptoken?provider=qiniu","AccessKey": "your ak","SecretKey": "your sk","Domain": "http://res.tthongbao.cn", //云存储域名"Bucket": "rsnpan","Zone": "ZONE_CN_South", //华东 ZONE_CN_East  华北 ZONE_CN_North 华南 ZONE_CN_South  北美 ZONE_US_North"UploadTokenExpireTime": 30, // 上传token有效时间单位：秒"DownloadTokenExpireTime": 5, //下载token有效时间"ManageTokenExpireTime": 5 //管理token有效时间},{"Name": "qiniu","UploadTokenUrl": "https://localhost:5001/storage/uptoken?provider=qiniu","AccessKey": "your ak","SecretKey": "your sk","Domain": "http://res.rscode.cn", //云存储域名"Bucket": "res-rscode-cn","Zone": "ZONE_CN_East", //华东 ZONE_CN_East  华北 ZONE_CN_North 华南 ZONE_CN_South  北美 ZONE_US_North"UploadTokenExpireTime": 30, // 上传token有效时间单位：秒"DownloadTokenExpireTime": 5, //下载token有效时间"ManageTokenExpireTime": 5 //管理token有效时间}]

2. 配置服务

services.AddQiniuStorage(Configuration);

3. 调用IStorageProvider

3.1注入

IEnumerable<IStorageProvider> providers

3.2实例存储对象

var qiniu = providers.FirstOrDefault(s => s.StorageName == "qiniu")

3.3指定存储区

qiniu.UseBucket("rsyunpan");

实例代码

[Authorize]
[HttpGet("uptoken")]
public async Task<object> UpToken([FromServices] IEnumerable<IStorageProvider> providers,string key, string provider = "qiniu")
{var userId = User.Claims.FirstOrDefault(x => x.Type == "UserId")?.Value;var qiniu = providers.FirstOrDefault(s => s.StorageName == provider);qiniu.UseBucket("rsyunpan");var tokenInfo =await qiniu.GetUploadTokenInfoAsync(key,DateTime.Now.AddMinutes(5));return tokenInfo;
}

七牛图缩图
https://developer.qiniu.com/dora/1279/basic-processing-images-imageview2

七牛存储前端代码实例

使用el-upload

vue文件上传

html

@{Layout = null;ViewData["title"] = "上传demo";var info = ViewBag.TokenInfo as RsCode.Storage.TokenResult;}
<el-upload class="avatar-uploader"ref="upload":action="upload_url":data="upload_data":show-file-list="false":on-success="handleAvatarSuccess":on-error="handleError":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>

js

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>new Vue({el: '#app',data() {return {imageUrl: '',// 七牛云上传储存区域的上传域名（华东、华北、华南、北美、东南亚）upload_url: "@Html.Raw(info.UploadUrl)",domain:"@info.Domain",upload_data: {key: "",token:"@info.Token"}};},methods: {handleAvatarSuccess(res, file) {console.log('res=' + JSON.stringify(res));console.log('file=' + JSON.stringify(file));if (res.key && res.key.length > 0) {let fileUrl = this.domain + res.key;//本地url//this.imageUrl = URL.createObjectURL(file.raw);this.imageUrl = fileUrl;} else {this.handleError(res);}},handleError: function (res) {this.$message({message: "上传失败,请重试",duration: 2000,type: "warning"});if (res.error == "expired token"){//重新获取token}},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}let key = file.name; // 文件资源名//wwwroot下准备好文件夹filekey = 'file/' + Math.random().toString(36).substr(2) + '.' + key.split(".")[1];this.upload_data.key = key;return isJPG && isLt2M;},getUploadToken() {this.http.get("/storage?provider=qiniu&action=uptoken").then(ret => {this.domain = ret.domain;this.token = ret.token;}).catch(err => {})} }})
</script>

css

<style>.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}
</style>