vue传统文件服务器上传图片,vue富文本+图片上传到服务器

富文本默认图片转换为base64，改为上传到制定服务器

class="avatar-uploader"

action="/mdr/api/website/uploadFile"

name="uploadFile"

:show-file-list="false"

:on-success="uploadSuccess"

:http-request="handleUploadForm"

:before-upload="beforeUpload"

>

v-model="form.content"

ref="myQuillEditor"

:options="editorOption"

>

Save Draft

Publish

import { quillEditor } from "vue-quill-editor";

import "quill/dist/quill.core.css";

import "quill/dist/quill.snow.css";

import "quill/dist/quill.bubble.css";

import { getExport } from '@/utils/request'

const toolbarOptions = [

["bold", "italic", "underline", "strike"], // toggled buttons

["blockquote", "code-block"],

[{ header: 1 }, { header: 2 }], // custom button values

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

[{ script: "sub" }, { script: "super" }], // superscript/subscript

[{ indent: "-1" }, { indent: "+1" }], // outdent/indent

[{ direction: "rtl" }], // text direction

[{ size: ["small", false, "large", "huge"] }], // custom dropdown

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

[{ color: [] }, { background: [] }], // dropdown with defaults from theme

[{ font: [] }],

[{ align: [] }],

["link", "image", "video"],

["clean"] // remove formatting button

];

export default {

components:{

quillEditor

},

data() {

return {

quillUpdateImg: false,

content: "",

editorOption: {

placeholder: "",

theme: "snow", // or 'bubble'

modules: {

toolbar: {

container: toolbarOptions, // 工具栏

//点击按钮选择本地图片

handlers: {

image: function(value) {

if (value) {

// 触发input框选择图片文件

document.querySelector(".avatar-uploader input").click()//获取第一个上传组件事件

//如果页面有多个上传组件，用这个 1为下标

//document.querySelectorAll(".avatar-uploader input")[1].click()

debugger

console.log(clicked)

} else {

this.quill.format("image", false);

}

}

}

}

}

},

form:{

content:''

},

};

},

methods: {

beforeUpload() {

this.quillUpdateImg = true;

},

handleUploadForm (param) {

debugger

let thiz = this

let formData = new FormData()

formData.append('type', "vessel") // 额外参数

formData.append('file', param.file)

let loading = thiz.$loading({

lock: true,

text: '上传中，请稍候...',

spinner: 'el-icon-loading',

background: 'rgba(0, 0, 0, 0.7)'

})

getExport(formData).then((re) => {

debugger

let quill = this.$refs.myQuillEditor.quill;

// 如果上传成功

if (true) {

let length = quill.getSelection().index;

quill.insertEmbed(length, "image", re.fileUrl);

quill.setSelection(length + 1);

} else {

this.$Message.error("图片插入失败");

}

this.quillUpdateImg = false;

loading.close()

})

},

uploadSuccess(res, file) {

let quill = this.$refs.myQuillEditor.quill;

if (true) {

let length = quill.getSelection().index;

quill.insertEmbed(length, "image", res.filename);

quill.setSelection(length + 1);

} else {

this.$Message.error("图片插入失败");

}

this.quillUpdateImg = false;

},

save(status){

this.form.status = status

const param = this.form

debugger

console.log(param)

},

}

};