oss或上传本地服务器

tech2022-09-20  85

上传图片:

前端为H+框架 引用class:

<link href="@Url.Content("~/Content/Hplus/css/plugins/webuploader/webuploader.css")" rel="stylesheet">

上传图片HTML代码:

<label class="col-sm-2 control-label">文章图片:</label> <div class="col-sm-4"> <!--dom结构部分--> <div id="uploader-demo"> <!--用来存放item--> <div id="fileList" class="uploader-list"></div> <div id="filePicker">选择图片</div> </div> </div>

引用JS:

<script src="~/Content/Hplus/js/plugins/webuploader/webuploader.js"></script>

JS上传代码:

var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../"; // 添加全局站点信息 var BASE_URL = 'js/plugins/webuploader'; // 图片上传demo jQuery(function () { var $ = jQuery, $list = $('#fileList'), // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio, // Web Uploader实例 uploader; // 初始化Web Uploader uploader = WebUploader.create({ // 自动上传。 auto: true, // swf文件路径 swf: applicationPath + BASE_URL + '/Uploader.swf', // 文件接收服务端。 server: applicationPath + '/ContentManager/ImgSubmit', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', // 只允许选择文件,可选。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); uploader.on('ready', function (file) { var $li = $( '<div id="img" class="file-item thumbnail">' + '<img id="img1"></div>' ), $img = $li.find('img'); var src = ""; if ($("#ImageUrl").val() != "" && $("#ImageUrl").val() != "undefined") { src = @System.Configuration.ConfigurationManager.AppSettings["ImagePath"] +$("#ImageUrl").val(); } else { src = ""; } if (src != "" && src != undefined) { $list.append($li); $img.attr('src', src); $img.attr('width', '130'); $("#img1").click(function () { var width = $("#img1").width(); if (width == 130) { $img.attr('width', '100%'); } else { $img.attr('width', '130'); } }); } }); // 当有文件添加进来的时候 uploader.on('fileQueued', function (file) { $("#img").remove(); var $li = $( '<div id="divfile" class="file-item thumbnail">' + '<img></div>' ), $img = $li.find('img'); $list.html($li); // 创建缩略图 uploader.makeThumb(file, function (error, src) { if (error) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr('src', src); }, thumbnailWidth, thumbnailHeight); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress span'); // 避免重复创建 if (!$percent.length) { $percent = $('<p class="progress"><span></span></p>') .appendTo($li) .find('span'); } $percent.css('width', percentage * 100 + '%'); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function (file, response) { $('#' + file.id).addClass('upload-state-done'); var path = response.filePath; $("#ImageUrl").val(path); }); // 文件上传失败,显示上传出错。 uploader.on('uploadError', function (file) { var $li = $('#' + file.id), $error = $li.find('div.error'); // 避免重复创建 if (!$error.length) { $error = $('<div class="error"></div>').appendTo($li); } $error.text('上传失败'); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').remove(); }); // 负责view的销毁 function removeFile(file) { var $li = $('#' + file.id); delete percentages[file.id]; updateTotalProgress(); $li.off().find('.file-panel').off().end().remove(); } });

上传图片到阿里云oss

1、需要阿里云开通oss

2、需要创建AccessKey

#region 上传图片 - OSS /// <summary> /// 上传图片 - OSS /// </summary> /// <param name="param">参数{"UserID":"用户ID"}</param> /// <returns></returns> public JsonResult UploadImg(string param) { JObject jObject = JObject.Parse(param); if (Convert.ToInt32(jObject["UserID"].ToString()) < 2) { return Json(new Result { DATA = null, ERROR_CODE = "1", ERROR_MESSAGE = "数据提交失败,请重新登陆后再试" }, JsonRequestBehavior.DenyGet); } //OSS的访问地址 阿里云概览中的EndPoint(地域节点) 如果做了绑定域名,则为绑定的域名 string endpoint = System.Configuration.ConfigurationManager.AppSettings["OOS_endpoint"]; //OSS的访问ID string accessKeyId = System.Configuration.ConfigurationManager.AppSettings["OOS_accessKeyId"]; //OSS的访问密钥 string accessKeySecret = System.Configuration.ConfigurationManager.AppSettings["OOS_accessKeySecret"]; //bucket列表中的名称 String bucketName = System.Configuration.ConfigurationManager.AppSettings["OOS_bucketName"]; //文件路径 必须与阿里云oss中匹配 string filePathName = "Admin/Chat/"; try { HttpPostedFileBase file = Request.Files[0]; //文件名称 filePathName += Guid.NewGuid().ToString("N") + Path.GetExtension(file.FileName); if (Path.GetExtension(file.FileName) != ".png" && Path.GetExtension(file.FileName) != ".jpg") { return Json(new Result { DATA = null, ERROR_CODE = "1", ERROR_MESSAGE = "请上传正确的图片格式" }, JsonRequestBehavior.DenyGet); } // 创建OssClient实例。 var client = new OssClient(endpoint, accessKeyId, accessKeySecret); // 上传文件。 client.PutObject(bucketName, filePathName, file.InputStream); } catch (Exception ex) { ErrLog.LogResult("异常描述" + ex.Message); return Json(new Result { DATA = null, ERROR_CODE = "1", ERROR_MESSAGE = ex.Message }, JsonRequestBehavior.DenyGet); } object data = new { PictureUrl = filePathName }; return Json(new Result { DATA = data, ERROR_CODE = "-1", ERROR_MESSAGE = "" }, JsonRequestBehavior.DenyGet); } #endregion

