上传图片和视频

<el-dialog
  title="维护工序信息"
  :visible.sync="dialogCreateVisible"
  width="60%"
  left
  :before-close="handleClose" :close-on-click-modal="false">
  <el-form  :model="createForm" :rules="createRules" ref="createForm" label-width="100px" class="demo-ruleForm" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="row">
      <div class="col-md-4">
        <el-form-item label="选择设备" prop="name" :rules="createRules.strRequired">
          <el-select v-model="createForm.equip" filterable clearable placeholder="请选择">
            <el-option-group
                    v-for="group in typeOptions"
                    :key="group.label"
                    :label="group.label">
              <el-option v-for="item in group.option" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
      </div>
      <div class="col-md-4">
        <el-form-item label="工序名称" prop="name" :rules="createRules.strRequired">
          <el-input v-model="createForm.name" ></el-input>
        </el-form-item>
      </div>
      <div class="col-md-4">
        <el-form-item label="标准工时" prop="standard" :rules="createRules.strRequired">
          <el-input v-model="createForm.standard" type="number"><i slot="suffix" style="font-style:normal;margin-right: 20px; line-height: 30px; color: #1e1e1e">分钟</i> </el-input>
        </el-form-item>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <el-form-item label="图片" :rules="createRules.strRequired" prop="pic_url">
          <el-upload
                  class="avatar-uploader"
                  list-type="picture-card"
                  action="/admin/uploads/upload_img?type=1"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  accept=".jpg,.jpeg,.png"
          >
            <img v-if="pic_url" :src="pic_url" class="avatar" width="100%">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </div>

      <div class="col-md-4">
        <template>
          <el-form-item label="视频" prop="video_url">
            <el-upload
                    ref="uploadRef"
                    class="avatar-uploader el-upload--text"
                    :action="'/admin/uploads/upload_video'"
                    :on-progress="uploadVideoProcess"
                    :on-success="handleVideoSuccess"
                    :before-upload="beforeUploadVideo"
                    {{-- :file-list="fileList"--}}
                    {{-- :limit="1"--}}
                    :show-file-list="false"
                    :on-exceed="handleExceed"
                    :auto-upload="true"
                    accept=".mp4,.avi"
            >
                <video v-if="video_url" style="width: 100%;height: 100%;object-fit:fill;" :src="video_url" controls="controls">
                  您的浏览器不支持视频播放
                </video>
              <el-progress v-else type="circle" :percentage="videoUploadPercent" style="margin:10px;" class="el-icon-video-camera-solid">
              </el-progress>

              {{-- <i v-if="!video_url" class="el-icon-plus avatar-uploader-icon"></i>--}}
              {{--   <div slot="tip" class="el-upload__tip" style="color: red">--}}
              {{--      最多可以上传1个视频，建议大小50M，推荐格式mp4--}}
              {{--   </div>--}}
            </el-upload>
          </el-form-item>
        </template>
      </div>

      <div class="col-md-4">
        <el-form-item label="启用" label-width="60px">
          <el-switch v-model="status"></el-switch>
        </el-form-item>
      </div>
    </div>

  </el-form>
  <div class="box-footer" style="text-align: center;margin-top: 10px;">
    <el-button @click="goBack()" size="mini">取 消</el-button>
    <el-button type="primary" @click="submitForm('createForm')" size="mini">确 定</el-button>
  </div>
</el-dialog>
{{--<video v-if="is_video=='有'" style="width: 100%;height: 100%;object-fit:fill;" autoplay loop="false"> <source src="/uploads/video/661cc56f0a1de.mp4" type="video/mp4" > </video>--}}

        pic_url: "",
        video_url: "",

      //视频
      //上传前回调
      beforeUploadVideo(file) {
        let fileSize = file.size / 1024 / 1024 < 500
        if (
                // ['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(
                //         file.type,
                // ) == -1
                ['video/mp4','video/avi'].indexOf(
                    file.type,
                ) == -1
        ) {
          alert('请上传正确的视频格式')
          return false
        }
        if (!fileSize) {
          alert('视频大小不能超过500MB')
          return false
        }
      },
      uploadVideoProcess(event, file) {
        this.videoFlag = true
        this.videoUploadPercent = file.percentage.toFixed(0) * 1
      },
      //上传成功回调
      handleVideoSuccess(res, file) {
        // debugger
        var that = this;
        that.video_url = res.video_url;
      },

      // handleExceed() {
      //   var that = this;
      //   console.log(that)
      //   console.log(4444)
      //   alert('最多上传一个视频文件')
      //   uploadRef.value.clearFiles()
      //   nextTick(() => {
      //     uploadRef.value.handleStart(files[0])
      //   })
      // },

      handleExceed(files, fileList) {
        this.$set(fileList[0], 'raw', files[0]);
        this.$set(fileList[0], 'name', files[0].name);
        this.$refs['uploadRef'].clearFiles();//清除文件
        this.$refs['uploadRef'].handleStart(files[0]);//选择文件后的赋值方法
      },

     //图片
      handleAvatarSuccess(res, file) {
         this.pic_url = res.img;
      },
      beforeAvatarUpload(file) {
        //const isJPG = file.type === 'image/jpeg';
        //var files = file.target.files[0];
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // 检查文件是否为图片类型 (!/image\/(jpeg|png|gif|bmp)/.test(file.type))
        if (!/image\/(jpeg|png)/.test(file.type)) {
          alert('只能上传.jpg, .png格式的图片！');
          return;
        }
        else{
          isJPG = true;
        }

        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

 
      //图片、视频上传
    public static function upload_imgvideo(Request $request){
        $type = $request->type;
        if (!empty($request->file)){
            $tmp = $request->file;
            if($type == 1){
                $path = 'processimg/'; //工序图片
            }
            elseif($type == 2){
                $path = 'video/';  //视频
            }
            else{
                $path = getDateH(1);
            }
            if ($tmp->isValid()) { //判断文件上传是否有效
                $FileType = $tmp->getClientOriginalExtension(); //获取文件后缀
                $FilePath = $tmp->getRealPath(); //获取文件临时存放位置
                $FileName = $path. uniqid() . '.' . $FileType; //定义文件名
                Storage::disk('admin')->put($FileName, file_get_contents($FilePath)); //存储文件
                $url  = '/uploads/'.$FileName;
                return response()->json(['status' => 200, 'url' => $url,'message' => '上传完成', 'type' => 'success']);
            }
        }
    }