使用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, // 5sfieldName: "image",headers: {"Content-Type": "multipart/form-data",Authorization: "Bearer " + localStorage.getItem("token")},maxFileSize: 10 * 1024 * 1024, // 10Mbase64LimitSize: 5 * 1024, // 5kb 以下插入 base64onBeforeUpload(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>

總結

以上是生活随笔為你收集整理的wangEditor 5.0自定义上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。