vue+quill 图片上传改为文件上传

最新推荐文章于 2024-06-07 10:21:48 发布

arrowhan

最新推荐文章于 2024-06-07 10:21:48 发布

阅读量438

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/arrowhan/article/details/134293116

版权

本文介绍如何在Vue项目中使用Quill编辑器，将原本的图片上传功能改造为支持文件上传，并根据文件类型展示图片或下载链接。内容涵盖自定义link模块、图标修改、后缀判断以及提供完整代码示例。

摘要由CSDN通过智能技术生成

quill没有附件上传，将图片上传改装，兼容图片上传和附件上传

因为同时使用了表格，quill的版本使用的是2.0的版本

我用的是2.0.0-dev.3

npm install quill@2.0.0-dev.3

1.基于link自定义文件上传后展示下载链接

// Quill.import引入
  const Link = Quill.import("formats/link");
  // 自定义a链接
  class FileBlot extends Link {
    // 继承Link Blot
    static create (value) {
      let node = undefined;
      if (value && !value.href) {
        // 适应原本的Link Blot
        node = super.create(value)
      } else {
        // 自定义Link Blot
        node = super.create(value.href)
        node.href = value.href
        node.innerText = value.innerText
        node.setAttribute('download', value.innerText);  // 左键点击即下载
      }
      return node;
    }
  }
  FileBlot.blotName = "file" // insertEmbed中用到的名称
  FileBlot.tagName = "A"
  Quill.register(FileBlot) // 注册link

2.修改图片上传的图标

this.$el.querySelector(
    '.ql-image'
  ).innerHTML = `<svg t="1693300673548" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5709" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="200"><path d="M224 601.6v185.6a12.8 12.8 0 0 0 12.8 12.8h550.4a12.8 12.8 0 0 0 12.8-12.8V601.6a25.6 25.6 0 0 1 25.6-25.6h12.8a25.6 25.6 0 0 1 25.6 25.6v224a38.4 38.4 0 0 1-38.4 38.4H198.4a38.4 38.4 0 0 1-38.4-38.4v-224a25.6 25.6 0 0 1 25.6-25.6h12.8a25.6 25.6 0 0 1 25.6 25.6z m315.152-427.696l160 160a25.6 25.6 0 0 1 0 36.192l-9.056 9.056a25.6 25.6 0 0 1-36.192 0l-104.448-104.416a3.2 3.2 0 0 0-5.456 2.256V614.4a25.6 25.6 0 0 1-25.6 25.6h-12.8a25.6 25.6 0 0 1-25.6-25.6V276.992a3.2 3.2 0 0 0-5.456-2.256l-104.448 104.416a25.6 25.6 0 0 1-36.192 0l-9.056-9.056a25.6 25.6 0 0 1 0-36.192l160-160a38.4 38.4 0 0 1 54.304 0z" fill="#000000" p-id="5710"></path></svg>`

3.文件上传后处理，根据文件后缀判断是显示图片还是显示下载链接

    let fileType = file.name.substr(file.name.lastIndexOf('.') + 1)
    // 获取光标所在位置
    let length = quill.getSelection().index;
    // 插入图片  res.url为服务器返回的图片地址
    if (['png','jpeg', 'jpg', 'gif', 'bmp', 'webp'].indexOf(fileType) < 0) {
      // 插入文件，res为服务器返回的文件链接地址
      // console.log("minio" + res.data.downloadUrl);
      quill.insertEmbed(length , "file", { href: process.env.VUE_APP_BASE_API + res.fileName, innerText: res.originalFilename }, "");
    } else {
      quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
    }

4.完整代码

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: none"
      ref="upload"
      v-if="this.type == 'url'"
    >
    </el-upload>
    <div class="editor" ref="editor" :style="styles"></div>
  </div>
</template>

<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getToken } from "@/utils/auth";

// Quill.import引入
  const Link = Quill.import("formats/link");
  // 自定义a链接
  class FileBlot extends Link {
    // 继承Link Blot