从OSS上下载图片

#region 文件下载 /// <summary> /// OSS文件下载 /// </summary> /// <param name="objectName">oss文件路径</param> /// <param name="downloadFilename">下载路径</param> /// <returns></returns> public JsonResult OSSDownload(string objectName, string downloadFilename) { //OSS的访问地址 string endpoint = System.Configuration.ConfigurationManager.AppSettings["OOS_endpoint"]; //OSS的访问ID string accessKeyId = System.Configuration.ConfigurationManager.AppSettings["OOS_accessKeyId"]; //OSS的访问密钥 string accessKeySecret = System.Configuration.ConfigurationManager.AppSettings["OOS_accessKeySecret"]; String bucketName = System.Configuration.ConfigurationManager.AppSettings["OOS_bucketName"]; // 创建OssClient实例。 var client = new OssClient(endpoint, accessKeyId, accessKeySecret); try { var obj = client.GetObject(bucketName, objectName); using (var requestStream = obj.Content) { byte[] buf = new byte[1024]; var fs = System.IO.File.Open(downloadFilename, FileMode.OpenOrCreate); var len = 0; // 通过输入流将文件的内容读取到文件或者内存中。 while ((len = requestStream.Read(buf, 0, 1024)) != 0) { fs.Write(buf, 0, len); } fs.Close(); } Console.WriteLine("Get object succeeded"); } catch (Exception ex) { return Json(new { jsonrpc = "2.0", id = -1, filePath = ex.Message }, JsonRequestBehavior.AllowGet); } return Json(new { jsonrpc = "2.0", filePath = downloadFilename }, JsonRequestBehavior.AllowGet); } #endregion

上传图片到本地服务器:

需要设置Upload文件夹的权限为最高权限,可上传以及下载

System.Configuration.ConfigurationManager.AppSettings[“ImagePath”] 为上传文件的文件夹在config中的配置

#region 图片上传 - 本地 /// <summary> /// 图片上传 - 本地 /// </summary> /// <param name="param">参数{"UserID":"登录会员ID","Type":"图片类型"}</param> /// <returns></returns> [HttpPost] public JsonResult UploadMerchantPicture(string param) { JObject jObject = JObject.Parse(param); if (Convert.ToInt32(jObject["UserID"].ToString()) < 2) { return Json(new Result { DATA = null, ERROR_CODE = "1", ERROR_MESSAGE = "数据提交失败,请重新登陆后再试" }, JsonRequestBehavior.DenyGet); } string savePath = string.Empty; string PictureUrl = string.Empty; switch (jObject["Type"].ToString()) { case "tx": savePath = System.Configuration.ConfigurationManager.AppSettings["ImagePath"] + "HeadPortrait/"; //会员头像 break; default: break; } HttpFileCollectionBase httpFileCollectionBase = Request.Files; string Name = Guid.NewGuid().ToString(); try { if (httpFileCollectionBase.Count > 0) { if (!Directory.Exists(Server.MapPath(savePath))) { Directory.CreateDirectory(Server.MapPath(savePath)); } PictureUrl = DateTime.Now.ToString("yyyyMMddHHmmss") + "-" + jObject["UserID"].ToString(); if ("pos".Equals(jObject["Type"].ToString())) { httpFileCollectionBase[0].SaveAs(Server.MapPath(savePath) + Name + ".jpg"); } else { httpFileCollectionBase[0].SaveAs(Server.MapPath(savePath) + PictureUrl + ".jpg"); } switch (jObject["Type"].ToString()) { case "tx": PictureUrl = "/Upload/HeadPortrait/" + PictureUrl + ".jpg"; break; default: break; } object data = new { PictureUrl = PictureUrl }; return Json(new Result { DATA = data, ERROR_CODE = "-1", ERROR_MESSAGE = "" }, JsonRequestBehavior.DenyGet); } else { return Json(new Result { DATA = null, ERROR_CODE = "1", ERROR_MESSAGE = "请拍照或选择一张图片" }, JsonRequestBehavior.DenyGet); } } catch (Exception ex) { return Json(new Result { DATA = null, ERROR_CODE = "1", ERROR_MESSAGE = ex.Message }, JsonRequestBehavior.DenyGet); } } #endregion
最新回复(0)