如上图，展示出来的效果。

首先先说富文本编辑器的引入和图片上传

富文本start-----------------------

1.

安装富文本编辑器quill-editor       npm install quill-editor 

安装富文本编辑器图片上传插件quill-editor-upload   npm install vue-quill-editor-upload --save  

2.

在main.js中添加

//引入富文本编辑器quill-editor
import  VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

在vue文件中引入

import {quillRedefine} from 'vue-quill-editor-upload'//引入图片上传

3.

//在.vue文件中引入quill富文本编辑器

<quill-editor
  v-model="content"
  :options="editorOption"
  ref="myQuillEditor">

editorOption用来配置文件上传路径

4.

data中声名editorOption

data() {
  return {
    uploadUrl: process.env.BASE_API + "/system/editfile/upload",//文件上传接口
    editorOption: {}, 

5.

created中配置editorOption

created() {
  this.editorOption = quillRedefine(//修改富文本编辑器图片上传路径
    {
      // 图片上传的设置
      uploadConfig: {
        action: this.uploadUrl,  // 必填参数 图片上传地址
        res: (respnse) => {
          return respnse.data.src;//return图片url
        },
        name: 'img'  // 图片上传参数名
      }
    })
}

到此富文本编辑器图片上传完成

文件上传配置具体可查看github文档：https://github.com/NextBoy/vue-quill-editor-upload

富文本end-----------------------

文件上传start-----------------

//在.vue中引入elementui的文件上传

<el-form-item label="上传文件:">
  <el-upload
             ref="uploads"
             :action="uploadUrl"
             :on-preview="filePreview"
             :before-remove="beforeFileRemove"
             :on-remove="fileRemove"
             :on-success="fileSuccess"
             :file-list="uploadFileList">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</el-form-item>

action配置文件上传路径

data中声名文件列表

data() {
  return {
    obj:{}
    uploadUrl: process.env.BASE_API + "/system/editfile/upload",//文件上传接口
    uploadFileList: [],
  }
},

created中获取文件列表

created() {
  if (this.obj.id) {//如果是编辑或者查看 获取附件文件列表
    api.findFileList(this.obj.id).then(response => {
      this.uploadFileList = response.data;
    });
  }}

 

filePreview文件点击事件：

filePreview(file) {
  window.open(file.url);
}

fileSuccess文件上传成功事件：

fileSuccess(res, file, fileList) {//文件上传 上传成功
  this.uploadFileList.push({name: res.data.title, url: res.data.src, id: res.data.id});
},

beforeFileRemove文件删除前事件：

beforeFileRemove(file, fileList) {//文件上传 移除文件前
  return this.$confirm(`确定移除 ${ file.name }？`);
},

fileRemove文件删除事件：

fileRemove(file, fileList) {//文件上传 移除文件
  this.uploadFileList = fileList;
},

点击新增或者修改时候 调用接口

addOrEdit() {
  this.$refs.ruleForm.validate((valid) => {
    if (valid) {
      if (this.data.currentOpert === "add") {
        api.add(this.obj, JSON.stringify(this.uploadFileList));//传参添加文件列表
      } else {
        api.edit(this.obj, JSON.stringify(this.uploadFileList));//传参添加文件列表      }
    }
  });

js中文件新增和编辑方法

add(param, files) {
  return request({
    url: '/test/obj/add',
    method: 'post',
    params: {
      "obj": param,
      "files": files
    }
  })
},

后台controller add方法

public void add() {
    Obj obj= JSONObject.parseObject(getPara("obj"), Obj.class);
    List<SysDocument> fileList = JSONObject.parseArray(getPara("files"), SysDocument.class);//获取文件列表
    ArrayList<Object> fileIds = new ArrayList<>();
    for (int i = 0; i < fileList.size(); i++) {
        fileIds.add(fileList.get(i).getId());
    }
    obj.setDocumentId(StringUtils.join(fileIds, ","));//将文件id用逗号分隔
    obj.setIsDeleted(false);
    obj.setGmtCreate(new Date());
    obj.setGmtModified(new Date());
    if (!objService.save(obj)) {
        throw new BusinessException("保存失败");
    }
    renderJson(RestResult.buildSuccess("保存成功"));
}

文件上传end------------------

文件上传controller 用的是jboot

 
@RequestMapping("/system/editfile")
public class FileUtilsController extends BaseController {

    @JbootrpcService
    private SysDocumentService documentService;
    //配置的文件地址
    String http = PropKit.use("jboot.properties").get("serverPath");//配置的服务器地址

    /**
     * 上传文件
     */
    public void upload() {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("code", 1);
        map.put("msg", "上传失败");

        //获取上传的文件信息
        UploadFile file = getFile();
        if (file != null) {

            File oldfile = file.getFile();
            // 获得文件原始名称
            String fileName = file.getOriginalFileName();
            // 生成最新的uuid文件名称
            String newFileName = FileTypeJudge.reFileName(fileName);
            // 文件重命名
            oldfile.renameTo(new File(file.getUploadPath() + "/" + newFileName));
           //上传文件后保存文件信息到附件表
            SysDocument model = new SysDocument();
            model.setName(fileName);
            model.setNewName(newFileName);
            model.setUrl(http + "/" + newFileName);
            model.setCreateTime(new Date());
            Integer fileId = documentService.saveFile(model);
            if (fileId != null) {
                Map<String, Object> data = new HashMap<String, Object>();
                data.put("src", http + "/" + newFileName);
                data.put("title", fileName);
                data.put("id", fileId);
                map.put("code", 0);
                map.put("msg", "上传成功");
                map.put("data", data);
            }
        }
        renderJson(map);
    }
}