vue-quill-editor富文本编辑器及图片上传到服务器

最近在做后台管理平台，该项目是使用vue+element-ui框架，有一个界面就是关于消息推送的，在网上找了一圈,比较适合的就是vue-quill-editor富文本编辑器

1.需求完成图：

此项目就是给用户发送简单的消息和配上几张图片就行(比较简单), 也就是我发给后台的富文本内容中的图片是要先传到服务器中的
再观摩了一位大佬的网站: https://segmentfault.com/a/1190000012620431 我就跟着他后面写, 用了element中的upload上传图片

2.代码部分

          <el-form-item prop="messageContent">
              <el-col :span="1.5" >
                  正文：
              </el-col>
              <el-col style="width:800px" class="editor-col"> `在这里插入代码片`
                  <el-card style="height: 400px;">
                      <!-- 图片上传组件辅助-->
                      <el-upload
                          class="avatar-uploader"
                          :action="serverUrl"   //上传到服务器的路径
                          name="file"
                          :headers="header"
                          :show-file-list="false"
                          :on-success="uploadSuccess"
                          :on-error="uploadError">
                      </el-upload>
                      <quill-editor v-model="detailContent" style="height: 230px;" 
                          ref