refactor: MP/wx-reply组件，抽离useUpload钩子

src/views/mp/components/wx-reply/main.vue

@@ -8,7 +8,7 @@
   ④ 支持发送【视频】消息时，支持新建视频
 -->
 <template>
-  <el-tabs type="border-card" v-model="objDataRef.type" @tab-click="handleClick">
+  <el-tabs type="border-card" v-model="objData.type" @tab-click="handleClick">
     <!-- 类型 1：文本 -->
     <el-tab-pane name="text">
       <template #label>
@@ -18,7 +18,7 @@
         type="textarea"
         :rows="5"
         placeholder="请输入内容"
-        v-model="objDataRef.content"
+        v-model="objData.content"
         @input="inputContent"
       />
     </el-tab-pane>
@@ -28,9 +28,9 @@
         <el-row align="middle"><Icon icon="ep:picture" class="mr-5px" /> 图片</el-row>
       </template>
       <!-- 情况一：已经选择好素材、或者上传好图片 -->
-      <div class="select-item" v-if="objDataRef.url">
-        <img class="material-img" :src="objDataRef.url" />
-        <p class="item-name" v-if="objDataRef.name">{{ objDataRef.name }}</p>
+      <div class="select-item" v-if="objData.url">
+        <img class="material-img" :src="objData.url" />
+        <p class="item-name" v-if="objData.name">{{ objData.name }}</p>
         <el-row class="ope-row" justify="center">
           <el-button type="danger" circle @click="deleteObj">
             <Icon icon="ep:delete" />
@@ -44,21 +44,21 @@
           <el-button type="success" @click="openMaterial">
             素材库选择 <Icon icon="ep:circle-check" />
           </el-button>
-          <el-dialog title="选择图片" v-model="dialogImageVisible" width="90%" append-to-body>
-            <WxMaterialSelect :obj-data="objDataRef" @select-material="selectMaterial" />
+          <el-dialog title="选择图片" v-model="dialogState.image" width="90%" append-to-body>
+            <WxMaterialSelect :obj-data="objData" @select-material="selectMaterial" />
           </el-dialog>
         </el-col>
         <!-- 文件上传 -->
         <el-col :span="12" class="col-add">
           <el-upload
-            :action="actionUrl"
-            :headers="headers"
+            :action="UPLOAD_URL"
+            :headers="HEADERS"
             multiple
             :limit="1"
             :file-list="fileList"
             :data="uploadData"
             :before-upload="beforeImageUpload"
-            :on-success="handleUploadSuccess"
+            :on-success="onUploadSuccess"
           >
             <el-button type="primary">上传图片</el-button>
             <template #tip>
@@ -75,10 +75,10 @@
       <template #label>
         <el-row align="middle"><Icon icon="ep:phone" /> 语音</el-row>
       </template>
-      <div class="select-item2" v-if="objDataRef.url">
-        <p class="item-name">{{ objDataRef.name }}</p>
+      <div class="select-item2" v-if="objData.url">
+        <p class="item-name">{{ objData.name }}</p>
         <div class="item-infos">
-          <WxVoicePlayer :url="objDataRef.url" />
+          <WxVoicePlayer :url="objData.url" />
         </div>
         <el-row class="ope-row" justify="center">
           <el-button type="danger" circle @click="deleteObj"><Icon icon="ep:delete" /></el-button>
@@ -90,21 +90,21 @@
           <el-button type="success" @click="openMaterial">
             素材库选择<Icon icon="ep:circle-check" />
           </el-button>
-          <el-dialog title="选择语音" v-model="dialogVoiceVisible" width="90%" append-to-body>
+          <el-dialog title="选择语音" v-model="dialogState.voice" width="90%" append-to-body>
             <WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
           </el-dialog>
         </el-col>
         <!-- 文件上传 -->
         <el-col :span="12" class="col-add">
           <el-upload
-            :action="actionUrl"
-            :headers="headers"
+            :action="UPLOAD_URL"
+            :headers="HEADERS"
             multiple
             :limit="1"
             :file-list="fileList"
             :data="uploadData"
             :before-upload="beforeVoiceUpload"
-            :on-success="handleUploadSuccess"
+            :on-success="onUploadSuccess"
           >
             <el-button type="primary">点击上传</el-button>
             <template #tip>
@@ -123,20 +123,20 @@
       </template>
       <el-row>
         <el-input
