与“OSS”相关的文章 - 𝓍𝑜𝓎𝑜𝓏𝑜.𝓃𝑒𝓉

ASP.NET 5.0 / ASP.NET Core 部署百度编辑器（UEditor）之 UEditorNetCore

通过 nuget 安装 UEditorNetCore

从 UEditor 官网下载最新的包 ueditorx_x_x_x-utf8-net.zip

解压包，并复制到项目的 wwwroot/lib 目录下，删除 net 目录。

根据 UEditorNetCore 官方的使用说明进行操作

步骤中，控制器 UEditorController 接替原 controller.ashx 的功能，用于统一处理上传逻辑

原 config.json 复制到项目根目录，用于配置上传相关设置（若更改文件名和路径在 services.AddUEditorService() 中处理）。

个人喜欢将 xxxPathFormat 值改为：upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}，方便日后迁移附件后进行批量替换。

记得配置 catcherLocalDomain 项。

上传相关的身份验证和授权控制请在 UEditorController 中处理，如：

public void Do()
{
    if (用户未登录) { throw new System.Exception("请登录后再试"); }
    _ue.DoAction(HttpContext);
}

如果图片仅仅上传到网站目录下，那么这样配置就结束了，如果要上传到阿里云 OSS 等第三方图床，那么继续往下看。

因 UEditorNetCore 虽然实现了上传到 FTP 和 OSS 的功能，但未提供配置相关的账号信息的途径，所以只能（1）重写 action，或（2）下载 github 的源代码，将核心项目加入到您的项目中进行修改。

重写 action 不方便后期维护，这里记录修改源码的方式。

将源码改造为可配置账号的上传到 OSS 的功能，具体步骤如下：

将 Consts.cs 从项目中排除。
打开 Handlers/UploadHandler.cs，找到 UploadConfig 类，将
FtpUpload 改为 OssUpload，
FtpAccount 改为 OssAccessKeyId，
FtpPwd 改为 OssAccessKeySecret，
FtpIp 改为 OssAccessEndpoint，
再添加一个属性 OssBucketName。
打开 Handlers/UploadHandler.cs，找到 Process() 方法，
将 UploadConfig.FtpUpload 改为 UploadConfig.OssUpload，
将 Consts.AliyunOssServer.* 改为 UploadConfig.Oss*。
打开 Handlers/CrawlerHandler.cs，找到 Fetch() 方法，
将 Config.GetValue<bool>("catcherFtpUpload") 改为 Config.GetValue<bool>("OssUpload")，
将 Consts.AliyunOssServer.* 改为 Config.GetString("Oss*")。

打开 UEditorActionCollection.cs，找到 UploadImageAction，将

FtpUpload = Config.GetValue<bool>("imageFtpUpload"),
FtpAccount = Consts.ImgFtpServer.account,
FtpPwd = Consts.ImgFtpServer.pwd,
FtpIp = Consts.ImgFtpServer.ip,

替换为

OssUpload = Config.GetValue<bool>("OssUpload"),
OssAccessKeyId = Config.GetString("OssAccessKeyId"),
OssAccessKeySecret = Config.GetString("OssAccessKeySecret"),
OssAccessEndpoint = Config.GetString("OssAccessEndpoint"),
OssBucketName = Config.GetString("OssBucketName"),

其余 3 个 Action（UploadScrawlAction、UploadVideoAction、UploadFileAction）按同样的方式修改。

在所有创建 UploadHandler 对象时补充添加 SaveAbsolutePath 属性。

打开 config.json，添加相关配置项（注：配置文件中的 *FtpUpload 全部废弃，统一由 OssUpload 决定）
```
"OssUpload": true,
"OssAccessEndpoint": "",
"OssAccessKeyId": "",
"OssAccessKeySecret": "",
"OssBucketName": "",
```
将 xxxUrlPrefix 的值改为 OSS 对应的 CDN 网址（以 / 结尾，如：//cdn.xoyozo.net/）。

其它注意点：

若使用 UEditorNetCore github 提供的源代码类库代替 nuget，且使用本地存储，那么需要将 Handlers 目录中与定义 savePath 相关的代码（查找 var savePath）替换成被注释的行

xoyozo 5 年前

7,978

富士施乐打印机如何连接小米路由器？

如果富士施乐 DocuPrint P118 w 打印机开启后电脑无法连接，但路由器上显示已连网，很有可能是 IP 已变更（增添新设备后抢占了打印机原来的 IP 地址）。

这时候需要重新安装打印机驱动：（可能有不需要重装驱动的方法）

富士施乐 DocuPrint P118 w 在安装驱动时需要路由器支持 WPS/AOSS，

但小米路由器 Pro 中找不到该功能，而且实测无线方式安装打印机驱动失败。

我的方法是，找一台 TP-LINK 路由器，

将 SSID 和 WIFI 密码改成与小米路由器相同，

关闭小米路由器，

电脑连接这个 SSID，

然后按无线的方式安装打印机驱动程序，

完成后，关闭 TP-LINK 路由器，打开小米路由器，

网络启动后，重启打印机。

