sadjv3_admin/src/views/bl/massage/quill-config.js

99 lines
3.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { serverPaths } from '@/utils/enumData'
/*富文本编辑图片上传配置*/
const uploadConfig = {
action: serverPaths.uploadUrl, // 必填参数 图片上传地址
methods: 'POST', // 必填参数 图片上传方式
token: '', // 可选参数 如果需要token验证假设你的token有存放在sessionStorage
name: 'file', // 必填参数 文件的参数名
size: 500, // 可选参数 图片大小单位为Kb, 1M = 1024Kb
accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式
};
// toolbar工具栏的工具选项默认展示全部
const toolOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'direction': 'rtl'}],
[{'size': ['small', false, 'large', 'huge']}],
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}],
[{'font': []}],
[{'align': []}],
['clean'],
['link', 'image', 'video']
];
const handlers = {
image: function image() {
var self = this;
var fileInput = this.container.querySelector('input.ql-image[type=file]');
if (fileInput === null) {
fileInput = document.createElement('input');
fileInput.setAttribute('type', 'file');
// 设置图片参数名
if (uploadConfig.name) {
fileInput.setAttribute('name', uploadConfig.name);
}
// 可设置上传图片的格式
fileInput.setAttribute('accept', uploadConfig.accept);
fileInput.classList.add('ql-image');
// 监听选择文件
fileInput.addEventListener('change', function () {
// 创建formData
var formData = new FormData();
formData.append(uploadConfig.name, fileInput.files[0]);
formData.append('object','product');
// 如果需要token且存在token
if (uploadConfig.token) {
formData.append('token', uploadConfig.token)
}
// 图片上传
var xhr = new XMLHttpRequest();
xhr.open(uploadConfig.methods, uploadConfig.action, true);
// 上传数据成功,会触发
xhr.onload = function (e) {
if (xhr.status === 200) {
var res = JSON.parse(xhr.responseText);
let length = self.quill.getSelection(true).index;
//这里很重要你图片上传成功后img的src需要在这里添加res.path就是你服务器返回的图片链接。
self.quill.insertEmbed(length, 'image', res.data);
self.quill.setSelection(length + 1)
}
fileInput.value = ''
console.log('eeeeeeeeeeeeeeeee',e)
};
// 开始上传数据
xhr.upload.onloadstart = function (e) {
fileInput.value = ''
};
// 当发生网络异常的时候会触发,如果上传数据的过程还未结束
xhr.upload.onerror = function (e) {
};
// 上传数据完成(成功或者失败)时会触发
xhr.upload.onloadend = function (e) {
// console.log('上传结束')
};
xhr.send(formData)
});
this.container.appendChild(fileInput);
}
fileInput.click();
}
};
export default {
placeholder: '',
theme: 'snow', // 主题
modules: {
toolbar: {
container: toolOptions, // 工具栏选项
handlers: handlers // 事件重写
}
}
};