背景

最近搞一个商城类的项目,图片资源我采用的是第三方云储存服务。又拍云(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填坑相关推荐

  1. 阿里云ECS服务器配置LAMP时安装配置mysql数据库填坑(二)

    阿里云ECS服务器配置LAMP时安装配置mysql数据库填坑(二) 上篇文章讲到的是安装apache服务器时遇到的坑,经过排错总算是把Apache的坑填完了,没想到安装mysql又跳坑里了,真是不得不 ...

  2. 阿里云ECS服务器配置LAMP时安装配置PHP扩展填坑(三)

    阿里云ECS服务器配置LAMP时安装配置PHP扩展填坑(三) apache+mysql配置完成.问题解决后,接下来就是安装配置PHP了,按照阿里云官方lamp配置文档(https://help.ali ...

  3. 阿里云ECS服务器配置LAMP使用IP地址无法访问填坑(一)

    阿里云ECS服务器配置LAMP使用IP地址无法访问填坑(一) 闲来无事,想配置一下阿里云赠送半年的免费ECS服务器,根据阿里云的官方文档,手动搭建LAMP环境刚开始就遇到了麻烦,配置好apache之后 ...

  4. 微信小程序图片内容审核功能云函数+小程序端代码完整实现【填坑】

    文章目录 背景 实现 技术栈 小程序端 基本思路 主要代码 云函数 思考 主要参考 背景 开发微信小程序的同学如果涉及了社交类目,应该都会碰到由于缺少内容审核机制导致不过审的情况.微信小程序官方实际上 ...

  5. 聚焦“裂变”,又拍云推出直播云等多场景解决方案

    4月20日,主题为"裂变"的2016又拍云产品发布会今日在北京金茂威斯汀举行,通过堪比"裂变"速度的极速体验,进一步交付场景化CDN服务.作为数亿融资后的首次发 ...

  6. centerm高拍仪_升腾威讯云:桌面云2.0深度融合行业应用

    原标题:升腾威讯云:桌面云2.0深度融合行业应用 自2007年桌面云概念在中国普及,已经蓬勃发展近10年.十年间,桌面云厂商如雨后春笋般涌现,大大小小厂商超过百家,桌面云应用也从最初的通用标准,逐步向 ...

  7. vue用form上传图片_vuejs使用FormData,ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...

  8. C#也能PS图片,还能为网站Ajax上传图片同时生成微缩图(附Demo)

    C#也能PS图片,还能为网站Ajax上传图片同时生成微缩图(附Demo) 本文旨在与各位朋友们分享我是如何在项目中用C# "ps图片" 为网站生成同比例微缩图的解决方案.如有不足之 ...

  9. 移动端压缩并ajax上传图片解决方案

    移动端压缩并ajax上传图片解决方案 参考文章: (1)移动端压缩并ajax上传图片解决方案 (2)https://www.cnblogs.com/norm/p/6188318.html 备忘一下.

  10. 你拍一我拍一上学得学计算机,儿歌《你拍一,我拍一》

    你拍一,我拍一,一个小孩坐飞机. 你拍二,我拍二,两个小孩丢手绢. 你拍三,我拍三,三个小孩来搬砖. 你拍四,我拍四,四个小孩写大字. 你拍五,我拍五,五个小孩敲锣鼓. 你拍六,我拍六,六个小孩拣豆豆 ...

最新文章

  1. 开源超美css动态背景 可直接引入html文件使用 含注释、可更改
  2. 企业大数据平台仓库架构建设思路
  3. 【NLP】基于TF-IDF和KNN的模糊字符串匹配优化
  4. 通过反射写一个通用的设置某个对象的某个属性为指定的值
  5. 关于spark-shell和scala关系的一些个人想法
  6. 将 Citavi 笔记按需要导出
  7. Python协程--生成器(通过异常来判断生成器已经结束)
  8. java怎样写入五个人的成绩_用java输入5个学员姓名和分数,显示分数最高的学员姓名和分数?...
  9. 加州大学欧文计算机工程硕士,UCI加州大学尔湾分校软件工程硕士Master of Software Engineering...
  10. 牛皮!竟然有大佬基于 Spring Boot + Vue 开发了一套网易云QQ音乐(附源码)。。。...
  11. 2019-C语言二级考试题库
  12. NLPIR/ICTCLAS 2015 分词系统使用
  13. Java开发人员2021年的职位描述和职责
  14. STM32, ADS1115
  15. 侨鑫集团:不一样的CIO,不一样的数字化转型之路
  16. HR必备基础能力之人性
  17. 自著——30天自制计算机语言解释器 目录
  18. java海马模拟android,Android ADB连接海马玩模拟器
  19. HTML图片打开新窗口
  20. ABI (Application Binary Interface)解析

热门文章

  1. 【实用篇】Python操作word
  2. 死循环之----恐怖游轮
  3. matlab求包络线拟合,MATLAB 一堆散点如何求包络线
  4. 如何使单片机复位可靠,单片机复位电路?
  5. VR全景创业好不好做?蛙色VR为你解答
  6. 按键精灵抓取不到的问题
  7. ESP8266开发之旅 基础篇⑤ ESP8266 SPI通信和I2C通信
  8. Linux运维工程师常见面试题(一)
  9. Python3,选择Python自动安装第三方库,从此跟pip说拜拜!!
  10. 147计算机代表啥,147代表什么意思