vue quill editor修改上传图片方式 - litong534/web GitHub Wiki

本示例是配合element-ui使用的

缺省的方式是将图片转成base64编码嵌入到dom结构里，直接存储数据库会导致内容过多占用大量的数据库存储空间,加载速度也会变慢

<!--some code-->
<quill-editor  ref="newEditor" v-model="form.intro" ></quill-editor>
<!-- 文件上传input 将它隐藏 -->
<el-upload 
  style="display:none"
  :action="apiurl" :show-file-list="false"
  :before-upload='newEditorbeforeupload'
  :on-success='newEditorSuccess'
  ref="uniqueId"
  id="uniqueId">
</el-upload>
<!-- some code -->

el-upload是element-ui组件中的上传组件，组件的name属性为'file'，这里要记住，后面会用到

在mounted钩子函数中重写editor的图片上传方法

var imgHandler = async function(state) {
 if (state) {
   var fileInput = document.querySelector('#uniqueId input') //隐藏的file元素
   fileInput.click() //触发事件
  }
}
this.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)

methods中添加以下方法

newEditorbeforeupload(file){                       
   const isJPG = file.type === 'image/jpeg' ||file.type ===  'image/png';
   const isLt2M = file.size / 1024 / 1024 < 2;
   if (!isJPG) {
       this.$message.error('上传图片只能是 JPG或PNG 格式!');
   }
   if (!isLt2M) {
       this.$message.error('上传图片大小不能超过 2MB!');
   }
   if(isJPG && isLt2M)this.imageLoading = true
      return isJPG && isLt2M;                                            
},
  //上传图片回调 
newEditorSuccess(response, file, fileList){
  if(response.status===1){                        
      this.addImgRange = this.$refs.newEditor.quill.getSelection()
      this.$refs.newEditor.quill.insertEmbed(this.addImgRange != null?this.addImgRange.index:0, 'image',response.datas, Quill.sources.USER)
    }
  this.imageLoading = false
}

data中定义apiurl

apiurl: SERVER_UPLOADS

下面以后端为nodejs举例：

var express = require('express');
var app = express();
var router = express.Router();
var fs = require('fs');
var formidable = require('formidable');
router.route('/').post(function (req, res) {
  // 获得文件的临时路径
  var form = new formidable.IncomingForm();
  form.uploadDir = '/home/tmp';
  // form.uploadDir = 'E:\\tmp\\';
  form.parse(req, function (err, fields, files) {
    var tmp_path = files.file.path;
    var target_path = '/var/www/uploads/images/' + files.file.name;
    fs.rename(tmp_path, target_path, function (err) {
      if (err) throw err;
      let imgpath = 'http://<address>/uploads/images/' + files.file.name;
      // 删除临时文件夹文件, 
      fs.unlink(tmp_path, function () {
        if (err) throw err;
        res.json({ status: 1, datas: imgpath });
      });
    });
  });
});
module.exports = router;

此处第一点需要使用formidable包来处理客户端以POST方式提交的表单、文件、图片等。

核心代码为

var form = new formidable.IncomingForm();
form.parse(req,function(err,fields,files){});
此处可以从files参数中获取图片，在这之前我们指定文件临时路径为/home/tmp

files.file，这个属性就是之前我们upload组件的name属性名。

获取到图片之后通过fs.rename将文件移动到我们指定的路径中，此处为/var/www/uploads/images/ +

之后用unlink方法删除临时文件，返回图片路径，在上传图片回调中进行后续处理。

vue quill editor修改上传图片方式 - litong534/web GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️