File对象经常出现是用户选择上传,input的change事件中可以得到,而File对象实际上是一个特殊的Blob对象.所以,可以对图片的URL地址发起一个网络请求得到一个Blob对象,然后再new一个File对象.具体代码如下:

在使用腾讯地图过程中,遇到一个十分奇怪的问题.在页面中可以正常渲染地图,但是放在弹层modal中,却无法正常显示,地图SDK直接无法正常工作,在控制台出现错误:

经过一番测试发现,影响地图的是display:none.只要渲染地图的div或其父级以上层级存在display:none,均无法工作

不知道SDK内部是作了怎样的一种考虑,由于业务必须使用弹层,而弹层也是要隐藏的,这就造成了矛盾.对此解决办法只有改变一下角度,自己实现一个弹层,这个弹层的隐藏不再由display来控制,而是定位,把它放在屏幕外边以实现隐藏.

elasticsearch排序一般是按照相关性分数(relevance score)排序,或者mapping中其他字段.除此之外,elasticsearch还可以自己编写脚本来对结果排序.基本用法如下:

'sort' => [
    '_script' => [
        'script' => [
            'lang' => 'painless',
            'source' => "排序算法代码",
            'params' => [
                // 传入source中的参数
            ],
        ],
        'order' => 'asc/desc'
    ]
],

lang指定脚本的语言, painless是elasticsearch的默认脚本语言.source是写代码的地方.params是source中需要传入的参数.painless语法在这里

在后台模板页面中,有一段JSON字符串数据需要前端js做JSON解析,前端在做JSON.parse时,出现错误:

Uncaught SyntaxError: Bad control character in string literal in JSON at position 90
at JSON.parse (<anonymous>)
...

这个功能在某些参数值传入时会出现,其他的又不会,对比两边数据后发现,出错的数据里面有个字段包含了换行符(\r\n)导致,如果去掉换行符就可以正常解析了,但是不可能全部去掉换行符,一是麻烦,二是这会改变原文的段落结构,三是不符合现实需求.解决方法其实也很简单,在调用JSON.parse之前,我们先对数据进行JSON.stringify,这样就不会解析出错了.

最后有一点需要注意,JSON.stringify中不要使用'或"把后台的模板变量包裹起来.

phalcon是PHP的一个mvc框架,volt是什么?volt是phalcon的视图模板引擎.volt页面中能混用vuejs吗?可以的.为什么要混用呢?像这样一个页面:

页面中的关联题库表格使用vue的v-for来渲染,题目抽取与得分设置使用计算属性是十分方便的,但是有一点问题:volt使用双大括号{{}}来输出变量值到模板页面,vue也一样,就会冲突.那么怎么解决冲突呢?

首先,在下载vue的时候,我们可以看到vue有很多版本,比如: unpkg或者cdnjs都有提供global,runtime,esm等等版本.因为不会编译,所以选择global版.接下来就是页面引入vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.global.min.js"></script>

使用vue,主要是加入参数delimiters替换{{}}:

<script>
    const {createApp} = Vue

    const app = createApp({
        delimiters: ['{!', '!}']
    }).mount('#app')
</script>

其他就可以正常使用啦.

SimpleAjaxUploader是一个很棒的上传插件，使用十分方便。但是，在有鼠标移入移出效果中使用该插件时就会出现问题，如下面这个页面有这样一个方框，鼠标移入后显示蒙层和两个按钮：

在没有加入SimpleAjaxUploader插件前效果是OK的，当页面引入js插件后并初始化后，就出问题了，看下图：

可以看到，鼠标移入方框后，显示还是正常的，但是当移到上传图片按钮上时，背景突然就没了，按钮也不显示了。这是为什么呢？通过观察页面的HTML结构，比对移入移出时的变化发现造成
这一结果的原因是：上传插件在body中插入了div和input然后绝对定位到了按钮的位置，这样当我们眼睛看着是输入移到了上传图片按钮上，实际是移到了插入的div和input上，而插入的
div和input并不是外面大方框的子元素，所以，方框的hover样式不再生效，我们自己的蒙层也就隐藏了。

那么应该如何解决呢？现在应该很简单了，只要让div和input插入到我们自己的方框里面作为其子元素存在并且给父级元素加上position: relative就可以了。为了不影响其他地方其他的样式使用，
我们需要给它新增一个参数，默认为body，在需要的地方传入自己的元素。具体修改步骤：

1. 在SimpleAjaxUploader.js的687行添加一个参数:

container: 'body'

2. 在SimpleAjaxUploader.js的2079行，这里原来是默认插入到body中，替换为：

document.querySelector(self._opts.container).appendChild(div);

改好之后再页面中检测一下，已经不在受影响了。

点击这里试试吧

普通上传

在使用ajax文件上传,一般分3个步骤:

1. HTML

HTML中有一个input用于选择文件:

<input type="file" id="selectFile" />

可以通过accept属性用于限制选择视频文件还是图片以及视频和图片具体是哪种类型.

<input type="file" id="selectFile" accept=".mp4"/>
或
<input type="file" id="selectFile" accept="image/*"/>

2. js监听事件

$('#selectFile').on('change', function() {
    let file = this.files[0];
});

3. 上传

const fd = new FormData();
fd.append('file', file);
const xhr = new XMLHttpRequest();

