一.配置文件上传两个注意事项

1.action属性必须是绝对路径

2.手动配置请求头headers

完整代码：

<el-uploadaction="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>

二.显示图片预览

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

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

三.富文本编辑器：

这里使用 Vue-Quill-Editor

下载地址：/package/vue-quill-editor

使用步骤：

1.安装

npm install vue-quill-editor --save

2.引入（main.js）

//引入富文本编辑器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; */}