解決方案:
- 新建 js 文件
/*富文本編輯圖片上傳配置*/
const uploadConfig = {
action: '/upload/image', // 必填參數(shù) 圖片上傳地址
methods:'POST', // 必填參數(shù) 圖片上傳方式
headers:{}, // 可選參數(shù) 設(shè)置請(qǐng)求頭部
token:‘’, // 可選參數(shù) 如果需要token驗(yàn)證，假設(shè)你的token有存放在sessionStorage
name:'image', // 必填參數(shù) 文件的參數(shù)名
size:500, // 可選參數(shù) 圖片大小畅姊，單位為Kb, 1M = 1024Kb
accept:'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可選 可上傳的圖片格式
};
// toolbar工具欄的工具選項(xiàng)（默認(rèn)展示全部）
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');
// 設(shè)置圖片參數(shù)名
if (uploadConfig.name) {
fileInput.setAttribute('name', uploadConfig.name);
}
fileInput.setAttribute('accept', uploadConfig.accept);
fileInput.classList.add('ql-image');
// 監(jiān)聽選擇文件
fileInput.addEventListener('change', function () {
// 創(chuàng)建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();
// 可設(shè)置上傳圖片的格式
xhr.open(uploadConfig.methods, uploadConfig.action, true);
xhr.setRequestHeader('authorization',uploadConfig.token)
// 上傳數(shù)據(jù)成功闪幽，會(huì)觸發(fā)
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就是你服務(wù)器返回的圖片鏈接。
self.quill.insertEmbed(length, 'image', res.data);
self.quill.setSelection(length +1)
}
fileInput.value =''
};
// 開始上傳數(shù)據(jù)
xhr.upload.onloadstart =function (e) {
fileInput.value =''
};
// 當(dāng)發(fā)生網(wǎng)絡(luò)異常的時(shí)候會(huì)觸發(fā)陨瘩，如果上傳數(shù)據(jù)的過程還未結(jié)束
xhr.upload.onerror =function (e) {
};
// 上傳數(shù)據(jù)完成（成功或者失斖蠊弧）時(shí)會(huì)觸發(fā)
xhr.upload.onloadend =function (e) {
// console.log('上傳結(jié)束')
};
xhr.send(formData)
});
this.container.appendChild(fileInput);
}
fileInput.click();
}
};
export default {
placeholder:'',
theme:'snow', // 主題
modules: {
toolbar: {
container: toolOptions, // 工具欄選項(xiàng)
handlers: handlers// 事件重寫
}
}
};
- 在引用 quill-editor 的地方 配置 options 參數(shù)
<template>
<div class="quilWrapper">
<quil-edito
ref="myTextEditor"
v-model="articleAddForm.detail"
class="editor"
:options="tl"
/>
</div>
</template>
<script>
import tl from '@/utils/tl'
data() {
return {
tl: tl
}
}
</script>
3.完美解決
轉(zhuǎn)載: https://www.cnblogs.com/shuihanxiao/p/11081035.html