xhr.open('POST', api);

// 上传进度
xhr.upload.addEventListener('progress', function (ev) {
    var progress = ((ev.loaded / ev.total) * 100).toFixed(2) + '%';
    
});

// 上传结果
xhr.onreadystatechange = () => {
    if(xhr.readyState === 4 && xhr.status === 200){
        
    }
}

xhr.send(fd);

但是对于视频,如一部电影,直接用上面的方式上传,有可能遇到的问题:

• 超时
• 超出大小限制

这时候就需要分片上传文件.

阅读全文

• 问题

elasticsearch启动之后出现错误：

ERROR: [1] bootstrap checks failed. You must address the points described in the following [1] lines before starting Elasticsearch.
bootstrap check failure [1] of [1]: system call filters failed to install; check the logs and fix your configuration or disable system call filters at your own risk
ERROR: Elasticsearch did not exit normally - check the logs at /data/elasticsearch/elasticsearch-7.16.2/logs/elasticsearch.log

在错误中提到的日志文件elasticsearch.log中查看：

[2022-12-06T17:09:36,977][WARN ][o.e.b.JNANatives         ] [VM-16-8-centos] unable to install syscall filter:
java.lang.UnsupportedOperationException: seccomp unavailable: CONFIG_SECCOMP not compiled into kernel, CONFIG_SECCOMP and CONFIG_SECCOMP_FILTER are needed
        at org.elasticsearch.bootstrap.SystemCallFilter.linuxImpl(SystemCallFilter.java:347) ~[elasticsearch-7.16.2.jar:7.16.2]
        at org.elasticsearch.bootstrap.SystemCallFilter.init(SystemCallFilter.java:638) ~[elasticsearch-7.16.2.jar:7.16.2]
        at org.elasticsearch.bootstrap.JNANatives.tryInstallSystemCallFilter(JNANatives.java:255) [elasticsearch-7.16.2.jar:7.16.2]
        at org.elasticsearch.bootstrap.Natives.tryInstallSystemCallFilter(Natives.java:102) [elasticsearch-7.16.2.jar:7.16.2]
        at org.elasticsearch.bootstrap.Bootstrap.initializeNatives(Bootstrap.java:112) [elasticsearch-7.16.2.jar:7.16.2]
        at org.elasticsearch.bootstrap.Bootstrap.setup(Bootstrap.java:183) [elasticsearch-7.16.2.jar:7.16.2]
        at org.elasticsearch.bootstrap.Bootstrap.init(Bootstrap.java:434) [elasticsearch-7.16.2.jar:7.16.2]
        at org.elasticsearch.bootstrap.Elasticsearch.init(Elasticsearch.java:166) [elasticsearch-7.16.2.jar:7.16.2]
        at org.elasticsearch.bootstrap.Elasticsearch.execute(Elasticsearch.java:157) [elasticsearch-7.16.2.jar:7.16.2]
        at org.elasticsearch.cli.EnvironmentAwareCommand.execute(EnvironmentAwareCommand.java:77) [elasticsearch-7.16.2.jar:7.16.2]
        at org.elasticsearch.cli.Command.mainWithoutErrorHandling(Command.java:112) [elasticsearch-cli-7.16.2.jar:7.16.2]
        at org.elasticsearch.cli.Command.main(Command.java:77) [elasticsearch-cli-7.16.2.jar:7.16.2]
        at org.elasticsearch.bootstrap.Elasticsearch.main(Elasticsearch.java:122) [elasticsearch-7.16.2.jar:7.16.2]
        at org.elasticsearch.bootstrap.Elasticsearch.main(Elasticsearch.java:80) [elasticsearch-7.16.2.jar:7.16.2]

• 处理

在elasticsearch配置文件，如：/etc/elasticsearch/elasticsearch.yml中添加一行配置：

bootstrap.system_call_filter: false

再次启动，elasticsearch正常运行。

• 问题

笔记本电脑安装hexo后，在Powershell中输入hexo，没有得到想要的输出，得到错误：

hexo : 无法加载文件 C:\Users\Zeno\AppData\Roaming\npm\hexo.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:
/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ hexo
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

• 原因

复制上面错误提示中的链接在浏览器中打开，阅读文档后可以知道两点：

1. Powershell execution policies的值有：AllSigned,Bypass,Default,RemoteSigned,Restricted,Undefined,Unrestricted
2. Powershell execution policies可以通过Scope限制设置值生效范围。Scope的值有：MachinePolicy,UserPolicy,Process,CurrentUser,LocalMachine

现在可以知道，出现上面错误是因为about_Execution_Policies值问题限制了hexo运行。

• 处理

通过命令：Set-ExecutionPolicy -ExecutionPolicy <PolicyName>可以设置。

一般出现这个错误:

SQLSTATE[HY000] [1045] Access denied for user ''@'localhost' (using password: NO)

是密码空,但是在Phalcon中如果项目数据库有主从库,在事务中没有指定库:

use Phalcon\Mvc\Model\Transaction\Manager as TxManager;

$manager = new TxManager();
$transaction = $manager->get();

也会遇到上面的错误.这是因为Phalcon默认会从config的database配置字段去读取数据库配置.
所以只需要加一行代码:

$manager->setDbService('master');

如果你也遇到了这个问题,把上面的master换成你的库连接名称就好了.