国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

vue中利用simplemde實(shí)現(xiàn)markdown編輯器（增加圖片上傳功能）

fobnn / 484人閱讀

摘要：前言最近在搭個(gè)人博客網(wǎng)站，需要一個(gè)編輯器，來(lái)進(jìn)行博客的編寫(xiě)看了網(wǎng)上的教程，決定使用以為可以直接能拿來(lái)用的不過(guò)實(shí)際運(yùn)用的時(shí)候發(fā)現(xiàn)還是有要完善的地方比如令人頭疼的圖片上傳最終效果安裝及初始化在中加入一個(gè)在的生命周期函數(shù)中，添加的實(shí)例化通過(guò)指

前言

最近在搭個(gè)人博客網(wǎng)站，需要一個(gè)markdown編輯器，來(lái)進(jìn)行博客的編寫(xiě)
看了網(wǎng)上的教程，決定使用simplemde
以為可以直接能拿來(lái)用的
不過(guò)實(shí)際運(yùn)用的時(shí)候發(fā)現(xiàn)還是有要完善的地方
比如令人頭疼的圖片上傳

最終效果

安裝及初始化

npm install simplemde --save

在html中加入一個(gè)textarea

在vue的生命周期函數(shù)mounted中，添加simplemde的實(shí)例化

var simplemde = new SimpleMDE({
      el: document.getElementById(simplemde)
    })

el通過(guò)dom指定為我們建立的textarea元素，如果省略，則會(huì)自動(dòng)抓取html結(jié)構(gòu)中的第一個(gè)textarea

綁定事件，使我們的內(nèi)容數(shù)據(jù)始終與simplemde獲取到的鍵入數(shù)據(jù)同步

simplemde.codemirror.on("change", () => {
      this.content = simplemde.value()
    })
上傳圖片

在原本的simplemde中
點(diǎn)擊圖片按鈕的效果是這樣的

這是個(gè)啥？？本地上傳的選擇框呢？？

沒(méi)辦法，既然沒(méi)有就只好自己做一個(gè)了

首先我們建立一個(gè)隱藏的input

接收?qǐng)D片格式的文件，點(diǎn)擊即可彈出本地上傳的文件選擇框
之所以要隱藏，是因?yàn)槲覀儾⒉幌胍@個(gè)按鈕
我們還是想通過(guò)點(diǎn)擊simplemde的圖片按鈕來(lái)上傳
雖然人家沒(méi)啥用，但好看呀

所以我們就把這個(gè)input給隱藏，只用一下它的click方法
這樣我們點(diǎn)擊圖片按鈕就相當(dāng)于在點(diǎn)擊這個(gè)input
在simplemde的源碼里，找到圖片按鈕調(diào)用的函數(shù)
把原來(lái)的都注釋掉，加上這兩句


這樣我們就可以調(diào)用本地上傳的選擇框了

那么選擇了圖片之后，為了能即時(shí)預(yù)覽
我們希望選擇之后，就發(fā)到后端存儲(chǔ)起來(lái)
在前端我們運(yùn)用axios+formdata進(jìn)行發(fā)送

var input = this.$refs.upInput
var formData = new FormData()
formData.append("i", input.files[0])
var config = {
     headers: {
       "Content-Type": "multipart/form-data"
      }
   }
this.$axios.post("/data/myupload", formData, config)

后端我是用的node，運(yùn)用multer模塊來(lái)接收
multer是專(zhuān)門(mén)用來(lái)處理mulipart/form-data格式的數(shù)據(jù)的

    var multer  = require("multer")
    
    //定義存儲(chǔ)器
    var storage = multer.diskStorage({
    //存儲(chǔ)路徑
    destination: function (req, file, cb) {
        cb(null, "../static/upload/")
    },
    //存儲(chǔ)文件名
    filename: function (req, file, cb) {
        cb(null, `${Date.now()}-${file.originalname}`)
    }
    })
    //運(yùn)用存儲(chǔ)器
    var upload = multer({ storage: storage })

    // 接受單圖的上傳
    router.post("/data/myupload", upload.single("i"), function (req,   res, next) {
    //將存儲(chǔ)后的文件名發(fā)還給前端
    res.send(req.file.filename)
    });

前端收到文件名后，將其跟存儲(chǔ)路徑打包寫(xiě)進(jìn)文本框中
也就是之前點(diǎn)擊圖片按鈕看到的那串字符
寫(xiě)入后就可預(yù)覽

  this.$axios.post("/data/myupload", formData, config).then((res)=> {
    var urlname=`![](/static/upload/${res.data})`
    simplemde.value(`${this.content}
${urlname}
`)
  })

看起來(lái)萬(wàn)事大吉了
但其實(shí)還漏了一點(diǎn)

那就是input的click()本身不是異步的，但是你選擇圖片需要時(shí)間，在這過(guò)程中后面的代碼（即便是異步代碼）都執(zhí)行了一遍，也就是說(shuō)現(xiàn)在寫(xiě)的這些發(fā)送存儲(chǔ)都在選完圖片之前就執(zhí)行完了

為了在選擇完圖片之后再執(zhí)行
我們新增一個(gè)監(jiān)聽(tīng)事件，監(jiān)聽(tīng)input的change，把之前的代碼都丟到這里面來(lái)

