el-upload、后台系统图片展示和富文本编辑器的使用

一、el-upload不走axios请求，el-upload自身封装了ajax请求

1、文件上传配置请求头

2、上传成功后返回的格式：

{
    "data": {
        "tmp_path": 图片的临时路径,
        "url":图片上传到服务器上的路径
    },
    "meta": {
        "msg": "上传成功",
        "status": 200
    }
}

3、 配置文件上传两个注意事项

1.action属性必须是绝对路径
2.手动配置请求头headers

完整代码：
<el-upload
  action="http://www.ysqorz.top:8888/api/private/v1/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="handleSuccess"
  :headers="headersObj"
  list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>

4、显示图片预览

项目上线后，才能得到真实的线上图片地址，本地不能演示

核心思路：通过上传成功后，将url赋值给data中的一个变量，再将变量传给对话框中img src=“上传后返回的url”

二、富文本编辑器：

Vue-Quill-Editor

地址：https://www.npmjs.com/package/vue-quill-editor

使用步骤：
1.安装
	npm install vue-quill-editor --save
2.引入
  //引入富文本编辑器
  import VueQuillEditor from 'vue-quill-editor'

  //引入vue-quill-editor相关样式
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  Vue.use(VueQuillEditor)
3.在需要的组件中加载富文本编辑器
	<quill-editor v-model="addForm.goods_introduce"></quill-editor>
	
	解决富编辑器高度问题
		.ql-editor {
  		height: 300px !important;
		}
	解决富文本编辑器不能加粗倾斜的问题,重置字体样式
	
	* {
		/* font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-weight:normal;
    font-style:normal; */
	}