（打印时可能需要在窗口中选择另一个打印机名称）

xoyozo 6 年前

7,977

Date Range Picker（一款 jQuery 插件，支持日期范围、时间范围选择）

引用

jQuery、moment.js、daterangepicker

例子

$('.x_dates').daterangepicker({
    "timePicker": false, // 是否显示时间
    //"dateLimit": {
    //    "days": 7 // 可选中的最大区间（天）
    //},
    "ranges": { // 快捷栏
        "今天": [moment(), moment()],
        "昨天": [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        "最近 7 天": [moment().subtract(6, 'days'), moment()],
        "最近 30 天": [moment().subtract(29, 'days'), moment()],
        "本月": [moment().startOf('month'), moment().endOf('month')],
        "上个月": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    startDate: daterangepicker_startDate, // moment(),
    endDate: daterangepicker_endDate, // moment(),
    autoUpdateInput: true,
    "locale": {
        "direction": "ltr",
        "format": "YYYY-MM-DD", // YYYY-MM-DD HH:mm
        "separator": " 至 ",
        "applyLabel": "确定",
        "cancelLabel": "取消",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "自定义",
        "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
        "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        "firstDay": 1
    }
}, function (start, end, label) {
    //console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    fn_daterangepicker_changed(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'))
});

官网（含配置工具）

http://www.daterangepicker.com/

GitHub

https://github.com/dangrossman/daterangepicker

配置工具

下载的包中的 demo.html

Demo

https://awio.iljmp.com/5/drpdemo

xoyozo 6 年前

5,644

阿里云控制台如何查看 CDN 各域名的费用账单

经 2020.02.22 提交工单咨询回复，阿里云控制台暂无法针对 CDN 的域名或 OSS 的 Bucket 来区分费用账单，但 ECS、RDS 可根据实例 ID 来查询：

虽然不能准确查询 CDN 各域名的消费情况，但我们可以在 CDN 的统计分析中查询域名排行，从而可以按流量占比再结合 CDN 的总体费用来计算各域名的大致费用：

当然，能把 HTTPS 等增值服务和资源包等因素考虑进去会更加合理。

xoyozo 6 年前

3,898

百度编辑器 Blocked a frame with origin from accessing a cross-origin frame at baidu editor ui dialog

ueditor.all.min.js: Uncaught DOMException: Blocked a frame with origin "http://localhost:4492" from accessing a cross-origin frame.

at baidu.editor.ui.Dialog.close

当引用第三方 CDN 静态资源的方式部署百度编辑器时，使用多图上传、涂鸦等功能（弹出框使用 iframe 标签引用 CDN 上的网页）会报上述跨域错误。

官方并没有给出这种部署方案（即客户端页面与页面之间的 iframe 跨域）的完美跨域方法。

但官方针对服务端和客户端分离的跨域情形进行了说明：

http://fex.baidu.com/ueditor/#dev-crossdomain

xoyozo 6 年前

5,398

判断浏览器若支持则显示 webp 格式的图片

对于不同场景下 WebP 的使用，我们总结了一些解决方案，如下：

1、若使用场景是浏览器，可以：

JavaScript 能力检测，对支持 WebP 的用户输出 WebP 图片（https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp）

使用 WebP 支持插件：WebPJS：http://webpjs.appspot.com，下载 webpjs-0.0.2.min.js

2、若使用场景是 App，可以：

Android 4.0 以下 WebP 解析库（https://github.com/alexey-pelykh/webp-android-backport）

iOS WebP 解析库（https://github.com/carsonmcdonald/WebP-iOS-example）

3、转换工具：

智图（http://zhitu.tencent.com）

iSparta（http://isparta.github.io/）

阿里云 OSS 格式转换：https://help.aliyun.com/document_detail/44703.html

腾讯云数据万象格式转换：https://cloud.tencent.com/document/product/460/36543

七牛：https://developer.qiniu.com/dora/api/1279/basic-processing-images-imageview2

转自 xiangzhihong 6 年前

6,232

ASP.NET Core 3.0 配置信息

打开 appsettings.json，添加一项配置（如下方示例中的“SiteOptions”项）

* 注意，如需配置开发环境与生产环境不同的值，可单独在 appsettings.Development.json 文件中配置不同项，格式层次须一致；

C# 中习惯用强类型的方式来操作对象，那么在项目根目录添加类（类名以 SiteOptions为例），格式与 appsettings.json 中保持一致：

public class SiteOptions
{
    public ERPOptions ERP { get; set; }
    public WeixinOpenOptions WeixinOpen { get; set; }
    public WeixinMPOptions WeixinMP { get; set; }
    public SMSOptions SMS { get; set; }
    public AliyunOSSOptions AliyunOSS { get; set; }

    /// <summary>
    /// 单个文件上传的最大大小（MB）
    /// </summary>
    public int MaxSizeOfSigleFile_MB { get; set; }

    /// <summary>
    /// 单个文件上传的最大大小（字节）
    /// </summary>
    public int MaxSizeOfSigleFile_B => MaxSizeOfSigleFile_MB * 1024 * 1024;

    public class ERPOptions
    {
        public int ChannelId { get; set; }
        public string AppKey { get; set; }
    }
    public class WeixinOpenOptions
    {
        public string AppId { get; set; }
        public string AppSecret { get; set; }
    }
    public class WeixinMPOptions
    {
        public string AppId { get; set; }
        public string AppSecret { get; set; }
    }
    public class SMSOptions
    {
        public string AppKey { get; set; }
    }
    public class AliyunOSSOptions
    {
        public string Endpoint { get; set; }
        public string AccessKeyId { get; set; }
        public string AccessKeySecret { get; set; }
        public string BucketName { get; set; }

        /// <summary>
        /// 格式：//域名/
        /// </summary>
        public string CdnUrl { get; set; }
    }
}

在 Startup 中注入 IConfiguration，并在 ConfigureServices() 方法中添加服务（注意使用 GetSection() 映射到自命名的“SiteOptions”项）

在控制器中使用：

在控制器类中键入“ctor”，并按两次 Tab 键，创建构造函数

在构造函数中注入“IOptions”，并在 Action 中使用

using Microsoft.Extensions.Options;

public class TestController : Controller
{
    private readonly IOptions<SiteOptions> options;

    public TestController(IOptions<SiteOptions> options)
    {
        this.options = options;
    }

    public IActionResult Index()
    {
        return View(options.Value.ERP.ChannelId.ToString());
    }
}

在视图中使用：

@using Microsoft.Extensions.Options
@inject IOptions<SiteOptions> options

@options.Value.ERP.ChannelId

xoyozo 6 年前

4,922

百度编辑器 UEditor 上传图片到阿里云 OSS

之前已经介绍了百度编辑器在 ASP.NET 环境下的配置，本文继续补充改进其将图片等附件上传到阿里云 OSS。

首先从阿里云控制台下载相关 SDK，并阅读相关的 API 文档。链接：https://promotion.aliyun.com/ntms/act/ossdoclist.html

改造上传代码

打开文件 UploadHandler.cs，在 Process() 方法中找到：

File.WriteAllBytes(localPath, uploadFileBytes);

在其下方插入代码：

client.PutObject(bucketName, "upload/ueditor/" + savePath, localPath);

实现图标按钮上传和 HTML5 拖放上传。

PutObject() 的第 2 个参数是 OSS 中的图片路径，第 3 个参数是图片在网站目录下的磁盘路径。

打开文件 CrawlerHandler.cs，在 Fetch() 方法中找到：

File.WriteAllBytes(savePath, bytes);

在其下方插入代码：

client.PutObject(bucketName, "upload/ueditor/" + ServerUrl, savePath);

实现粘贴板图片上传。

同样注意两个参数变量。

修改路径前缀

上传成功后，编辑器会拼装路径到 HTML 代码中，这个前缀是在 config.json 文件中配置的，具体找到以 UrlPrefix 结尾的属性，如 imageUrlPrefix，进行相应的修改即可：

"imageUrlPrefix": "//oss.xoyozo.net/upload/ueditor/", /* 图片访问路径前缀 */

路径以“//”开头能更好地兼容 https。

xoyozo 7 年前

8,590

阿里云 CDN 访问控制 Refer 防盗链的坑

今天发现，阿里云 CDN 的 Refer 防盗链并没有真正防止白名单外的域名调用 OSS 的图片。经过一番研究发现，这跟 https 有关。

我在阿里云开通了 OSS 来存在图片，并使用 CDN 访问，在 CDN 中开启了 https，但并不强制。并且使用“白名单”的方式来设置 Refer 防盗链。关键是开启了“允许空 Referer”。

我在 http://b.com/ 上测试调用 http 和 https 的图片都是打不开的（防盗链有效），但是在 https://b.com/ 上却能显示 http 的图片（防盗链失效）：

究其原因，是 https 页面在调用 http 图片时请求头不包含 Referer 字段，导致 CDN 判断 Referer 为空，这时候如果开启了为空也允许访问的话，就会出现防盗链失效的情况了。

总结：如果 CDN 开启了 https 访问，那么不要允许空 Referer。这里白名单内的网站必须使用与 CDN 一致的 protocol（http 或 https）。建议的写法是：

<img src="//cdn.xxx.com/abc.jpg" />

xoyozo 7 年前

9,723

配置 cloudfs4oss 解决 cloudfs 进程占用内存的问题

CloudFS 是一款将阿里云 OSS 对象存储挂载为 Linux 本地目录的工具软件，目前已经从阿里云市场下架了。

在云监控中查看到进程 cloudfs 占用大部分内存，可以打开文件 /usr/local/cloudfs/conf/cloudfs.conf 进行配置。

默认值：

BLOCK_SIZE=1048576

MAX_CACHE_LIMITS=10485760

根据实际情况进行修改，然后重启 cloudfs，相关命令：

启动：service cloudfs start

停止：service cloudfs stop

重启：service cloudfs restart

查看状态：service cloudfs status

xoyozo 7 年前

4,807

1 2 3

大家在看

最新发布

查询 / 检测

编程

前端

行业

本站 API

博客 (28)

大家在看

最新发布