var input = this.$refs.upInput
input.addEventListener("change", () => {
  var formData = new FormData()
  formData.append("i", input.files[0])
  var config = {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  }
  this.$axios.post("/data/myupload", formData, config).then((res)=> {
    var urlname=`![](/static/upload/${res.data})`
    simplemde.value(`${this.content}
${urlname}
`)
  })
})

這樣就實(shí)現(xiàn)了我們的圖片上傳效果

顯示

比如通過(guò)編輯器，我們寫(xiě)了一篇博客，并存儲(chǔ)進(jìn)了后臺(tái)
想在別的組件中把它調(diào)出來(lái)顯示
也就是字符串轉(zhuǎn)為html

只需要調(diào)用simplemde的原型鏈方法

this.contentMarkdown = SimpleMDE.prototype.markdown(content)

然后把數(shù)據(jù)放到v-html中

即可顯示

再看一遍最終效果

PS

還有一些可以完善的地方
比如直接拖拽圖片進(jìn)來(lái)，或者粘貼
后期有時(shí)間研究一下再加上

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/103960.html

相關(guān)文章

  • js拖拽粘貼上傳與CodeMirror

    摘要：屬性介紹默認(rèn)是默認(rèn)是在粘貼操作時(shí)為空剪切板中的各項(xiàng)數(shù)據(jù)剪切板中的數(shù)據(jù)類(lèi)型。避免重復(fù)創(chuàng)建上傳中文件成功失敗處理已上傳上傳出錯(cuò)添加文件到隊(duì)列并上傳開(kāi)始上傳其他參考獲取剪切板內(nèi)容，控制圖片粘貼在線代碼編輯器事件說(shuō)明 Markdown編輯器選用https://simplemde.com它是一款純js實(shí)現(xiàn)的markdown編輯器。缺點(diǎn)不支持圖片上傳。那我們就得改造它。simplemde是基于co...

    FullStackDeveloper 評(píng)論0 收藏0

  • VueCli+Node+mongodb打造個(gè)人博客（含前臺(tái)展示及后臺(tái)管理系統(tǒng)）（中）

    摘要：前言前文打造個(gè)人博客含前臺(tái)展示及后臺(tái)管理系統(tǒng)上地址在上篇文章中我們完成了后端的配置，實(shí)現(xiàn)了對(duì)數(shù)據(jù)的增刪查改現(xiàn)在只需要前端頁(yè)面發(fā)送對(duì)應(yīng)的請(qǐng)求給后端即可引入在開(kāi)始搭建組件前，我們先要確定前端異步請(qǐng)求的方式這里我用的是先在中將其引入這樣我們就可以 前言 前文：VueCli+Node+mongodb打造個(gè)人博客（含前臺(tái)展示及后臺(tái)管理系統(tǒng)）（上）https://segmentfault.com/...

    caikeal 評(píng)論0 收藏0

  • VueCli+Node+mongodb打造個(gè)人博客（含前臺(tái)展示及后臺(tái)管理系統(tǒng)）（中）

    摘要：前言前文打造個(gè)人博客含前臺(tái)展示及后臺(tái)管理系統(tǒng)上地址在上篇文章中我們完成了后端的配置，實(shí)現(xiàn)了對(duì)數(shù)據(jù)的增刪查改現(xiàn)在只需要前端頁(yè)面發(fā)送對(duì)應(yīng)的請(qǐng)求給后端即可引入在開(kāi)始搭建組件前，我們先要確定前端異步請(qǐng)求的方式這里我用的是先在中將其引入這樣我們就可以 前言 前文：VueCli+Node+mongodb打造個(gè)人博客（含前臺(tái)展示及后臺(tái)管理系統(tǒng)）（上）https://segmentfault.com/...

    curlyCheng 評(píng)論0 收藏0

  • VueCli+Node+mongodb打造個(gè)人博客（含前臺(tái)展示及后臺(tái)管理系統(tǒng)）（中）

    摘要：前言前文打造個(gè)人博客含前臺(tái)展示及后臺(tái)管理系統(tǒng)上地址在上篇文章中我們完成了后端的配置，實(shí)現(xiàn)了對(duì)數(shù)據(jù)的增刪查改現(xiàn)在只需要前端頁(yè)面發(fā)送對(duì)應(yīng)的請(qǐng)求給后端即可引入在開(kāi)始搭建組件前，我們先要確定前端異步請(qǐng)求的方式這里我用的是先在中將其引入這樣我們就可以 前言 前文：VueCli+Node+mongodb打造個(gè)人博客（含前臺(tái)展示及后臺(tái)管理系統(tǒng)）（上）https://segmentfault.com/...

    hiyang 評(píng)論0 收藏0

  • VueCli+Node+mongodb打造個(gè)人博客（含前臺(tái)展示及后臺(tái)管理系統(tǒng)）（中）

    摘要：前言前文打造個(gè)人博客含前臺(tái)展示及后臺(tái)管理系統(tǒng)上地址在上篇文章中我們完成了后端的配置，實(shí)現(xiàn)了對(duì)數(shù)據(jù)的增刪查改現(xiàn)在只需要前端頁(yè)面發(fā)送對(duì)應(yīng)的請(qǐng)求給后端即可引入在開(kāi)始搭建組件前，我們先要確定前端異步請(qǐng)求的方式這里我用的是先在中將其引入這樣我們就可以 前言 前文：VueCli+Node+mongodb打造個(gè)人博客（含前臺(tái)展示及后臺(tái)管理系統(tǒng)）（上）https://segmentfault.com/...

    ninefive 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<