ajax上传图片到又拍云,又拍云存储(UpYun)的.NET Core填坑
背景
最近搞一个商城类的项目,图片资源我采用的是第三方云储存服务。又拍云(UpYun)是国内知名的云存储服务商,还提供了10G的免费空间,还可以做图片预处理(如:缩略图),还提供了FTP的管理,配置和功能上完全胜任!
但是,又拍云的官方网站找了一圈,找不到C#相关的SDK,GitHub找到的第三方的SDK用的都不是最新版的API,跟官方的文档一点都不匹配。“拿来主义”宣告失败!无奈之下,只能参考官方的PHP-SDK“自己动手丰衣足食”。
说实话,又拍云的官方文档的很多地方语焉不详,所以显得坑还是比较多的。尤其在signature和policy的获取,作为老司机的我,不看官方的PHP-SDK代码,还被卡了很久。于是,项目的demo刚搞定,我就赶紧把填坑的过程记录下来~
上传文件
我们项目主要是用Web后台进行图片管理,文件size不大。所以,直接用Form API即可。
Form上传的流程:
1.首先创建有一个页面放置上传表单,例如:upload.html
Upyun表单上传例子
请选择上传文件
选择文件:
确定
删除文件:
删除
2.发个Ajax请求服务端,计算签名校验的参数,得到Policy & Authorization
前端JS请求签名信息:
var UPYUN = null;
function getUpYunAuth() {
$.post("/Ajax/GetUpYunAuth", "", function (res) {
UPYUN = res;
});
}
getUpYunAuth() ;
接着是服务端GetUpYunAuth的代码:
//MD5加密
public static string GetMD5(string inputStr)
{
using (var md5 = MD5.Create())
{
var bs = md5.ComputeHash(Encoding.UTF8.GetBytes(inputStr));
var result = BitConverter.ToString(bs);
result = result.Replace("-", "");
return strResult;
}
}
//HMAC-SHA1加密
public static byte[] GetHMACSHA1Byte(string inputStr, string key)
{
byte[] secrectKey = Encoding.UTF8.GetBytes(key);
using (var hmac = new HMACSHA1(secrectKey))
{
hmac.Initialize();
var result = hmac.ComputeHash(Encoding.UTF8.GetBytes(inputStr));
return result;
}
}
//获取Policy
public static string GetPolicy(string bucket, string saveKey, string date)
{
var ts = Helper.StringUtil.GetTimeStamp() + 30 * 60; //时间戳 30分钟过期
var policyDict = new Dictionary
{
{ "bucket", bucket },
{ "expiration", ts.ToString() },
{ "save-key", saveKey },
{ "date", date }
};
var policy = JsonConvert.SerializeObject(policyDict);
policy = Convert.ToBase64String(Encoding.UTF8.GetBytes(policy));
return policy;
}
//获取签名
public static string GetSignature(string user, string pass, string method, string uri, string date = null, string policy = null)
{
var paramList = new List();
paramList.Add(method);
paramList.Add(uri);
if (date != null) paramList.Add(date);
if (policy != null) paramList.Add(policy);
var bt =GetHMACSHA1Byte(string.Join("&", paramList.ToArray()), pass);
var result = Convert.ToBase64String(bt);
result = "UPYUN " + user + ":" + result;
return result;
}
//Ajax请求的Action方法
[HttpPost]
public IActionResult GetUpYunAuth()
{
//获取又拍云的配置
var host = ConfigLoader.GetAppConfigValue("UpYunHost");
var saveKey = ConfigLoader.GetAppConfigValue("UpYunSaveKey");
var bucket = ConfigLoader.GetAppConfigValue("UpYunBucket");
var domain = ConfigLoader.GetAppConfigValue("UpYunDomain");
var user = ConfigLoader.GetAppConfigValue("UpYunUser");
var pass = ConfigLoader.GetAppConfigValue("UpYunPassword");
pass = GetMD5(pass).ToLower();
string date = DateTime.UtcNow.ToString("ddd, dd MMM yyyy HH':'mm':'ss 'GMT'", new CultureInfo("en-US"));
var policy = GetPolicy(bucket, saveKey, date); //计算policy
var auth = GetBodySignature(user, pass, "POST", "/" + bucket, date, policy); //计算签名
var result = new { host, saveKey, bucket, domain, policy, auth };
return Json(result);
}
关于配置项,做个简要的说明:
UpYunHost: API调用地址+bucket,如:UpYunSaveKey: 文件保存路径方案,如:/uploads/{year}{mon}/{random}_{filename}{.suffix}
UpYunDomain: 文件保存后访问的地址,如:UpYunUser和UpYunPassword,分别对应操作员的账号和密码
3.提交表单上传文件
function doUpload() {
var form = document.querySelector("form");
var uploadData = new FormData(form);
uploadData.append('policy', UPYUN["policy"]);
uploadData.append('authorization', UPYUN["auth"]);
var yunUrl = UPYUN["host"];
$.ajax({
url: yunUrl,
type: 'POST',
data: uploadData,
cache: false,
processData: false,
contentType: false,
success: function (data) {
var res = JSON.parse(data);
if (res.code == 200) {
$("#formInfo").html("上传成功");
var imgUrl = UPYUN["domain"] + res.url;
$("#imgShow").html('');
}
console.log('upload success');
console.log(res);
},
fail: function (data) {
console.log(data);
}
});
}
删除文件
删除文件用的是Restful API,Authorization的生成的跟FormAPI差不多,不需要policy,只要把生成的Authorization放在RequestHeader里头就好了。这里有一点要注意的是生成Signature的uri必须加上操作文件的路径
例如://test/demo.jpg
如果FormAPI上传的话,只需要 /
前端js代码其实很简单
function delFile() {
var fileUrl = $("#delFileUrl").val();
if (confirm("是否确定删除文件:" + fileUrl)) {
$.post("/Ajax/DelUpYunFile", "fileUrl=" + fileUrl, function (res) {
console.log(res);
});
}
}
关键是后端Action的处理
[HttpPost]
public IActionResult DelUpYunFile()
{
var fileUrl = Request.Form["fileUrl"];
var host = ConfigLoader.GetAppConfigValue("UpYunHost");
var bucket = ConfigLoader.GetAppConfigValue("UpYunBucket");
var user = ConfigLoader.GetAppConfigValue("UpYunUser");
var pass = ConfigLoader.GetAppConfigValue("UpYunPassword");
pass = BizLib.Helper.Security.GetMD5(pass, false).ToLower();
string date = DateTime.UtcNow.ToString("ddd, dd MMM yyyy HH':'mm':'ss 'GMT'", new CultureInfo("en-US"));
//计算签名
var auth = GetBodySignature(user, pass, "DELETE", "/" + bucket + fileUrl, date);
var url = host + fileUrl;
//拼装RequestHeader
var headers = new Dictionary
{
{ "Authorization", auth },
{ "Date", date },
{ "User-Agent", "UpYunDotNetCoreSDK/Tony2019" },
{ "x-upyun-async", "true" }
};
//HTTP Request
var result = new SMessage();
using (var httpClient = new HttpClient())
{
if(headers != null)
{
foreach(var kv in headers)
{
httpClient.DefaultRequestHeaders.Add(kv.Key, kv.Value);
}
}
try
{
var resp = resp = httpClient.DeleteAsync(url).Result;
if (resp.StatusCode == System.Net.HttpStatusCode.OK)
{
result.data = resp.Content.ReadAsStringAsync().Result;
result.succ = true;
}
else
{
result.ret = (int)resp.StatusCode;
result.data = "Request Error";
}
}
catch (Exception ex)
{
result.SetCustomErr(ex.Message);
}
}
return Json(result);
}
缩略图
关于图片上传的处理,官方的文档已经描述得比较很详细,我这里就不赘述了。直接给传送连接完事:https://help.upyun.com/knowledge-base/image/
结尾
其他的文件操作,比如:创建目录、获取目录文件列表、文件属性等等,这些都是RESTFul API的内容,套路跟删除文件是一样的。如果大家有需要,可以自己举一反三,我也不继续啰嗦了。
ajax上传图片到又拍云,又拍云存储(UpYun)的.NET Core填坑相关推荐
- 阿里云ECS服务器配置LAMP时安装配置mysql数据库填坑(二)
阿里云ECS服务器配置LAMP时安装配置mysql数据库填坑(二) 上篇文章讲到的是安装apache服务器时遇到的坑,经过排错总算是把Apache的坑填完了,没想到安装mysql又跳坑里了,真是不得不 ...
- 阿里云ECS服务器配置LAMP时安装配置PHP扩展填坑(三)
阿里云ECS服务器配置LAMP时安装配置PHP扩展填坑(三) apache+mysql配置完成.问题解决后,接下来就是安装配置PHP了,按照阿里云官方lamp配置文档(https://help.ali ...
- 阿里云ECS服务器配置LAMP使用IP地址无法访问填坑(一)
阿里云ECS服务器配置LAMP使用IP地址无法访问填坑(一) 闲来无事,想配置一下阿里云赠送半年的免费ECS服务器,根据阿里云的官方文档,手动搭建LAMP环境刚开始就遇到了麻烦,配置好apache之后 ...
- 微信小程序图片内容审核功能云函数+小程序端代码完整实现【填坑】
文章目录 背景 实现 技术栈 小程序端 基本思路 主要代码 云函数 思考 主要参考 背景 开发微信小程序的同学如果涉及了社交类目,应该都会碰到由于缺少内容审核机制导致不过审的情况.微信小程序官方实际上 ...
- 聚焦“裂变”,又拍云推出直播云等多场景解决方案
4月20日,主题为"裂变"的2016又拍云产品发布会今日在北京金茂威斯汀举行,通过堪比"裂变"速度的极速体验,进一步交付场景化CDN服务.作为数亿融资后的首次发 ...
- centerm高拍仪_升腾威讯云:桌面云2.0深度融合行业应用
原标题:升腾威讯云:桌面云2.0深度融合行业应用 自2007年桌面云概念在中国普及,已经蓬勃发展近10年.十年间,桌面云厂商如雨后春笋般涌现,大大小小厂商超过百家,桌面云应用也从最初的通用标准,逐步向 ...
- vue用form上传图片_vuejs使用FormData,ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...
- C#也能PS图片,还能为网站Ajax上传图片同时生成微缩图(附Demo)
C#也能PS图片,还能为网站Ajax上传图片同时生成微缩图(附Demo) 本文旨在与各位朋友们分享我是如何在项目中用C# "ps图片" 为网站生成同比例微缩图的解决方案.如有不足之 ...
- 移动端压缩并ajax上传图片解决方案
移动端压缩并ajax上传图片解决方案 参考文章: (1)移动端压缩并ajax上传图片解决方案 (2)https://www.cnblogs.com/norm/p/6188318.html 备忘一下.
- 你拍一我拍一上学得学计算机,儿歌《你拍一,我拍一》
你拍一,我拍一,一个小孩坐飞机. 你拍二,我拍二,两个小孩丢手绢. 你拍三,我拍三,三个小孩来搬砖. 你拍四,我拍四,四个小孩写大字. 你拍五,我拍五,五个小孩敲锣鼓. 你拍六,我拍六,六个小孩拣豆豆 ...
最新文章
- 开源超美css动态背景 可直接引入html文件使用 含注释、可更改
- 企业大数据平台仓库架构建设思路
- 【NLP】基于TF-IDF和KNN的模糊字符串匹配优化
- 通过反射写一个通用的设置某个对象的某个属性为指定的值
- 关于spark-shell和scala关系的一些个人想法
- 将 Citavi 笔记按需要导出
- Python协程--生成器(通过异常来判断生成器已经结束)
- java怎样写入五个人的成绩_用java输入5个学员姓名和分数,显示分数最高的学员姓名和分数?...
- 加州大学欧文计算机工程硕士,UCI加州大学尔湾分校软件工程硕士Master of Software Engineering...
- 牛皮!竟然有大佬基于 Spring Boot + Vue 开发了一套网易云QQ音乐(附源码)。。。...
- 2019-C语言二级考试题库
- NLPIR/ICTCLAS 2015 分词系统使用
- Java开发人员2021年的职位描述和职责
- STM32, ADS1115
- 侨鑫集团:不一样的CIO,不一样的数字化转型之路
- HR必备基础能力之人性
- 自著——30天自制计算机语言解释器 目录
- java海马模拟android,Android ADB连接海马玩模拟器
- HTML图片打开新窗口
- ABI (Application Binary Interface)解析