提要
我们在写项目的过程中,难免会遇到上传文件的功能,那我们将文件上传到云端的时候,又不能直接从客户的本地去获取,这个时候我们就需要将文件上传到iis当中,再从IIS中上传到服务器中。
废话不多说,直接上代码。
做七牛云中的配置
七牛云 | 简单 可信赖 首先打开七牛云的官网注册一个账号 或登录
使用七牛云的一个好处就是 它每个空间都有自己的域名 且这些域名是免费的
进来以后可以看到左上角有一个 菜单按钮 点进去
进来以后可以看到这样的一个页面
这时候点击左侧的空间管理和新建空间
存储区域按照你自己的来即可 这个无要求,输入一个空间名称,访问控制必须为公开。
可以看到我创建完成后的存储空间
如果想知道域名的话 可以自己上传一个文件查看一下
Vue+ElementUI
这里是html代码
<template>
<div class="AddUser">
<el-form :model="userFrom" :rules="ruleGood" ref="userFrom" label-width="120px" class="demo-ruleForm">
<el-form-item label="当前图片" :label-width="formLabelWidth" prop="name">
<el-upload class="upload-demo" :action="fangwen" :file-list="imgadd" :on-success="handleChange"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
</div>
</template>
接下来是JS代码
<script>
export default {
data() {
return {
//上传文件网址
fangwen: "API控制器访问路径",
imgadd: [],
formLabelWidth: '120px',
}
},
methods: {
handleChange(file) {
console.log(file)
接收路径 = file.newFileName;
},
}
}
</script>
以上是Vue+ElementUI的代码
.Net Core WebApi
控制器代码 PS:控制器中的方法必须是post类型的
#region 文件流
/// <summary>
/// 文件上传
/// </summary>
/// <param name="file">图片路径</param>
/// <returns></returns>
[HttpPost]
public IActionResult UpLoad(IFormFile file)
{
//获取文件名并赋值
string? fname = _upoad.UpLoads(file);
//返回数据
return Ok(new
{
newFileName = "七牛云域名" + fname
});
}
#endregion
接下来是封装后的方法 这里存放的是七牛云的密钥AK和SK
/// <summary>
/// 七牛云密钥AccessKey和SecretKey
/// </summary>
class Settings
{
public static string AccessKey { get; set; } = "AccessKey ";
public static string SecretKey { get; set; } = "SecretKey ";
}
AK和SK在七牛云个人中心的密钥管理中可以查看 复制粘贴即可
接下来是将文件保存再本地后并重新生成文件名称 且继续上传至七牛云服务器
/// <summary>
/// 上传云端
/// 七牛云
/// </summary>
/// <param name="file">图片路径</param>
/// <returns></returns>
public string UpLoads(IFormFile file)
{
//这里是生成上传凭证的密钥
Mac mac = new Mac(Settings.AccessKey, Settings.SecretKey);
//七牛云空间名称
string bucket = "空间名称";
//重新生成文件名称
string saveKey = DateTime.Now.ToString("yyyyMMddHHmmssffff") + Path.GetExtension(file.FileName);
//分析绝对路径
string rootdir = AppContext.BaseDirectory.Split(@"\bin\")[0];
//生成上传到iis文件夹中的绝对路径
var path = rootdir + @"/img/" + saveKey;
//获取该文件的本地绝对路径 用于上传该文件
string localFile = path;
//清空文件流
using (FileStream fs = File.Create(path))
{
file.CopyTo(fs);
fs.Flush();
}
//实例化PutPolicy
PutPolicy putPolicy = new();
// 如果需要设置为"覆盖"上传(如果云端已有同名文件则覆盖),请使用 SCOPE = "BUCKET:KEY"
putPolicy.Scope = bucket;
// 生成上传凭证
string jstr = putPolicy.ToJsonString();
string token = Auth.CreateUploadToken(mac, jstr);
//UseHttps表示:是否采用https域名 UseCdnDomains表示:上传是否使用CDN上传加速 MaxRetryTimes表示:重试请求次数
UploadManager um = new UploadManager(new Config() { Zone = Zone.ZONE_CN_South, UseHttps = false, UseCdnDomains = false, MaxRetryTimes = 3 });
//进行上传七牛云
HttpResult result = um.UploadFile(localFile, saveKey, token, new PutExtra());
//返回生成后的文件名
return saveKey;
}
以上就是Vue+ElementUI+.Net上传文件的代码