新增视频附件上传

src/views/qw/friendWelcome/myWelcome.vue

@@ -196,6 +196,7 @@
                   <div slot="header" style="display: flex;justify-content: space-between;align-items: center; ">
                     <div style="flex: 1;">
                     <span v-if="item.msgtype === 'image'">【图片】: {{ item.image.pic_url }}</span>
+                     <span v-if="item.msgtype === 'video'">【视频】: {{ item.video.url }}</span>
                     <span v-if="item.msgtype === 'link'">【链接】: {{ item.link.title }}-{{item.link.desc}}</span>
                     <span v-if="item.msgtype === 'miniprogram'">【小程序】: {{ item.miniprogram.title }}</span>
                     </div>
@@ -225,6 +226,9 @@
                 <el-dropdown-item command="image">
                   <i class="el-icon-picture" style="margin-right: 10px;"></i>图片
                 </el-dropdown-item>
+                <el-dropdown-item command="video">
+                  <i class="el-icon-video-camera" style="margin-right: 10px;"></i>视频
+                </el-dropdown-item>
                 <el-dropdown-item command="link">
                   <i class="el-icon-link" style="margin-right: 10px;"></i>链接
                 </el-dropdown-item>
@@ -349,6 +353,9 @@
                               <el-dropdown-item command="image">
                                 <i class="el-icon-picture" style="margin-right: 10px;"></i>图片
                               </el-dropdown-item>
+                              <el-dropdown-item command="video">
+                                <i class="el-icon-video-camera" style="margin-right: 10px;"></i>视频
+                              </el-dropdown-item>
                               <el-dropdown-item command="link">
                                 <i class="el-icon-link" style="margin-right: 10px;"></i>链接
                               </el-dropdown-item>
@@ -397,6 +404,25 @@
           <el-form-item label="图片：" prop="imagePicUrl">
             <ImageUpload v-model="fileFrom.imagePicUrl"  type="image" :num="10" :width="150" :height="150"  disabled/>
           </el-form-item>
+        </div>
+          <div v-if="welcomeItem.type==='video'">
+          <el-form-item label="视频：" prop="videoUrl">
+
+            <el-upload
+              v-model="fileFrom.videoUrl"
+              class="avatar-uploader"
+              :action="uploadUrl"
+              :show-file-list="false"
+              :on-success="(res, file) => handleAvatarSuccessVideo(res, file, fileFrom)"
+              :before-upload="beforeAvatarUploadVideo">
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            {{fileFrom.videoUrl}}
+            <video v-if="fileFrom.videoUrl"
+                   :src="fileFrom.videoUrl"
+                   controls style="width: 200px;height: 100px">
+            </video>
+          </el-form-item>
         </div>
         <div v-if="welcomeItem.type==='link'">
 
@@ -524,6 +550,8 @@ export default {
   components: { ImageUpload, qwUserList,ImageUploadWeclome},
   data() {
     return {
+      
+      uploadUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS2",
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -798,6 +826,8 @@ export default {
       switch (command) {
         case 'image':
           return '添加图片';
+        case 'video':
+          return '添加视频';
         case 'link':
           return '添加链接';
         case 'miniprogram':
@@ -899,6 +929,8 @@ export default {
       };
       if (item.msgtype === 'image') {
         this.fileFrom.imagePicUrl = item.image.pic_url;
+      } else if (item.msgtype === 'video') {
+        this.fileFrom.videoUrl = item.video.url;
       } else if (item.msgtype === 'link') {
         this.fileFrom.linkTitle = item.link.title;
         this.fileFrom.linkPicUrl = item.link.picurl;
@@ -977,6 +1009,13 @@ export default {
             pic_url: this.fileFrom.imagePicUrl
           }
         };
+      } else if (type === 'video') {
+        attachment = {
+          msgtype: 'video',
+          video: {
+            url:this.fileFrom.videoUrl,
+          }
+        };
       } else if (type === 'link') {
         attachment = {
           msgtype: 'link',
@@ -1275,7 +1314,32 @@ export default {
           this.download(response.msg);
           this.exportLoading = false;
         }).catch(() => {});
-    }
+    },
+     handleAvatarSuccessVideo(res, file, content) {
+      if (res.code == 200) {
+        // 使用 $set 确保响应式更新
+        this.$set(content, 'videoUrl', res.url);
+      } else {
+        this.msgError(res.msg);
+      }
+
+    },
+    beforeAvatarUploadVideo(file) {
+      const isLt30M = file.size / 1024 / 1024 < 10;
+      const isMP4 = file.type === 'video/mp4';
+
+      if (!isMP4) {
+        this.$message.error('仅支持上传 MP4 格式的视频文件!');
+        return false;
+      }
+
+      if (!isLt30M) {
+        this.$message.error('上传大小不能超过 10MB!');
+        return false;
+      }
+
+      return true;
+    },
   }
 };
 </script>