vue-quill-editor添加图片上传自定义压缩或修改为上传到服务器返回url地址
1、图片压缩方式：
代码：
<template>
<v-container fluid class="white">
<v-form ref="form">
<v-text-field
v-model="title"
:error-messages="titleErrors"
:counter="20"
label="标题"
required
@input="$v.title.$touch()"
@blur="$v.title.$touch()"
></v-text-field>
<v-text-field v-model="brief" label="简介"></v-text-field>
<v-file-input
accept="image/jpeg, image/png"
label="封面图片"
prepend-icon="mdi-file-image-outline"
@change="handleInputChange"
></v-file-input>
<v-row>
<v-col cols="12">
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
>
</quill-editor>
</v-col>
</v-row>
<v-btn class="mr-4" outlined @click="submit">提交</v-btn>
<v-btn outlined @click="clear">清空</v-btn>
</v-form>
</v-container>
</template>
<script>
const toolbarOptions = [
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{
header: 1 }, {
header: 2 }],
[{
list: "ordered" }, {
list: "bullet" }],
[{
indent: "-1" }, {
indent: "+1" }],
[{
color: [] }, {
background: [] }],
["image"]
];
const handlers = {
image: function image() {
let self = this;
var fileInput = this.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");
fileInput.classList.add("ql-image");
// 监听选择文件
fileInput.addEventListener("change", function() {
console.log(fileInput.files[0]);
let file = fileInput.files[0];
if (!/image\/\w+/.test(file.type)) {
console.log("图片格式不正确");
return false;
}
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
let img = new Image();
img.src = this.result;
img.onload = function() {
let that = this;
let scale = 800 / that.width;
let w = 800;
let h = that.height * scale;
// let w = that.width;
// let h = that.height;
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let anw = document.createAttribute("width");
anw.nodeValue = w;
let anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
let base64 = canvas.toDataURL("image/jpeg", 0.5);
console.log(base64);
let length = self.quill.getSelection(true).index;
self.quill.insertEmbed(length, "image", base64);
self.quill.setSelection(length + 1);
};
};
// 创建formData
// var formData = new FormData();
// formData.append(uploadConfig.name, fileInput.files[0]);
// formData.append("object", "product");
// 图片上传
// 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.path);
// self.quill.setSelection(length + 1);
// }
// fileInput.value = "";
// };
// // 开始上传数据
// 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();
},
dealImage: function(path, obj, callback) {
var img = new Image();
img.src = path;
img.onload = function() {
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || w / scale;
var quality = obj.quality || 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL("image/jpeg", quality);
// 回调函数返回base64的值
callback(base64);
};
}
};
import {
validationMixin } from "vuelidate";
import {
required } from "vuelidate/lib/validators";
import {
articleAdd, upload } from "@/api/blog";
export default {
mixins: [validationMixin],
validations: {
title: {
required }
},
name: "ArticleEdit",
components: {
},
data() {
return {
title: "",
brief: "",
content: "",
cover_img: "",
editorOption: {
// 编辑器自定义
placeholder: "请输入内容",
modules: {
toolbar: {
container: toolbarOptions,
handlers: handlers
}
}
}
};
},
computed: {
titleErrors() {
const errors = [];
if (!this.$v.title.$dirty) return errors;
!this.$v.title.required && errors.push("Title is required.");
return errors;
}
},
methods: {
submit() {
this.$v.$touch();
let para = {
title: this.title,
brief: this.brief,
cover_img: this.cover_img,
content: this.content
};
articleAdd(para)
.then(() => {
this.$router.push({
name: "Home",
params: {
reload: true
}
});
this.clear();
})
.catch(err => {
console.log(err);
});
},
clear() {
this.$v.$reset();
this.$refs.form.reset();
this.title = "";
this.brief = "";
this.cover_img = "";
this.content = "";
},
handleInputChange(v) {
if (v) {
let data = new FormData();
data.append("fileName", v.name);
data.append("file", v);
upload(data)
.then(res => {
this.cover_img = res.data;
})
.catch(error => {
console.log(error);
});
}
},
// 失去焦点事件
onEditorBlur() {
},
// 获得焦点事件
onEditorFocus() {
},
// 内容改变事件
onEditorChange() {
}
}
};
</script>