首页 > 技术文章 > Web SQL Database+mui上传视频

yyjspace 2019-12-19 16:10 原文

后台接口

//pathContent为FileReader的onloadend事件中返回的target.result
public string getUrl(string pathContent)
        {
            int length = pathContent.Length;
            string comname = "";
            
            string base64 = pathContent.Substring(pathContent.IndexOf(",") + 1);
            try
            {
                string inputStr = base64;
                byte[] arr = Convert.FromBase64String(inputStr);
                comname = Guid.NewGuid().ToString() + ".mp4";
                MemoryStream ms = new MemoryStream(arr);
                AliyunOSS.PutObject(bucketName, "离线整改/" + comname, ms);
                ms.Close();
                
            }
            catch (Exception ex)
            {
                return ex.Message;
            }
            return "离线整改/" + comname;
        }

 

选择视频

var videos = [];
var i = 1;
var w = null;
//上传视频
document.getElementById('video').addEventListener('tap', function(e) {
    if (mui.os.plus) {
        var buttonTit = [{
            title: "录制"
        }, {
            title: "从手机相册选择"
        }];
    
        plus.nativeUI.actionSheet({
            cancel: "取消",
            buttons: buttonTit
        }, function(b) {
            switch (b.index) {
                case 0:
                    break;
                case 1:
                    getVideo(); //录制视频
                    break;
                case 2:
                    galleryVideo(); //打开相册
                    break;
                default:
                    break;
            }
        })
    }
});
//录制
function getVideo() {
    var cmr = plus.camera.getCamera();
    cmr.startVideoCapture(function(p) {
        console.log('成功:' + p);
        plus.io.resolveLocalFileSystemURL(p, function(entry) {
            createItem(entry);
            entry.file(function(evt) {
                appendVideo(p, evt);
            });
        }, function(e) {
            console.log('读取录像文件错误:' + e.message);
        });
    }, function(e) {
        console.log('失败:' + e.message);
    }, {
        filename: '_doc/camera/',
        index: i
    });
}
// 从相册中选择视频
function galleryVideo() {
    plus.gallery.pick(function(e) {
        plus.io.resolveLocalFileSystemURL(e, function(entry) {
            createItem(entry);
            entry.file(function(evt) {
                appendVideo(e, evt);
            });

        }, function(p) {
            console.log('读取录像文件错误:' + p.message);
        });
    }, function(e) {
        console.log("取消选择视频");
    }, {
        filter: "video"
    });
}
// 添加播放项
function createItem(entry) {
    $("#history").remove();
    var divHtml = "<div class=\"a-add dlist\" id=\"history\">";
    divHtml += "<div id=\"empty\" class=\"ditem-empty\"></div>";
    divHtml += "<img  src=\"../../images/remove.png\" class=\"a-remove_video\"></div>";
    $("#imgDiv").prepend(divHtml);
    createItem1(entry);
}

function createItem1(entry) {
    var hl = document.getElementById('history');
    //hl.innerHTML = '<li id="empty" class="ditem-empty"></li>';
    //hl.style.display = 'block';
    var le = document.getElementById('empty');
    var li = document.createElement('div');
    li.className = 'ditem';
    li.innerHTML = '<span class="iplay"><font class="ainf"></font></span>'
    li.setAttribute('onclick', 'displayFile(this)');
    hl.insertBefore(li, le.nextSibling);
    li.querySelector('.ainf').innerText = '...';
    li.entry = entry;
    updateInformation(li);
    // 设置空项不可见
    le.style.display = 'none';
}
// 显示文件
function displayFile(li) {
    if (w) {
        mui.alert('重复点击!');
        return;
    }
    if (!li || !li.entry) {
        mui.alert('无效的媒体文件');
        return;
    }
    var name = li.entry.name;
    var suffix = name.substr(name.lastIndexOf('.'));
    var url = '';
    if (suffix == '.mov' || suffix == '.3gp' || suffix == '.mp4' || suffix == '.avi') {
        url = '/plus/camera_video.html';
    } else {
        url = '/plus/camera_image.html';
    }
    w = plus.webview.create(url, url, {
        hardwareAccelerated: true,
        scrollIndicator: 'none',
        scalable: true,
        bounce: 'all'
    });
    w.addEventListener('loaded', function() {
        w.evalJS('loadMedia("' + li.entry.toLocalURL() + '")');
    }, false);
    w.addEventListener('close', function() {
        w = null;
    }, false);
    w.show('pop-in');
}
// 获取录音文件信息
function updateInformation(li) {
    if (!li || !li.entry) {
        return;
    }
    var entry = li.entry;
    entry.getMetadata(function(metadata) {
        li.querySelector('.ainf').innerText = dateToStr(metadata.modificationTime);
    }, function(e) {
        console.log('获取文件"' + entry.name + '"信息失败:' + e.message);
    });
}
var vindex = 1;
//视频
function appendVideo(e, evt) {
    videos = [];
    var reader = new plus.io.FileReader();
    reader.readAsDataURL(evt);
    reader.onloadend = function(e) {
        var videoSrc = e.target.result;
        //console.log(videoSrc);
        videos.push({
            name: "file", //这个值服务器会用到,作为file的key 
            path: e,
            src: videoSrc
        });
        vindex++;
    }
}

离线保存

function saveImage(business_id, business_type, item_id, file_type, create_user, imageStr) {
    db.transaction(function(tx) {
        var guid = new GUID();
        var id = guid.newGUID();
        var create_date = getDate();
        tx.executeSql('insert into im_file values(?,?,?,?,?,?,?,?)', [id, business_id, business_type,
            item_id, file_type, create_user, create_date, imageStr
        ], imageSuccess, imageError);
    });
}

function imageSuccess(tx, rs) {
    files = [];
    index = 1;
    $("#imgDiv").find(".a-add").remove();
    $("#text-h").val('');
    GetConfirmItem();
    //启用下拉刷新
    plus.webview.currentWebview().setPullToRefresh({
        support: true,
        style: "circle",
        offset: '100px'
    });
}

function imageError(tx, error) {
    files = [];
    mui.alert("上传失败,错误信息:" + error.message);
    //console.log("上传失败,错误信息:" + error.message);
}
//视频
function videoUpload() {
    for (var i = 0; i < videos.length; i++) {
        var f = videos[i];
        var e = f.path;
        var dataURL = f.src;
        saveImage(confirm_id, "整改确认", localStorage.getItem("record_id"), "2", localStorage.getItem("realName"), dataURL);
    }
}

推荐阅读