上传富文本插入文件时报错:JSON parse error: Unexpected character解决办法

方式一(加密解密):

1.前端

(1)安装 crypto-js

npm install crypto-js

(2)util下创建asc.js

asc.js

import CryptoJS from 'crypto-js'

// 需要和后端一致
const KEY = CryptoJS.enc.Utf8.parse('genePiCloudSecre');
const IV = CryptoJS.enc.Utf8.parse('genePiCloudSecre');

export default {

  /**
   * 加密
   * @param {*} word
   * @param {*} keyStr
   * @param {*} ivStr
   */
  encrypt (word, keyStr, ivStr) {
    let key = KEY;
    let iv = IV;
    if (keyStr) {
      key = CryptoJS.enc.Utf8.parse(keyStr);
      iv = CryptoJS.enc.Utf8.parse(ivStr);
    }
    let srcs = CryptoJS.enc.Utf8.parse(word);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.ZeroPadding
    });
    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
  },

  /**
   * 解密
   * @param {*} word
   * @param {*} keyStr
   * @param {*} ivStr
   */
  decrypt (word, keyStr, ivStr) {
    let key = KEY;
    let iv = IV;

    if (keyStr) {
      key = CryptoJS.enc.Utf8.parse(keyStr);
      iv = CryptoJS.enc.Utf8.parse(ivStr);
    }

    let base64 = CryptoJS.enc.Base64.parse(word);
    let src = CryptoJS.enc.Base64.stringify(base64);

    let decrypt = CryptoJS.AES.decrypt(src, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.ZeroPadding
    });

    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
  }
}

在这里插入图片描述

(3)页面引用

import asc from '@/utils/asc';

/** 提交按钮 */
submitForm() {
  this.$refs["form"].validate(valid => {
    if (valid) {
       this.form.content = asc.encrypt(this.form.content,null,null);//加密
    }
  });
},

2.后端

(1)SecurityUtils

/**
 * 安全服务工具类
 *
 * @author ruoyi
 */
public class SecurityUtils {

    /***
     * key和iv值需要和前端一致
     */
    public static final String KEY = "genePiCloudSecre";

    public static final String IV = "genePiCloudSecre";

    /**
     * 加密方法
     *
     * @param data 要加密的数据
     * @param key  加密key
     * @param iv   加密iv
     * @return 加密的结果
     */
    public static String encrypt(String data, String key, String iv) {
        if (StringUtils.isBlank(key)){
            key=KEY;
            iv=IV;
        }
        try {
            //"算法/模式/补码方式"NoPadding PkcsPadding
            Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");
            int blockSize = cipher.getBlockSize();

            byte[] dataBytes = data.getBytes();
            int plaintextLength = dataBytes.length;
            if (plaintextLength % blockSize != 0) {
                plaintextLength = plaintextLength + (blockSize - (plaintextLength % blockSize));
            }

            byte[] plaintext = new byte[plaintextLength];
            System.arraycopy(dataBytes, 0, plaintext, 0, dataBytes.length);

            SecretKeySpec keyspec = new SecretKeySpec(key.getBytes(), "AES");
            IvParameterSpec ivspec = new IvParameterSpec(iv.getBytes());

            cipher.init(Cipher.ENCRYPT_MODE, keyspec, ivspec);
            byte[] encrypted = cipher.doFinal(plaintext);

            return new Base64().encodeToString(encrypted);

        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    /**
     * 解密方法
     *
     * @param data 要解密的数据
     * @param key  解密key
     * @param iv   解密iv
     * @return 解密的结果
     */
    public static String desEncrypt(String data, String key, String iv) {
        if (StringUtils.isBlank(key)){
            key=KEY;
            iv=IV;
        }
        try {
            byte[] encrypted1 = new Base64().decode(data);

            Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");
            SecretKeySpec keySpec = new SecretKeySpec(key.getBytes(), "AES");
            IvParameterSpec ivSpec = new IvParameterSpec(iv.getBytes());
            cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec);
            byte[] original = cipher.doFinal(encrypted1);
            return new String(original).trim();
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
}

(2)使用

/**
* 新增学生信息测试
*/
@PostMapping
public AjaxResult add(@RequestBody TStudentTest tStudentTest) {
   tStudentTest.setContent(SecurityUtils.desEncrypt(tStudentTest.getContent(), null, null));
   return toAjax(tStudentTestService.save(tStudentTest));
}

/**
* 修改学生信息测试
*/
@PutMapping
public AjaxResult edit(@RequestBody TStudentTest tStudentTest) {
   tStudentTest.setContent(SecurityUtils.desEncrypt(tStudentTest.getContent(), null, null));
   return toAjax(tStudentTestService.updateById(tStudentTest));
}
### 如何在 Apifox 中传递富文本参数 #### 设置方法 在 Apifox 中,为了能够成功传递富文本参数,通常会采用 `multipart/form-data` 或者 `application/json` 的方式来发送请求。对于富文本数据而言,多数情况下会选择 `multipart/form-data` 方式,因为这种方式可以更好地支持文件上传以及复杂的表单字段。 当选择 `multipart/form-data` 类型,在创建 API 请求的过程中,可以在 Body 部分找到 Form Data 选项卡[^1]。在此处添加键值对形式的数据项,其中 Key 是服务器端期望接收的名称,而 Value 则是可以包含 HTML、Markdown 等格式在内的字符串内容作为富文本输入。 如果需要通过 JSON 形式的 body 来传输富文本,则应确保 Content-Type 被设为 `application/json` 并将实际的内容编码成合法的 JSON 字符串结构: ```json { "richTextContent": "<h1>这是一个标题</h1><p>这里是段落。</p>" } ``` 以上两种方法都可以有效地向服务端提交带有格式化的文本信息。 #### 示例 假设有一个接口 `/api/postRichText`, 接受 multipart form data 格式的 rich text 参数: - **URL**: http://example.com/api/postRichText - **Method**: POST - **Headers**: - Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW (此 header 自动由工具生成) 使用 Apifox 创建上述请求的具体操作如下所示: 1. 进入 Apifox 新建一个 POST 方法类型的 HTTP Request; 2. 将 URL 设定为目标地址; 3. 在 Headers 下拉菜单中保持默认或手动指定合适的 content-type 头部; 4. 切换到 Body -> form-data, 添加名为 `richTextContent` 的条目并填入相应的 HTML/MarkDown 文本; 这样就完成了一个简单的富文本参数传递过程配置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值