Imagen de efecto
Prefacio
Hasta donde yo sé, este es un editor de texto enriquecido basado en bootstrap Me gusta su estilo y función de carga de imágenes.
Pregunta 1:
Su carga de imagen predeterminada es convertir la imagen a codificación base64 y enviarla al back-end. Obviamente, esto no es lo que queremos. Esperamos que la imagen se envíe al back-end para guardarla como un archivo, y el back-end devolverá su ruta guardada.
Pregunta 2:
Cuando la imagen se carga de forma asincrónica, no se muestra el progreso. Si carga imágenes grandes, como imágenes dinámicas, la experiencia del usuario no es muy buena. Con este fin, uso BootBox.js ( https://www.bootboxjs.cn/ ), un complemento de cuadro modal basado en bootstrap, para mostrar la barra de progreso de carga.
Pisar el hoyo
1. Se introducen las dependencias relacionadas con Bootstrap, bootbox, summernote, ligeramente ...
2. La API de Summernote puede ser diferente entre las diferentes versiones. Aquí solo proporcionamos ideas para reescribir la carga de la imagen y mostrar la barra de progreso de carga. Para la API específica de summernote, consulte la documentación del sitio web oficial
3. Pruebe en el entorno de implementación del servidor:
(1) A veces se descubre que la imagen se inserta en la posición incorrecta y no se inserta correctamente en el cuadro de edición, pero no se encuentra en la prueba local. Se desconoce el motivo.
(2) ¿Por qué desaparece el cuadro de diálogo de la barra de progreso después de un tiempo cuando la barra de progreso está llena?
El progreso de la carga se refiere a la cantidad de bytes que el front-end ha enviado después de que el back-end lo ha recibido por completo. Moverá los archivos temporales al directorio especificado e insertará datos en la base de datos. La operación a nivel empresarial lleva tiempo. Por lo tanto, la barra de progreso está llena, lo que significa que la interfaz ha enviado todos los bytes. Existe un período de diferencia de tiempo entre la transmisión completa y la respuesta. Cuando se recibe la respuesta, se oculta el cuadro de diálogo de la barra de progreso.
(3) ¿Por qué esperar un rato después de que se oculte el cuadro de diálogo de la barra de progreso antes de insertar la imagen en el cuadro de edición?
La operación de insertar imágenes en summernote es asincrónica. Por lo tanto, el cuadro de diálogo de la barra de progreso se cierra sin esperar a que se inserte la imagen. Después de insertar la imagen en el cuadro de edición, la imagen debe cargarse de acuerdo con la URL de la red. La prueba encontró que la imagen está completamente cargada antes de insertarse en el cuadro de edición y mostrarse. Si el ancho de banda del servidor es pequeño (el servidor de estudiantes que uso), las imágenes más grandes se cargarán más 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>