-          v-model="objDataRef.title"
+          v-model="objData.title"
           class="input-margin-bottom"
           placeholder="请输入标题"
           @input="inputContent"
         />
         <el-input
           class="input-margin-bottom"
-          v-model="objDataRef.description"
+          v-model="objData.description"
           placeholder="请输入描述"
           @input="inputContent"
         />
-        <div style="text-align: center">
-          <WxVideoPlayer v-if="objDataRef.url" :url="objDataRef.url" />
-        </div>
+        <el-row style="text-align: center" justify="center">
+          <WxVideoPlayer v-if="objData.url" :url="objData.url" />
+        </el-row>
         <el-col>
           <el-row style="text-align: center" align="middle">
             <!-- 选择素材 -->
@@ -144,21 +144,21 @@
               <el-button type="success" @click="openMaterial">
                 素材库选择 <Icon icon="ep:circle-check" />
               </el-button>
-              <el-dialog title="选择视频" v-model="dialogVideoVisible" width="90%" append-to-body>
-                <WxMaterialSelect :objData="objDataRef" @select-material="selectMaterial" />
+              <el-dialog title="选择视频" v-model="dialogState.video" width="90%" append-to-body>
+                <WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
               </el-dialog>
             </el-col>
             <!-- 文件上传 -->
             <el-col :span="12">
               <el-upload
-                :action="actionUrl"
-                :headers="headers"
+                :action="UPLOAD_URL"
+                :headers="HEADERS"
                 multiple
                 :limit="1"
                 :file-list="fileList"
                 :data="uploadData"
                 :before-upload="beforeVideoUpload"
-                :on-success="handleUploadSuccess"
+                :on-success="onUploadSuccess"
               >
                 <el-button type="primary">新建视频 <Icon icon="ep:upload" /></el-button>
               </el-upload>
@@ -173,8 +173,8 @@
         <el-row align="middle"><Icon icon="ep:reading" /> 图文</el-row>
       </template>
       <el-row>
-        <div class="select-item" v-if="objDataRef.articles?.length > 0">
-          <WxNews :articles="objDataRef.articles" />
+        <div class="select-item" v-if="objData.articles?.length > 0">
+          <WxNews :articles="objData.articles" />
           <el-col class="ope-row">
             <el-button type="danger" circle @click="deleteObj">
               <Icon icon="ep:delete" />
@@ -182,7 +182,7 @@
           </el-col>
         </div>
         <!-- 选择素材 -->
-        <el-col :span="24" v-if="!objDataRef.content">
+        <el-col :span="24" v-if="!objData.content">
           <el-row style="text-align: center" align="middle">
             <el-col :span="24">
               <el-button type="success" @click="openMaterial">
@@ -192,9 +192,9 @@
             </el-col>
           </el-row>
         </el-col>
-        <el-dialog title="选择图文" v-model="dialogNewsVisible" width="90%" append-to-body>
+        <el-dialog title="选择图文" v-model="dialogState.news" width="90%" append-to-body>
           <WxMaterialSelect
-            :objData="objDataRef"
+            :obj-data="objData"
             @select-material="selectMaterial"
             :newsType="newsType"
           />
@@ -213,22 +213,22 @@
               <el-row align="middle" justify="center">
                 <img
                   style="width: 100px"
-                  v-if="objDataRef.thumbMediaUrl"
-                  :src="objDataRef.thumbMediaUrl"
+                  v-if="objData.thumbMediaUrl"
+                  :src="objData.thumbMediaUrl"
                 />
                 <icon v-else icon="ep:plus" />
               </el-row>
               <el-row align="middle" justify="center" style="margin-top: 2%">
                 <div class="thumb-but">
                   <el-upload
-                    :action="actionUrl"
-                    :headers="headers"
+                    :action="UPLOAD_URL"
+                    :headers="HEADERS"
                     multiple
                     :limit="1"
                     :file-list="fileList"
                     :data="uploadData"
-                    :before-upload="beforeThumbImageUpload"
-                    :on-success="handleUploadSuccess"
+                    :before-upload="beforeImageUpload"
+                    :on-success="onUploadSuccess"
                   >
                     <template #trigger>
                       <el-button type="primary" link>本地上传</el-button>
@@ -241,359 +241,271 @@
               </el-row>
             </el-col>
           </el-row>
