商品新增视频上传

src/views/his/storeProduct/index.vue

@@ -344,6 +344,22 @@
            <el-form-item label="轮播图" prop="images">
              <Material v-model="photoArr" type="image" :num="10" :width="150" :height="150" />
            </el-form-item>
+            <el-form-item label="商品视频" prop="video">
+          <div>
+            <el-upload
+              ref="uploadVideo"
+              class="upload-demo"
+              :action="uploadUrl"
+              :on-success="handleSuccess"
+              :before-upload="beforeUpload"
+              :limit="1"
+              accept="video/*"
+            >
+              <el-button size="small" type="primary">点击上传视频</el-button>
+            </el-upload>
+            <video v-if="form.videoUrl" :src="form.videoUrl" controls style="max-width: 300px; max-height: 300px; margin-top: 10px"></video>
+          </div>
+        </el-form-item>
           <el-form-item label="规格" prop="specType">
              <el-radio-group v-model="form.specType" >
                <el-radio :label="0" class="radio">单规格</el-radio>
@@ -846,7 +862,8 @@ export default {
       isDrug: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
-      }
+      },
+      myloading:null
     };
   },
   created() {
@@ -873,6 +890,31 @@ export default {
     });
   },
   methods: {
+    //上传成功
+     handleSuccess(response, file) {
+      // 上传成功后的回调函数
+      this.myloading.close();
+      this.form.videoUrl = response.url;
+      this.$refs.uploadVideo.clearFiles();
+    },
+    beforeUpload(file) {
+      // 上传前的钩子函数，可以在这里对文件进行处理
+      // 返回 false 则取消上传
+
+      // 例如限制文件大小
+      const isLt2M = file.size / 1024 / 1024 < 200;
+      if (!isLt2M) {
+        this.$message.error('上传视频文件大小不能超过 200MB!');
+        return false;
+      }
+      this.myloading = this.$loading({
+        lock: true,
+        text: '上传中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+
+    },
     handleUpdatePrice(){
       this.priceOpen=true;
     },
@@ -1061,6 +1103,7 @@ export default {
         doctorBrokerage:null,
         imgUrl: null,
         images: null,
+        videoUrl: null,
         productName: null,
         productIntroduce: null,
         keyword: null,
@@ -1261,7 +1304,6 @@ export default {
             return this.$message.warning('请点击生成规格！');
           }
 
-
           addOrEdit(this.form).then(response => {
             if (response.code === 200) {
               this.msgSuccess("操作成功");