ASP.NET MVC使用Layui 上传图片/文件到阿里OSS
之前的文章中有写到在ASP.NET MVC 5中如何使用Layui的上传组件上传图片,文章链接在下面:
ASP.NET MVC5 使用LAYUI 2.2.2 上传组件上传简单示例文件(图片)
上面的文章中讲到的上传图片只是上传到系统所在的本地服务器,但当前实际应用环境中存储在本地服务器通常是不够的,通常是本地服务器作为文件的备份,而上传到OSS或其他的文件或图片公有云服务的作为外部访问,这样在OSS中启用CDN的话,将大大优化这些静态资源的访问速率,达到最优的访问效果。
此处仍然以之前的上传轮播图作为案例:
1、首先需要开通阿里OSS(对象云存储)服务
https://www.aliyun.com/product/oss?utm_content=se_1000000532
2、开通OSS服务后创建一个Bucket 对应你的项目名就可以,并创建自己需要的目录,可以对应项目中的目录

阿里云OSS文件列表
3、下带对应的.NET版本SDK,也可以直接在Nuget服务器中搜索安装
4、在阿里OSS的控制台中找到对应的 AccessKey、AccessSecre、EndPoint 同时你还能绑定自己的域名作为访问方式

阿里云OSS查看Access Key
5、必须要注意的是,Bucket的访问属性一定要设置为公共读,否则外部环境可访问不了,同时还可以设置防盗链等等

阿里云OSS设置公共读和其他设置
6、接下来就是进行程序Coding啦
相对于之前的轮播图上传案例,前端的代码没有变化:
<div class="layui-form-item"> <label class="layui-form-label">上传图片</label> <div class="layui-input-block layui-upload"> <button type="button" class="layui-btn" id="btn_UploadImage">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="previewBox"> <p id="remindText"></p> </div> </div> </div>
JS代码也没变化,直接请求后端的方法即可:
var $; layui.use(['form', 'layer', 'jquery','upload'], function () { var form = layui.form, layer = parent.layer === undefined ? layui.layer : parent.layer, laypage = layui.laypage, upload = layui.upload; $ = layui.jquery; //单张图片上传 var uploadInst = upload.render({ elem: '#btn_UploadImage' , url: '../CarouselPicture/Upload' , before: function (obj) { //预读本地文件,需要IE9及以上版本 obj.preview(function (index, file, result) { $('#previewBox').attr('src', result); //图片链接(base64) }); }, done: function (data) { //如果上传失败 if (data.Code != 0) { return layer.msg(data.Message); } //上传成功 else { //设置图片地址 $(".PicOSSUri").val(data.Data.src); $(".PicOSSUri").attr("readonly", "readonly"); $(".PicOSSUri").css("background-color", "#EBEBE4"); return layer.msg(data.Message + ":" + data.Data.src); } }, error: function () { //重传 var demoText = $('#remindText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini upload-reload">重试</a>'); demoText.find('.upload-reload').on('click', function () { uploadInst.upload(); }); } }); });
后端的代码在上传本地服务器成功后需要进行上传:
/// <summary> /// 上传轮播图片 /// </summary> /// <returns></returns> [HttpPost] public ActionResult Upload() { #region + 变量 //文件大小(字节数) long fileSize = 0; //重命名的文件名称 string tempName = ""; //物理路径+重命名的文件名称 string fileName = ""; //文件扩展名 string extname = ""; //虚拟路径 string virtualPath = "/Uploads/Advs/Carousels/"; //上传固定路径 string path = Server.MapPath(virtualPath); //上传文件夹名称 string dir = ""; //获取提交的文件 var file = Request.Files[0]; //反馈对象 BaseGetResponse<object> _response = new BaseGetResponse<object>(); #endregion #region + 服务器本地文件上传处理 try { if (file != null && !string.IsNullOrEmpty(file.FileName)) { dir = DateTime.Now.ToString("yyyy-MM-dd"); if (!Directory.Exists(path + dir)) { Directory.CreateDirectory(path + dir); } extname = file.FileName.Substring(file.FileName.LastIndexOf('.'), (file.FileName.Length - file.FileName.LastIndexOf('.'))); tempName = Guid.NewGuid().ToString().Substring(0, 6) + extname; fileName = path + dir + "/" + tempName; fileSize += file.ContentLength; using (FileStream fs = System.IO.File.Create(fileName)) { file.InputStream.CopyTo(fs); fs.Flush(); } _response.Data = new { src = virtualPath + dir + "/" + tempName, }; _response.Message = "服务器本地上传成功"; } } catch (Exception ex) { _response.Code = ResultCode.UnknownException; _response.Message = "服务器本地上传失败/n" + "错误信息:" + ex.Message; } #endregion #region + OSS对象云存储上传 try { FileStream fstream = new FileStream(Server.MapPath(virtualPath + dir + "/" + tempName), FileMode.Open); int nBytes = (int)fstream.Length;//计算流的长度 byte[] byteArray = new byte[nBytes];//初始化用于MemoryStream的Buffer int nBytesRead = fstream.Read(byteArray, 0, nBytes);//将File里的内容一次性的全部读到byteArray中去 //上传到阿里云 using (Stream fileStream = new MemoryStream(byteArray))//转成Stream流 { string md5 = OssUtils.ComputeContentMd5(fileStream, nBytes); string today = DateTime.Now.ToString("yyyyMMdd"); string FileName = tempName;//文件名=文件名+当前上传时间 string FilePath = "adv/index/" + today + "/" + FileName;//云文件保存路径 OSSConfig config = new OSSConfig(); //这边的AccessKey 等等信息可以从配置文件获取 也可以直接写死 //初始化阿里云配置--外网Endpoint、访问ID、访问password OssClient aliyun = new OssClient(config.OSSEndPoint, config.OSSAccessKey, config.OSSAccessSecret); //将文件md5值赋值给meat头信息,服务器验证文件MD5 var objectMeta = new ObjectMetadata { ContentMd5 = md5, }; //文件上传--空间名、文件保存路径、文件流、meta头信息(文件md5) //返回meta头信息(文件md5) aliyun.PutObject(config.Bucket, FilePath, fileStream, objectMeta); _response.Data = new { src = config.OSSBindDomain + FilePath, }; } } catch (Exception ex) { _response.Code = ResultCode.UnknownException; _response.Message = "OSS对象云存储上传失败/n" + "错误信息:" + ex.Message; //删除本地上传的图片 System.IO.File.Delete(fileName); } #endregion return Json(_response); }
就这样Layui 上传组件上传图片或文件到阿里OSS
阿里OSS其实还提供了很多图片服务,如裁剪、水印等等,有兴趣的可以自己研究一下
1 条留言 访客:0 条 博主:0 条 引用: 1 条
来自外部的引用: 1 条