vue quill-editor图片上传，vue文件上传功能

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

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

富文本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富文本编辑器

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的文件上传

  
    点击上传
  

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 fileList = JSONObject.parseArray(getPara("files"), SysDocument.class);//获取文件列表
    ArrayList