vue上传图片文件到服务器,vue如何将quill图片上传到服务器

通过自定义quill图片上传按钮，实现将图片上传服务器，并插入服务器地址。

export default {

name: "editor",

props: ['content'],

data() {

return {

_content: '',

}

},

watch: {

// 监听父组件传递的content值，变化后更新富文本内容

content(newVal, oldVal) {

if (this.quill) {

if (newVal && newVal !== this._content) {

this._content = newVal;

this.quill.clipboard.dangerouslyPasteHTML(newVal);

} else if(!newVal) {

this.quill.setText('');

}

}

}

},

methods: {

uploadToServer(file, callback) {

var xhr = new XMLHttpRequest();

var formData = new FormData();

formData.append('upload', file);

xhr.open('post', this.$ajax.defaults.baseURL + '/upload/blogUpload');

xhr.withCredentials = true;

xhr.responseType = 'json';

xhr.send(formData);

xhr.onreadystatechange = () => {

if (xhr.readyState == 4 && xhr.status == 200) {

callback(xhr.response);

}

};

}

},

mounted() {

// 初始化quill

this.quill = new Quill(this.$refs.editor, {

theme: 'snow',

modules: {

history: {

userOnly: true

},

toolbar: [

['bold', 'italic', 'underline', 'strike'],

['blockquote', 'code-block'],

[{ 'list': 'ordered' }, { 'list': 'bullet' }],

[{ 'script': 'sub' }, { 'script': 'super' }],

[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

[{ 'color': [] }, { 'background': [] }],

[{ 'align': [] }],

['clean'],

['link', 'image', 'video']

],

syntax: true

}

});

// 自定义图片上传

var toolbar = this.quill.getModule('toolbar');

toolbar.addHandler('image', () => {

var fileInput = toolbar.container.querySelector('input.ql-image[type=file]');

if (fileInput == null) {

fileInput = document.createElement('input');

fileInput.setAttribute('type', 'file');

fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');

fileInput.classList.add('ql-image');

fileInput.addEventListener('change', () => {

if (fileInput.files != null && fileInput.files[0] != null) {

this.uploadToServer(fileInput.files[0], (res) => {

var range = this.quill.getSelection();

if (range) {

fileInput.value = null;

// 在当前光标位置插入图片

toolbar.quill.insertEmbed(range.index, 'image', this.$ajax.defaults.baseURL + res.file.path);

// 将光标移动到图片后面

toolbar.quill.setSelection(range.index + 1);

}

});

}

});

toolbar.container.appendChild(fileInput);

}

fileInput.click();

});

// 监听富文本变化，更新父组件数据

this.quill.on('text-change', () => {

let html = this.$refs.editor.children[0].innerHTML;

if (html === '

this._content = html;

this.$emit('edit', this._content);

});

}

}

.ql-snow .ql-editor pre.ql-syntax {

background-color: #282c34;

color: #abb2bf;

}

这里面只需要关注自定义图片上传部分即可。

this.$ajax.defaults.baseURL是配置的axios的baseurl，因为我要在本地和线上地址来回切换。

不用太在意，插入自己服务器返回的实际地址就行。