若依项目form表单过大报错Failed to execute ‘setItem’ on ‘Storage’: Setting the value of ‘sessionObj’ exceeded t

quillEditor实现粘贴图片上传服务器

若依项目，富文本上传报错：Failed to execute ‘setItem’ on ‘Storage’: Setting the value of ‘sessionObj’ exceeded the quota.

问题：前端request.js中 防止表单重复提交方法 当提交data大于5M时

解决办法1（不推荐）：

1.最直接的办法====>干掉表单重复提交验证
2.大数据内容防止重复提交在后端处理，不在前端处理
3.前端单独配置请求repeatSubmit属性

解决办法2（推荐）：

form表单大小超过5Mb的应该很少吧，得有多少参数才能超过5Mb，除非有文件（如图片一base64上传），问题就在这，将图片转为url就好了

quillEditor实现粘贴图片上传服务器，存储图片src非base64

解决办法就是，给富文本编辑器加一个粘贴的监听事件。
判断如果粘贴图片了，把文件上传到后台服务器

给富文本编辑器加一个粘贴的监听事件

 <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"
      @paste="onPaste($event)"
    ></div>

然后在methods里面写实现方法

   /**监听富文本编辑器的粘贴事件  针对图片进行操作 */
    onPaste(evt) {
      // 获取解析 粘贴的内容
      //先判断粘贴的内容是否是图片
      console.log(evt);
      if (
        evt.clipboardData &&
        evt.clipboardData.files &&
        evt.clipboardData.files.length
      ) {
        evt.preventDefault();
        [].forEach.call(evt.clipboardData.files, (file) => {
          if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
            return;
          }
          const formData = new FormData();
          formData.append("file", file);
          //带请求头过验证
          const config = {
            headers: {
              Authorization: "Bearer " + getToken(),
            },
          };
          // `${process.env.VUE_APP_BASE_API}/system/oss/upload`,
          axios
            .post(
              `${process.env.VUE_APP_BASE_API}/system/oss/upload`,
              formData,
              config
            )
            .then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                console.log(res.data.data.fileName);
                let length = this.Quill.getSelection().index; //光标位置
                // 插入图片地址
                this.Quill.insertEmbed(length, "image", res.data.data.url);
                // 光标后移一位
                this.Quill.setSelection(length + 1);
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                });
              }
            });
        });
      }
    },