quill-editor 2.0 图片上传拦截自定义，非base64

最新推荐文章于 2024-06-20 15:06:48 发布

热情的蟋蟀

最新推荐文章于 2024-06-20 15:06:48 发布

阅读量158

点赞数 1

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_33548028/article/details/139275539

版权

如果不知该如何使用quill-editor 2.0，请移步：https://blog.csdn.net/qq_33548028/article/details/138156795

有时需求是该文章不得超过五千字符，但一张base64图片就很长了，这时需要自己调用上传图片方法拿到返回的url，网上都是1.0的写法了，往固定位置插入一张图，然后把光标后移，这种做法不提倡了，下面介绍2.0写法。

首先，需要安装一个 quill-image-uploader，也可以自己写一个（如果你不嫌费事）。我的版本是 "quill-image-uploader": "^1.3.0"

然后，页面引入，当然，你有可能不需要这么多css。

import { QuillEditor, Quill  } from '@vueup/vue-quill'
import ImageUploader from "quill-image-uploader";
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import '@vueup/vue-quill/dist/vue-quill.core.css';
import '@vueup/vue-quill/dist/vue-quill.bubble.css';

最关键的一步，是一定要引进来的ImageUploader注册到Quill实例上

Quill.register("modules/imageUploader", ImageUploader);

然后在quill-editor绑定的options的modules里面，这样写就行了

modules = {
  imageUploader: {
    upload: async (file) => {
      let filePath = ''
      filePath = await handleImg(file)
      if(filePath){
        return filePath
      }else{
        Quill.format('image', false)
      }
    }
  },
  toolbar: {
    container:[
      ['bold', 'italic', 'underline', 'strike'],
    ...省略
  }
}

下面是对图片上传的处理，不能大于2M啊之类的，可忽略

const handleImg = async(file) => {
  return new Promise((resolve,reject)=>{
  const result = beforeFileUpload(file)
  result.then(async res=>{
    if(res){
      customRequest(file).then(response=>{
        imgUrl.value = response
        resolve(imgUrl.value)
      })
    }else{
      reject()
    }
  },()=>{
    resolve('')
  })

  })
}

let customRequest = async(file) => {
  let imgUrlRes;
  const formData = new FormData();
  formData.append('file', file);

  return new Promise((resolve,reject)=>{
    proxy.$postFile('/upload/uploadImage', formData)
    .then((res) => {
      if (res.code == 0) {
        // message.success('上传成功');
        imgUrlRes = res.data.contentImageUrl
        resolve(imgUrlRes)
      } else {
        message.error(res?.message || '图片上传失败');
        reject()
      }
    }).catch((err) => {
      message.error(err)
      reject()
    });
  })

};

const beforeFileUpload = (file) => {

    // 判断兆数
    const test1 = new Promise((res, rej) => {
      const isSize = file.size > 2 * 1024 * 1024;
      if (isSize) {
        message.error(`上传文件不能超过${2}M！`);
        return rej(false);
      } else {
        return res(true);
      }
    })

    const test3 = new Promise((res, rej) => {

      const strType = file.name.split('.');
      const type = strType[strType?.length - 1];
      const isfileType = type === 'jpeg' || type === 'png' || type === 'jpg' || type === 'pdf';

      if (!isfileType) {
        message.error('请上传.jpg .png .pdf 格式的文件');
        return rej(false);
      } else {
        return res(true);
      }
    })

    return Promise.all([test1, test3]).then(async (result) => {
      if (result.includes(false)) {
        // 校验未通过，提醒检查
        antdMessage.error('请检查图片是否符合要求！');
        return false
      } else {
        // 符合所有要求，可以上传
        return true
      }
    })
};