mavon-editor文本編輯器之圖片上傳和回顯

安裝

 cnpm install mavon-editor --save

main.js中引用

//mavonEditor
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

想要使用的地方直接使用，此處的@imgAdd="imgAdd" @imgDel="imgDel"是圖片上傳的固定方法

        <div id="editor">
        <mavon-editor style="height: 100%;width: 100%;" ref=md @imgAdd="imgAdd"
                      @imgDel="imgDel" ></mavon-editor>
        </div>
      </div>

圖片上傳方法

   imgAdd(pos, $file){
        var _this = this;
        // 第一步.將圖片上傳到服務器.
        var formdata = new FormData();
        formdata.append('image', $file);
       this.uploadFileRequest("/config/uploadimg", formdata).then(resp=> {
          var json = resp.data.message; //取出上傳成功后的url
          if (resp.status == 200) {
          //  _this.$refs.md.$imgUpdateByUrl(pos, json.msg)
            _this.$refs.md.$imglst2Url([[pos, json]])
          } else {
            _this.$message({type: json.status, message: json});
          }
        });
      },
      imgDel(pos){

      },

我這個圖片上傳的方法是將axios進行封裝了

 

//uploadFileRequest請求
export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

至此，ok

posman調試注意

請求是post

body一欄設置的是formdata

key類型必須是和后台圖片接口名稱一樣