视频截图并上传

@@ -23,7 +23,7 @@
     "file-saver": "^2.0.2",
     "file-saver": "^2.0.2",
     "font-awesome": "^4.7.0",
     "font-awesome": "^4.7.0",
     "form-gen-parser": "^1.0.3",
     "form-gen-parser": "^1.0.3",
-    "html2canvas": "^1.0.0-rc.5",
+    "html2canvas": "^1.4.1",
     "install": "^0.12.2",
     "install": "^0.12.2",
     "js-cookie": "^2.2.1",
     "js-cookie": "^2.2.1",
     "js-file-download": "^0.4.12",
     "js-file-download": "^0.4.12",

@@ -23,7 +23,20 @@ export default {
                     'Content-Type': 'application/x-www-form-urlencoded',
                     'Content-Type': 'application/x-www-form-urlencoded',
                 }
                 }
             })
             })
-        },
+    },
+    postFormData(url, data) {
+            return axios({
+                method: 'POST', // 请求协议
+                url: url, // 请求的地址
+                data: data, // post 请求的数据
+                timeout: 30000, // 超时时间, 单位毫秒
+                transformRequest: [function(data, headers) {
+                      // 去除post请求默认的Content-Type
+                      delete headers.post['Content-Type']
+                      return data
+                    }],
+                })
+    },
     get(url, params) {
     get(url, params) {
         return axios({
         return axios({
             method: 'GET',
             method: 'GET',

@@ -35,6 +35,8 @@ export const definitions = params => { return http.get(`${baseUrl}/deployment/de
 
 
 export const uploadPath = `/api/${baseUrl}/file/upload`;
 export const uploadPath = `/api/${baseUrl}/file/upload`;
 export const upfile = params => { return http.post(`/nmms-server-import/nmms/awbm/importExcelAWBM`,  params);}
 export const upfile = params => { return http.post(`/nmms-server-import/nmms/awbm/importExcelAWBM`,  params);}
+//接口方式上传
+export const upfileWithPost = params => { return http.postFormData(`/${baseUrl}/file/upload`,  params);}
 export const upfiles = params => {
 export const upfiles = params => {
     return http.post(`/nmms-server-import/nmms/awbm/importExcelAWBM5201`,  params);
     return http.post(`/nmms-server-import/nmms/awbm/importExcelAWBM5201`,  params);
 }
 }

@@ -444,7 +444,28 @@
             <video width="100%" height="200" autoplay loop controls id="videos">
             <video width="100%" height="200" autoplay loop controls id="videos">
                 <source src="/static/login/New-jumbo.mp4" type="video/mp4">
                 <source src="/static/login/New-jumbo.mp4" type="video/mp4">
             </video>
             </video>
-            <el-button class="btns" @click="screenshot">一键截屏</el-button>
+            <el-row>
+                <el-image
+                        :src="imgBase64" width="200" height="200"
+                        fit="fill"></el-image>
+            </el-row>
+            <el-button type="success" class="btns" @click="screenshot">一键截屏上传</el-button>
+<!--            <el-upload-->
+<!--                    class="upload-demo"-->
+<!--                    drag-->
+<!--                    action=""-->
+<!--                    :headers="uploadHeaderObj"-->
+<!--                    :on-success="handleUploadSuccess"-->
+<!--                    :auto-upload="false"-->
+<!--                    :on-change="submitUpload"-->
+<!--                    ref="upload"-->
+<!--            >-->
+<!--                <i class="el-icon-upload avatar-uploader-icon"></i>-->
+<!--                <div class="el-upload__text">将文件拖到此处，或<em>点击上传文件</em></div>-->
+<!--                <div class="el-upload__tip" slot="tip">只能上传xml文件，且不超过2MB</div>-->
+<!--            </el-upload>-->
+<!--            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
+
         </el-drawer>
         </el-drawer>
     </el-row>
     </el-row>
 </template>
 </template>
@@ -461,6 +482,8 @@
     import jsutil from "@/common/js/util";
     import jsutil from "@/common/js/util";
     import { getList as getCRMList } from '@/api/crm_api';
     import { getList as getCRMList } from '@/api/crm_api';
     import { loginedUserInfo } from '@/api/user';
     import { loginedUserInfo } from '@/api/user';
+    import html2canvas from 'html2canvas'
+    import {uploadPath,upfileWithPost} from "../../api/technological";
 
 
 
 
     export default {
     export default {
@@ -480,6 +503,12 @@
                 areaData:[],
                 areaData:[],
                 locationData:[],
                 locationData:[],
                 roles:[],
                 roles:[],
+                imgBase64:'',
+                imgUploadPath:uploadPath,
+                uploadFileList:[],
+                uploadHeaderObj: {
+                    Authorization: window.sessionStorage.getItem("token"),
+                },
                 dialogMap: {
                 dialogMap: {
                     update: '编辑',
                     update: '编辑',
                     create: '新增'
                     create: '新增'
@@ -830,6 +859,84 @@
                 };
                 };
             },
             },
             screenshot(){
             screenshot(){
+                let video = document.getElementById('videos')
+                html2canvas(video, {
+                    allowTaint: true,
+                    useCORS: true
+                }).then((canvas) => {
+                    // base64
+                    this.imgBase64 = canvas.toDataURL('image/png')
+                    // 下载方法1，浏览器弹出下载文件提示
+                    const saveInfo = {
+                        // 导出文件格式自己定义
+                        'download': '文件名' + '.png',
+                        'href': this.imgBase64
+                    }
+                    const element = document.createElement('a')
+                    element.style.display = 'none'
+                    for (const key in saveInfo) {
+                        element.setAttribute(key, saveInfo[key])
+                    }
+                    document.body.appendChild(element)
+                    // element.click()
+                    setTimeout(() => {
+                        document.body.removeChild(element)
+                    }, 300)
+                    this.uploadFile(this.imgBase64)
+                })
+            },
+            // 接口上传
+            uploadFile(imgBase64){
+                const base64List = imgBase64.split(',')[1]
+                const raw = window.atob(base64List)
+                const rawLength = raw.length
+                const uInt8Array = new Uint8Array(rawLength)
+                for (let i = 0; i < rawLength; ++i) {
+                    uInt8Array[i] = raw.charCodeAt(i)
+                }
+                // 若需上传，将base64转为file文件
+                const blob = new Blob([uInt8Array], { type: 'image/png' })
+                let fileOfBlob = new File([blob], 'imgCaptureTest' + '.png')
+                // this.submitUpload(fileOfBlob);
+                var formData = new FormData()
+                formData.append('file', fileOfBlob)
+                this.submitUpload(formData);
+            },
+            //上传文件
+            handleUploadSuccess: function(response, file, fileList){
+                let res = response.data;
+                if (response.code !== '200') {
+                    // 关闭加载
+                    return this.$message.error(response.msg);
+                }
+                this.$message.success(res.msg);
+                this.addForm.picUrl = res.data.relativePath
+
+            },
+            submitUpload(formData){
+                let ld = this.$loading({
+                    text:"图片数据上传中..."
+                })
+                const para = {
+                    file:formData
+                }
+                upfileWithPost(formData).then((response)=>{
+                    let res = response.data;
+                    if (res.code !== '200') {
+                        // 关闭加载
+                        return this.$message.error(res.msg);
+                    }
+                    this.$message.success(res.msg);
+                    this.addForm.picUrl = res.data.relativePath
+                }).finally(()=>{
+                    ld.close()
+                })
+                // this.$refs.upload.submit();
+            },
+            trnSelectionChange(){
+
+            },
+            checkSelectable(){
 
 
             }
             }
         },
         },