音频新增

src/components/vEditor/VEditor.vue

@@ -48,6 +48,7 @@ export default {
     folder: { type: String, default: "" },
     enableAnswerPoint: { type: Boolean, default: false },
     enableFormula: { type: Boolean, default: true },
+    enableAudio: { type: Boolean, default: true },
     maxAudioSize: { type: Number, default: MAX_AUDIO_SIZE, required: false },
     maxImageSize: { type: Number, default: MAX_IMAGE_SIZE, required: false },
     imageExceedSizeAsAttachment: {

src/components/vEditor/components/VMenu.vue

@@ -63,7 +63,7 @@
         @change="addImage"
       />
     </div>
-    <!-- <div class="edit-menu-item">
+    <div v-if="$parent.enableAudio" class="edit-menu-item">
       <img
         class="intLink"
         title="插入音频"
@@ -77,7 +77,7 @@
         title="插入音频"
         @change="addAudio"
       />
-    </div> -->
+    </div>
     <div v-if="$parent.enableFormula" class="edit-menu-item">
       <img
         class="intLink"
@@ -104,7 +104,7 @@
 
 <script>
 import { setDocMode } from "./changeMode";
-// import { audioHandle } from "./audio";
+import { audioHandle } from "./audio";
 import { imageHandle } from "./image";
 import { answerPointHandle } from "./answerPoint";
 import FormulaDialog from "./FormulaDialog";
@@ -134,10 +134,10 @@ export default {
      * @param {Event} event
      */
     // 暂时不考虑音频上传
-    // async addAudio(event) {
-    //   // console.log(event, event.target.files[0]);
-    //   audioHandle.bind(this.$parent)(event);
-    // },
+    async addAudio(event) {
+      // console.log(event, event.target.files[0]);
+      audioHandle.bind(this.$parent)(event);
+    },
     /**
      * @param {Event} event
      */

src/components/vEditor/components/audio.js

@@ -1,5 +1,17 @@
 // import { saveBlobToDisk } from "@/utils/fileUtils";
+import { $httpWithMsg } from "@/plugins/axios";
 import { audioToImageNode } from "../utils";
+import { QUESTION_API } from "@/constants/constants";
+
+function saveAudioApi(data) {
+  console.log(data);
+  let formData = new FormData();
+  Object.keys(data).forEach((k) => {
+    formData.append(k, data[k]);
+  });
+  const url = `${QUESTION_API}/question/audio/upload`;
+  return $httpWithMsg.post(url, formData);
+}
 
 /**
  * 对粘贴事件进行处理：
@@ -16,18 +28,17 @@ export async function audioHandle(event) {
   event.target.value = "";
   if (file.size > this.maxAudioSize) {
     this.$message(
-      `音频大小超过限制！最大不超过 ${
-        this.$parent.maxAudioSize / 1024 / 1024
-      } MB.`
+      `音频大小超过限制！最大不超过 ${this.maxAudioSize / 1024 / 1024} MB.`
     );
     return;
   }
 
-  // console.log(this.$parent.folder, this.$parent.$refs.editor);
-  // TODO:上传音频文件
-  // const relativeFilePath = await saveBlobToDisk(this.folder, file, "mp3");
-  const relativeFilePath = "";
-  const imageNode = await audioToImageNode(relativeFilePath);
+  // 上传音频文件
+  const res = await saveAudioApi({ file });
+  console.log(res.data);
+
+  const imageNode = await audioToImageNode(res.data);
+  console.log(imageNode);
   // console.log({ relativeFilePath, imageNode });
   // console.log(imageNode.outerHTML);
   document.execCommand("insertHTML", false, imageNode.outerHTML);

src/components/vEditor/constants.js

@@ -1,5 +1,8 @@
 export const IMAGE_EXCEED_SIZE_AS_ATTACHMENT = 10 * 1024;
 export const JSON_EXCEED_SIZE_AS_ATTACHMENT = 200 * 1024;
-export const MAX_AUDIO_SIZE = 5 * 1024 * 1024;
+export const MAX_AUDIO_SIZE = 10 * 1024 * 1024;
 export const MAX_IMAGE_SIZE = 200 * 1024;
 export const MAX_JSON_SIZE = 2 * 1024 * 1024;
+
+export const AUDIO_IMG_URL =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACrElEQVRYR72XTYiOURTHf7OzUmOBjGKBxRALCxRTKFMyNmKhyAILSYQoG7NBjIWPfC4U+c6GhbJiI6KUmEKyUMoCG9b0f7tHx517n+c+r/edu7zP+fidc8859z49dGadBXYGU2uB+6Vme0oFM3JTgOvASsBs/QbeAneB08CPKh//AzAA3ASmBQcewHy+A04B53MQ7QJsBS5HRlMAJvIQWJ2CaAfgOLA/YawKwMTH+GsCMDOkU0VWFcxEYA9wOCE0JhOlAKuAM8CcioKKbfUHiPWRzjVgczYlCQdqLzmvW7lg7gAxhI5wRAZjpe3AUmAZoJTnltIbp9hsHQNuA6+ccgpiLjDqAV4CC+vCDI6HAfW7X3ERag5sCAKaF8+BGU5BAQybUoowxdJSCh/qACTmIfYBJ5xRDat5AtgEXG0QuYmWAEj2CHAImBCyMN/5GhRAHL2iFPloDVQO4A2g87X1C1gMaP8gcNR9GxHAZ2C621wOPC7ISA5A7aegPIQqXpW/MdwdZv6pAHKG6hiq9NRNF52BR8AgsAh45vY/dgtgFvDBOfoKTAUmAd/c/s9uAWiGfHKOvgB9QC/wfTwAtgBXnKMHgO4QzRnNG1utIxCpn3qtCVVXABW1kypC3aAHwkhWgf5ThJoBmgW21IZPCjqhnTYUhEb1X1/KQFyxueD9FJRMJwbRgI3ipvdAKUDRKLaIm94HdRlodBkZhGphCFgSTcf4WKqu45PALeCFUyq6jnNnvys8xeoaoyMPkpyTNeFVVPVIiQHU89Z63m7jJ5kpzwYuACsylAagaadWU3fF6zWwwG+WPkq9ziVgW8J415/l3udee1S6zSoA/R3tTmWunQyYHV2vmqKTw8a4/poZhG44/R/qFe0B3gM3uv1z6jN6DtgRNtYB9+p61r7/AUdtnNZgQrCLAAAAAElFTkSuQmCC";

src/components/vEditor/renderJSON.js

@@ -1,5 +1,6 @@
 import { getAnswerPointImg } from "./utils";
 import { unix } from "moment";
+import { AUDIO_IMG_URL } from "./constants";
 
 let _isPreview = true;
 // let _container;
@@ -119,8 +120,7 @@ function renderBlock(block, inline) {
     } else {
       node = document.createElement("img");
       node.className = "audio";
-      node.src =
-        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACrElEQVRYR72XTYiOURTHf7OzUmOBjGKBxRALCxRTKFMyNmKhyAILSYQoG7NBjIWPfC4U+c6GhbJiI6KUmEKyUMoCG9b0f7tHx517n+c+r/edu7zP+fidc8859z49dGadBXYGU2uB+6Vme0oFM3JTgOvASsBs/QbeAneB08CPKh//AzAA3ASmBQcewHy+A04B53MQ7QJsBS5HRlMAJvIQWJ2CaAfgOLA/YawKwMTH+GsCMDOkU0VWFcxEYA9wOCE0JhOlAKuAM8CcioKKbfUHiPWRzjVgczYlCQdqLzmvW7lg7gAxhI5wRAZjpe3AUmAZoJTnltIbp9hsHQNuA6+ccgpiLjDqAV4CC+vCDI6HAfW7X3ERag5sCAKaF8+BGU5BAQybUoowxdJSCh/qACTmIfYBJ5xRDat5AtgEXG0QuYmWAEj2CHAImBCyMN/5GhRAHL2iFPloDVQO4A2g87X1C1gMaP8gcNR9GxHAZ2C621wOPC7ISA5A7aegPIQqXpW/MdwdZv6pAHKG6hiq9NRNF52BR8AgsAh45vY/dgtgFvDBOfoKTAUmAd/c/s9uAWiGfHKOvgB9QC/wfTwAtgBXnKMHgO4QzRnNG1utIxCpn3qtCVVXABW1kypC3aAHwkhWgf5ThJoBmgW21IZPCjqhnTYUhEb1X1/KQFyxueD9FJRMJwbRgI3ipvdAKUDRKLaIm94HdRlodBkZhGphCFgSTcf4WKqu45PALeCFUyq6jnNnvys8xeoaoyMPkpyTNeFVVPVIiQHU89Z63m7jJ5kpzwYuACsylAagaadWU3fF6zWwwG+WPkq9ziVgW8J415/l3udee1S6zSoA/R3tTmWunQyYHV2vmqKTw8a4/poZhG44/R/qFe0B3gM3uv1z6jN6DtgRNtYB9+p61r7/AUdtnNZgQrCLAAAAAElFTkSuQmCC";
+      node.src = AUDIO_IMG_URL;
       node.dataset.audioSrc = block.value;
       node.dataset.isAudio = true;
       if (block.param && block.param.duration) {

src/components/vEditor/utils.js

@@ -1,3 +1,5 @@
+import { AUDIO_IMG_URL } from "./constants";
+
 /**
  *
  * @param {HTMLDivElement} editor 要操作的编辑器dom，还未想好怎么用
@@ -51,7 +53,7 @@ export async function audioToImageNode(audioSrc) {
   const duration = 1;
 
   const el = document.createElement("img");
-  el.src = "/img/editor/text_audio.png";
+  el.src = AUDIO_IMG_URL;
   el.dataset.isAudio = true;
   el.dataset.audioSrc = audioSrc;
   el.dataset.duration = duration;