-          <el-dialog title="选择图片" v-model="dialogThumbVisible" width="80%" append-to-body>
+          <el-dialog title="选择图片" v-model="dialogState.thumb" width="80%" append-to-body>
             <WxMaterialSelect
-              :objData="{ type: 'image', accountId: objDataRef.accountId }"
+              :objData="{ type: 'image', accountId: objData.accountId }"
               @select-material="selectMaterial"
             />
           </el-dialog>
         </el-col>
         <el-col :span="18">
-          <el-input v-model="objDataRef.title" placeholder="请输入标题" @input="inputContent" />
+          <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />
           <div style="margin: 20px 0"></div>
-          <el-input
-            v-model="objDataRef.description"
-            placeholder="请输入描述"
-            @input="inputContent"
-          />
+          <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />
         </el-col>
       </el-row>
       <div style="margin: 20px 0"></div>
-      <el-input v-model="objDataRef.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />
+      <el-input v-model="objData.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />
       <div style="margin: 20px 0"></div>
       <el-input
-        v-model="objDataRef.hqMusicUrl"
+        v-model="objData.hqMusicUrl"
         placeholder="请输入高质量音乐链接"
         @input="inputContent"
       />
     </el-tab-pane>
   </el-tabs>
 </template>
-<script lang="ts" name="WxReplySelect">
+<script setup lang="ts" name="WxReplySelect">
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
-
 import { getAccessToken } from '@/utils/auth'
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  components: {
-    WxNews,
-    WxMaterialSelect,
-    WxVoicePlayer,
-    WxVideoPlayer
-  },
-  props: {
-    objData: {
-      // 消息对象。
-      type: Object, // 设置为 Object 的原因，方便属性的传递
-      required: true
-    },
-    newsType: {
-      // 图文类型：1、已发布图文；2、草稿箱图文
-      type: String,
-      default: '1'
-    }
+import { MaterialType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
+import type { UploadRawFile } from 'element-plus'
+
+const props = defineProps({
+  objData: {
+    // 消息对象。
+    type: Object, // 设置为 Object 的原因，方便属性的传递
+    required: true
   },
-  setup(props) {
-    const objDataRef = reactive(props.objData)
-    const message = useMessage() // 消息弹窗
-    const tempObj = new Map().set(objDataRef.type, Object.assign({}, objDataRef))
-    // ========== 素材选择的弹窗，是否可见 ==========
-    const dialogNewsVisible = ref(false) // 图文
-    const dialogImageVisible = ref(false) // 图片
-    const dialogVoiceVisible = ref(false) // 语音
-    const dialogVideoVisible = ref(false) // 视频
-    const dialogThumbVisible = ref(false) // 缩略图
-    // ========== 文件上传（图片、语音、视频） ==========
-    const fileList = ref([])
-    const uploadData = reactive({
-      accountId: undefined,
-      type: objDataRef.type,
-      title: '',
-      introduction: ''
-    })
-    const actionUrl = ref(
-      import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
-    )
-    const headers = ref({ Authorization: 'Bearer ' + getAccessToken() }) // 设置上传的请求头部
-    const beforeThumbImageUpload = (file) => {
-      const isType =
-        file.type === 'image/jpeg' ||
-        file.type === 'image/png' ||
-        file.type === 'image/gif' ||
-        file.type === 'image/bmp' ||
-        file.type === 'image/jpg'
-      if (!isType) {
-        message.error('上传图片格式不对!')
-        return false
-      }
-      const isLt = file.size / 1024 / 1024 < 2
-      if (!isLt) {
-        message.error('上传图片大小不能超过 2M!')
-        return false
-      }
-      uploadData.accountId = objDataRef.accountId
-      return true
-    }
-    const beforeVoiceUpload = (file) => {
-      // 校验格式
-      const isType =
-        file.type === 'audio/mp3' ||
-        file.type === 'audio/mpeg' ||
-        file.type === 'audio/wma' ||
-        file.type === 'audio/wav' ||
-        file.type === 'audio/amr'
-      if (!isType) {
-        message.error('上传语音格式不对!' + file.type)
-        return false
-      }
-      // 校验大小
-      const isLt = file.size / 1024 / 1024 < 2
-      if (!isLt) {
-        message.error('上传语音大小不能超过 2M!')
-        return false
-      }
-      uploadData.accountId = objDataRef.accountId
-      return true
-    }
-    const beforeImageUpload = (file) => {
-      // 校验格式
-      const isType =
-        file.type === 'image/jpeg' ||
-        file.type === 'image/png' ||
-        file.type === 'image/gif' ||
-        file.type === 'image/bmp' ||
-        file.type === 'image/jpg'
-      if (!isType) {
-        message.error('上传图片格式不对!')
-        return false
-      }
-      // 校验大小
-      const isLt = file.size / 1024 / 1024 < 2
-      if (!isLt) {
-        message.error('上传图片大小不能超过 2M!')
-        return false
-      }
-      uploadData.accountId = objDataRef.accountId
-      return true
-    }
-    const beforeVideoUpload = (file) => {
-      // 校验格式
-      const isType = file.type === 'video/mp4'
-      if (!isType) {
-        message.error('上传视频格式不对!')
-        return false
-      }
-      // 校验大小
-      const isLt = file.size / 1024 / 1024 < 10
-      if (!isLt) {
-        message.error('上传视频大小不能超过 10M!')
-        return false
-      }
-      uploadData.accountId = objDataRef.accountId
-      return true
-    }
-    const handleUploadSuccess = (response) => {
-      if (response.code !== 0) {
-        message.error('上传出错：' + response.msg)
-        return false
-      }
-
-      // 清空上传时的各种数据
-      fileList.value = []
-      uploadData.title = ''
-      uploadData.introduction = ''
-
-      // 上传好的文件，本质是个素材，所以可以进行选中
-      let item = response.data
-      selectMaterial(item)
-    }
-    /**
-     * 切换消息类型的 tab
-     *
-     * @param tab tab  没用 暂时删了tab
-     */
-    const handleClick = () => {
-      // 设置后续文件上传的文件类型
-      uploadData.type = objDataRef.type
-      if (uploadData.type === 'music') {
-        // 【音乐】上传的是缩略图
-        uploadData.type = 'thumb'
-      }
-
-      // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objDataRef
-      let tempObjItem = tempObj.get(objDataRef.type)
-      if (tempObjItem) {
-        objDataRef.content = tempObjItem.content ? tempObjItem.content : null
-        objDataRef.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
-        objDataRef.url = tempObjItem.url ? tempObjItem.url : null
-        objDataRef.name = tempObjItem.url ? tempObjItem.name : null
-        objDataRef.title = tempObjItem.title ? tempObjItem.title : null
-        objDataRef.description = tempObjItem.description ? tempObjItem.description : null
-        return
-      }
-      // 如果获取不到，需要把 objDataRef 复原
-      // 必须使用 $set 赋值，不然 input 无法输入内容
-      objDataRef.content = ''
-      objDataRef.mediaId = ''
-      objDataRef.url = ''
-      objDataRef.title = ''
-      objDataRef.description = ''
-    }
-    /**
-     * 选择素材，将设置设置到 objDataRef 变量
-     *
-     * @param item 素材
-     */
-    const selectMaterial = (item) => {
-      // 选择好素材，所以隐藏弹窗
-      closeMaterial()
-
-      // 创建 tempObjItem 对象，并设置对应的值
-      let tempObjItem = {
-        type: '',
-        articles: [],
-        thumbMediaId: '',
-        thumbMediaUrl: '',
-        introduction: '',
-        title: '',
-        musicUrl: '',
-        hqMusicUrl: '',
-        mediaId: '',
-        url: '',
-        name: '',
-        description: ''
-      }
-      tempObjItem.type = objDataRef.type
-      if (objDataRef.type === 'news') {
-        tempObjItem.articles = item.content.newsItem
-        objDataRef.articles = item.content.newsItem
-      } else if (objDataRef.type === 'music') {
-        // 音乐需要特殊处理，因为选择的是图片的缩略图
-        tempObjItem.thumbMediaId = item.mediaId
-        objDataRef.thumbMediaId = item.mediaId
-        tempObjItem.thumbMediaUrl = item.url
-        objDataRef.thumbMediaUrl = item.url
-        // title、introduction、musicUrl、hqMusicUrl：从 objDataRef 到 tempObjItem，避免上传素材后，被覆盖掉
-        tempObjItem.title = objDataRef.title || ''
-        tempObjItem.introduction = objDataRef.introduction || ''
-        tempObjItem.musicUrl = objDataRef.musicUrl || ''
-        tempObjItem.hqMusicUrl = objDataRef.hqMusicUrl || ''
-      } else if (objDataRef.type === 'image' || objDataRef.type === 'voice') {
-        tempObjItem.mediaId = item.mediaId
-        objDataRef.mediaId = item.mediaId
-        tempObjItem.url = item.url
-        objDataRef.url = item.url
-        tempObjItem.name = item.name
-        objDataRef.name = item.name
-      } else if (objDataRef.type === 'video') {
-        tempObjItem.mediaId = item.mediaId
-        objDataRef.mediaId = item.mediaId
-        tempObjItem.url = item.url
-        objDataRef.url = item.url
-        tempObjItem.name = item.name
-        objDataRef.name = item.name
-        // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
-        if (item.title) {
-          objDataRef.title = item.title || ''
-          tempObjItem.title = item.title || ''
-        }
-        if (item.introduction) {
-          objDataRef.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
-          tempObjItem.description = item.introduction || ''
-        }
-      } else if (objDataRef.type === 'text') {
-        objDataRef.content = item.content || ''
-      }
-      // 最终设置到临时缓存
-      tempObj.set(objDataRef.type, tempObjItem)
-    }
-    const openMaterial = () => {
-      if (objDataRef.type === 'news') {
-        dialogNewsVisible.value = true
-      } else if (objDataRef.type === 'image') {
-        dialogImageVisible.value = true
-      } else if (objDataRef.type === 'voice') {
-        dialogVoiceVisible.value = true
-      } else if (objDataRef.type === 'video') {
-        dialogVideoVisible.value = true
-      } else if (objDataRef.type === 'music') {
-        dialogThumbVisible.value = true
-      }
-    }
-    const closeMaterial = () => {
-      dialogNewsVisible.value = false
-      dialogImageVisible.value = false
-      dialogVoiceVisible.value = false
-      dialogVideoVisible.value = false
-      dialogThumbVisible.value = false
-    }
-    const deleteObj = () => {
-      if (objDataRef.type === 'news') {
-        objDataRef.articles = []
-      } else if (objDataRef.type === 'image') {
-        objDataRef.mediaId = null
-        objDataRef.url = null
-        objDataRef.name = null
-      } else if (objDataRef.type === 'voice') {
-        objDataRef.mediaId = null
-        objDataRef.url = null
-        objDataRef.name = null
-      } else if (objDataRef.type === 'video') {
-        objDataRef.mediaId = null
-        objDataRef.url = null
-        objDataRef.name = null
-        objDataRef.title = null
-        objDataRef.description = null
-      } else if (objDataRef.type === 'music') {
-        objDataRef.thumbMediaId = null
-        objDataRef.thumbMediaUrl = null
-        objDataRef.title = null
-        objDataRef.description = null
-        objDataRef.musicUrl = null
-        objDataRef.hqMusicUrl = null
-      } else if (objDataRef.type === 'text') {
-        objDataRef.content = null
-      }
-      // 覆盖缓存
-      tempObj.set(objDataRef.type, Object.assign({}, objDataRef))
-    }
-    /**
-     * 输入时，缓存每次 objDataRef 到 tempObj 中
-     *
-     * why？不确定为什么 v-model="objDataRef.content" 不能自动缓存，所以通过这样的方式
-     */
-    const inputContent = () => {
-      // 覆盖缓存
-      tempObj.set(objDataRef.type, Object.assign({}, objDataRef))
+  newsType: {
+    // 图文类型：1、已发布图文；2、草稿箱图文
+    type: String,
+    default: '1'
+  }
+})
+
+const objData = reactive(props.objData)
+const message = useMessage() // 消息弹窗
+const tempObj = new Map().set(objData.type, Object.assign({}, objData))
+
+// ========== 素材选择的弹窗，是否可见 ==========
+type DialogName = 'news' | 'image' | 'voice' | 'video' | 'thumb'
+type DialogState = {
+  [prop in DialogName]: boolean
+}
+const dialogState: DialogState = reactive({
+  news: false,
+  image: false,
+  voice: false,
+  video: false,
+  thumb: false
+})
+
+// ========== 文件上传（图片、语音、视频） ==========
+const fileList = ref([])
+const uploadData = reactive({
+  accountId: objData.accountId,
+  type: objData.type,
+  title: '',
+  introduction: ''
+})
+
+const UPLOAD_URL = import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
+const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
+
+const beforeImageUpload = (rawFile: UploadRawFile) =>
+  useBeforeUpload(MaterialType.Image, 2)(rawFile)
+const beforeVoiceUpload = (rawFile: UploadRawFile) =>
+  useBeforeUpload(MaterialType.Voice, 10)(rawFile)
+const beforeVideoUpload = (rawFile: UploadRawFile) =>
+  useBeforeUpload(MaterialType.Video, 10)(rawFile)
+
+const onUploadSuccess = (res: any) => {
+  if (res.code !== 0) {
+    message.error('上传出错：' + res.msg)
+    return false
+  }
+
+  // 清空上传时的各种数据
+  fileList.value = []
+  uploadData.title = ''
+  uploadData.introduction = ''
+
+  // 上传好的文件，本质是个素材，所以可以进行选中
+  selectMaterial(res.data)
+}
+
+/**
+ * 切换消息类型的 tab
+ *
+ * @param tab tab  没用 暂时删了tab
+ */
+const handleClick = () => {
+  // 设置后续文件上传的文件类型
+  uploadData.type = objData.type
+  if (uploadData.type === 'music') {
+    // 【音乐】上传的是缩略图
+    uploadData.type = 'thumb'
+  }
+
+  // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData
+  let tempObjItem = tempObj.get(objData.type)
+  if (tempObjItem) {
+    objData.content = tempObjItem.content ? tempObjItem.content : null
+    objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
+    objData.url = tempObjItem.url ? tempObjItem.url : null
+    objData.name = tempObjItem.url ? tempObjItem.name : null
+    objData.title = tempObjItem.title ? tempObjItem.title : null
+    objData.description = tempObjItem.description ? tempObjItem.description : null
+    return
+  }
+  // 如果获取不到，需要把 objData 复原
+  // 必须使用 $set 赋值，不然 input 无法输入内容
+  objData.content = ''
+  objData.mediaId = ''
+  objData.url = ''
+  objData.title = ''
+  objData.description = ''
+}
+
+/**
+ * 选择素材，将设置设置到 objData 变量
+ *
+ * @param item 素材
+ */
+const selectMaterial = (item) => {
+  // 选择好素材，所以隐藏弹窗
+  closeMaterial()
+
+  // 创建 tempObjItem 对象，并设置对应的值
+  let tempObjItem = {
+    type: '',
+    articles: [],
+    thumbMediaId: '',
+    thumbMediaUrl: '',
+    introduction: '',
+    title: '',
+    musicUrl: '',
+    hqMusicUrl: '',
+    mediaId: '',
+    url: '',
+    name: '',
+    description: ''
+  }
+  tempObjItem.type = objData.type
+  if (objData.type === 'news') {
+    tempObjItem.articles = item.content.newsItem
+    objData.articles = item.content.newsItem
+  } else if (objData.type === 'music') {
+    // 音乐需要特殊处理，因为选择的是图片的缩略图
+    tempObjItem.thumbMediaId = item.mediaId
+    objData.thumbMediaId = item.mediaId
+    tempObjItem.thumbMediaUrl = item.url
+    objData.thumbMediaUrl = item.url
+    // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉
+    tempObjItem.title = objData.title || ''
+    tempObjItem.introduction = objData.introduction || ''
+    tempObjItem.musicUrl = objData.musicUrl || ''
+    tempObjItem.hqMusicUrl = objData.hqMusicUrl || ''
+  } else if (objData.type === 'image' || objData.type === 'voice') {
+    tempObjItem.mediaId = item.mediaId
+    objData.mediaId = item.mediaId
+    tempObjItem.url = item.url
+    objData.url = item.url
+    tempObjItem.name = item.name
+    objData.name = item.name
+  } else if (objData.type === 'video') {
+    tempObjItem.mediaId = item.mediaId
+    objData.mediaId = item.mediaId
+    tempObjItem.url = item.url
+    objData.url = item.url
+    tempObjItem.name = item.name
+    objData.name = item.name
+    // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
+    if (item.title) {
+      objData.title = item.title || ''
+      tempObjItem.title = item.title || ''
     }
-    return {
-      inputContent,
-      dialogNewsVisible,
-      deleteObj,
-      openMaterial,
-      handleClick,
-      beforeImageUpload,
-      beforeVoiceUpload,
-      handleUploadSuccess,
-      beforeVideoUpload,
-      selectMaterial,
-      dialogImageVisible,
-      dialogVoiceVisible,
-      dialogThumbVisible,
-      actionUrl,
-      objDataRef,
-      headers,
-      fileList,
-      beforeThumbImageUpload,
-      uploadData,
-      dialogVideoVisible
+    if (item.introduction) {
+      objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
+      tempObjItem.description = item.introduction || ''
     }
+  } else if (objData.type === 'text') {
+    objData.content = item.content || ''
   }
-})
+  // 最终设置到临时缓存
+  tempObj.set(objData.type, tempObjItem)
+}
+
+const openMaterial = () => {
+  // if (objData.type === 'news') {
+  //   dialogNewsVisible.value = true
+  // } else if (objData.type === 'image') {
+  //   dialogImageVisible.value = true
+  // } else if (objData.type === 'voice') {
+  //   dialogVoiceVisible.value = true
+  // } else if (objData.type === 'video') {
+  //   dialogVideoVisible.value = true
+  // } else if (objData.type === 'music') {
+  //   dialogThumbVisible.value = true
+  // }
+  dialogState[objData.type] = true
+}
+
+const closeMaterial = () => {
+  // dialogNewsVisible.value = false
+  // dialogImageVisible.value = false
+  // dialogVoiceVisible.value = false
+  // dialogVideoVisible.value = false
+  // dialogThumbVisible.value = false
+  for (const key of ['news', 'image', 'voice', 'video', 'thumb']) {
+    dialogState[key] = false
+  }
+}
+
+const deleteObj = () => {
+  if (objData.type === 'news') {
+    objData.articles = []
+  } else if (objData.type === 'image') {
+    objData.mediaId = null
+    objData.url = null
+    objData.name = null
+  } else if (objData.type === 'voice') {
+    objData.mediaId = null
+    objData.url = null
+    objData.name = null
+  } else if (objData.type === 'video') {
+    objData.mediaId = null
+    objData.url = null
+    objData.name = null
+    objData.title = null
+    objData.description = null
+  } else if (objData.type === 'music') {
+    objData.thumbMediaId = null
+    objData.thumbMediaUrl = null
+    objData.title = null
+    objData.description = null
+    objData.musicUrl = null
+    objData.hqMusicUrl = null
+  } else if (objData.type === 'text') {
+    objData.content = null
+  }
+  // 覆盖缓存
+  tempObj.set(objData.type, Object.assign({}, objData))
+}
+
+/**
+ * 输入时，缓存每次 objData 到 tempObj 中
+ *
+ * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式
+ */
+const inputContent = () => {
+  // 覆盖缓存
+  tempObj.set(objData.type, Object.assign({}, objData))
+}
 </script>
 
 <style lang="scss" scoped>

src/views/mp/hooks/useUpload.ts

@@ -0,0 +1,50 @@
+import type { UploadRawFile } from 'element-plus'
+
+const message = useMessage() // 消息
+
+enum MaterialType {
+  Image = 'image',
+  Voice = 'voice',
+  Video = 'video'
+}
+
+const useBeforeUpload = (type: MaterialType, maxSizeMB: number) => {
+  const fn = (rawFile: UploadRawFile): boolean => {
+    let allowTypes: string[] = []
+    let name = ''
+
+    switch (type) {
+      case MaterialType.Image:
+        allowTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg']
+        maxSizeMB = 2
+        name = '图片'
+        break
+      case MaterialType.Voice:
+        allowTypes = ['audio/mp3', 'audio/mpeg', 'audio/wma', 'audio/wav', 'audio/amr']
+        maxSizeMB = 2
+        name = '语音'
+        break
+      case MaterialType.Video:
+        allowTypes = ['video/mp4']
+        maxSizeMB = 10
+        name = '视频'
+        break
+    }
+    // 格式不正确
+    if (!allowTypes.includes(rawFile.type)) {
+      message.error(`上传${name}格式不对!`)
+      return false
+    }
+    // 大小不正确
+    if (rawFile.size / 1024 / 1024 > maxSizeMB) {
+      message.error(`上传${name}大小不能超过${maxSizeMB}M!`)
+      return false
+    }
+
+    return true
+  }
+
+  return fn
+}
+
+export { MaterialType, useBeforeUpload }