使用wangEditer5.0版本,和之前使用的上传图片的写法不太一样,使用组件默认的上传server,报错500,可以肯定的是这个接口是没问题的,不知道如何解决。
解决方法 :用自定义的方法上传
<template>
<div class="container">
<Toolbar :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
</div>
</template>
<script>
import E from "wangeditor";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: "",
toolbarConfig: {
excludeKeys: [
// 排除菜单组,写菜单组 key 的值即可
"group-video" //去掉视频
]
},
editorConfig: { MENU_CONF: {}, placeholder: "" },
mode: "default" // or 'simple'
};
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor); // 一定要用 Object.seal() ,否则会报错
}
},
created() {
var that = this;
this.editorConfig.placeholder = "请输入使用说明内容...";
this.editorConfig.MENU_CONF["uploadImage"] = {
timeout: 5 * 1000, // 5s
fieldName: "image",
headers: {
"Content-Type": "multipart/form-data",
Authorization: "Bearer " + localStorage.getItem("token")
},
maxFileSize: 10 * 1024 * 1024, // 10M
base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
onBeforeUpload(files) {
return files; // 返回哪些文件可以上传
// return false 会阻止上传
},
onProgress(progress) {
console.log("onProgress", progress);
},
onSuccess(file, res) {
console.log("onSuccess", file, res);
},
onFailed(file, res) {
alert(res.message);
console.log("onFailed", file, res);
},
onError(file, err, res) {
alert(err.message);
console.error("onError", file, err, res);
},
// 用户自定义上传图片
customUpload(file, insertFn) {
var axios = require("axios");
var FormData = require("form-data");
var data = new FormData();
data.append("image", file); // file 即选中的文件
var config = {
method: "post",
url: "https://xxx/updateImg", //上传图片地址
headers: {
"Content-Type": "multipart/form-data",
Authorization: "Bearer " + localStorage.getItem("token")
},
data: data
};
axios(config)
.then(function(res) {
let url = "https://xxx域名/" + res.data.data.path; //拼接成可浏览的图片地址
insertFn(url, "使用说明", url); //插入图片
})
.catch(function(error) {
console.log(error);
});
}
};
},
mounted() {},
beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy(); // 组件销毁时,及时销毁编辑器
}
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>