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%; 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类型必须是和后台图片接口名称一样