Imagem de efeito
Prefácio
Pelo que eu sei, este é um editor de rich text baseado em bootstrap.Eu gosto de seu estilo e função de upload de imagem.
Questão 1:
Seu upload de imagem padrão é converter a imagem para a codificação base64 e enviá-la ao back end. Obviamente, não é isso que queremos. Esperamos que a imagem seja enviada ao back-end para ser salva como um arquivo e que o back-end retorne ao caminho salvo.
Questão 2:
Quando a imagem é carregada de forma assíncrona, não há exibição de progresso. Se você carregar imagens grandes, como imagens dinâmicas, a experiência do usuário não será muito boa. Para isso, uso o BootBox.js ( https://www.bootboxjs.cn/ ), um plugin de caixa modal baseado em bootstrap, para exibir a barra de progresso do upload.
Pise no poço
1. Bootstrap, bootbox, dependências relacionadas ao Summernote são apresentadas, ligeiramente ...
2. A API do Summernote pode ser diferente entre as diferentes versões. Aqui, fornecemos apenas ideias para reescrever o upload da imagem e exibir a barra de progresso do upload. Para a API específica do summernote, consulte a documentação do site oficial
3. Teste no ambiente de implantação do servidor:
(1) Às vezes, verifica-se que a imagem foi inserida na posição errada e não foi inserida com sucesso na caixa de edição, mas não foi encontrada no teste local. O motivo é desconhecido.
(2) Por que a caixa de diálogo da barra de progresso desaparece depois de um tempo quando a barra de progresso está cheia?
O andamento do upload se refere ao número de bytes que o front end enviou depois que o back end o recebeu completamente. Irá mover os arquivos temporários para o diretório especificado e inserir dados no banco de dados. A operação no nível de negócios leva tempo. Portanto, a barra de progresso está cheia, o que significa que o front end enviou todos os bytes. Há um período de diferença de tempo entre a transmissão completa e a resposta. Quando a resposta é recebida, a caixa de diálogo da barra de progresso é oculta.
(3) Por que esperar um pouco após a caixa de diálogo da barra de progresso ser ocultada antes de inserir a imagem na caixa de edição?
A operação de inserção de imagens no summernote é assíncrona. Portanto, a caixa de diálogo da barra de progresso é fechada sem esperar a inserção da imagem. Depois que a imagem é inserida na caixa de edição, a imagem deve ser carregada de acordo com a URL da rede. O teste descobriu que a imagem está completamente carregada antes de ser inserida na caixa de edição e exibida. Se a largura de banda do servidor for pequena (o servidor do aluno que uso), imagens maiores serão carregadas mais lentamente.
Código
<script>
$(function() {
var $summernote = $('#summernote').summernote({
height: 420,
focus: true,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
],
// 复写图片上传方法
onImageUpload: function (files, editor, $editable) {
sendFile(files[0], editor, $editable);
}
});
//ajax上传图片
function sendFile(file, editor, $editable) {
if (file == null) {
// 取消或关闭了文件选择对话框
return;
}
console.log(editor);
console.log($editable);
var val = 0; // 进度。百分比
var totalBytes = file.size; // 文件的总字节数
console.log(totalBytes);
var formData = new FormData();
formData.append("file", file);
// 显示进度对话框
showProgressDialog();
var uploadAjax = $.ajax({
url: "图片上传的接口路径",
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
xhr: function() {
//获取原生的xhr对象
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
//添加 progress 事件监听
//console.log(xhr.upload);
xhr.upload.onprogress = function(e) {
// e.loaded 已经加载的字节数
val = (int) (e.loaded / totalBytes * 100);
if (val > 100) {
val = 100;
}
// 更新进度条的进度
$('#progressBar').css({
width: val.toFixed(2) + '%'
});
$('#progressBar').html(val.toFixed(2) + '%');
};
xhr.upload.onabort = function() {
// 取消上传的回调
};
}
return xhr;
},
// ajax请求成功的回调
success: function (data) {
console.log(data);
if (data['result'] === true) {
//console.log($editable);
// 异步将图片插入到编辑框中
editor.insertImage($editable, "__public__/" + data['save_path']);
//$summernote.summernote('insertImage', data['save_path']);
} else {
alert(data['error']);
}
// 关闭对话框
bootbox.hideAll();
}
});
function showProgressDialog() {
var html =
"<div class='progress'><div id='progressBar' class='progress-bar' role='progressbar' style='min-width: 2em;'>" + (val + '%') + "</div></div>";
bootbox.dialog({
title: '正在上传...',
message: html,
size: 'large',
onEscape: false,
backdrop: false,
buttons: {
cancel: {
label: '取消',
className: 'btn btn-outline-danger',
callback: function(){
// 中断ajax请求
if (uploadAjax != null) {
//console.log(uploadAjax);
uploadAjax.abort();
}
// 关闭对话框
bootbox.hideAll();
}
}
}
});
}
}
});
</script>