mavon-editor
原文:https://www.bilibili.com/video/BV1U44y1W77D
link:https://gitee.com/wCHCw/mavonEditor/#/wCHCw/mavonEditor/blob/master/doc/cn/upload-images.md
安裝mavon-editor
注冊元件
// main.js全局注冊
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
Vue頁面使用
<div>
<mavon-editor ref="md" v-model="value" :ishljs="true" @imgAdd="imgAdd"/>
</div>
<!-- 預覽 -->
<mavon-editor
class="md"
:value="article.content"
:subfield="false"
:defaultOpen="'preview'"
:toolbarsFlag="false"
:editable="false"
:scrollStyle="true"
:ishljs="true"
/>
// 綁定@imgAdd event
imgAdd(pos, $file) {
let $vm = this.$refs.md
// 第一步.将圖檔上傳到伺服器.
const formData = new FormData();
formData.append('file', $file);
axios({
url: 'http://localhost:9090/file/upload',
method: 'post',
data: formData,
headers: {'Content-Type': 'multipart/form-data'},
}).then((res) => {
// 第二步.将傳回的url替換到文本原位置![...](./0) -> ![...](url)
$vm.$img2Url(pos, res.data);
})
},