webApp实现打开相机、打开相册、打开文件管理功能并上传文件

最近做的一个webapp里有一个聊天功能，聊天时可以发送相册图片、发送拍照图片及发送文件。

一看这个功能，简单呐，我记得之前就做过类似的上传头像的功能，于是

<input type="file" accept="image/*" capture="camera">

一顿操作后打包真机测试，结果...凉凉，我的手机直接给出多个选项，相机相册文件等等，连美图秀秀都出现了。这不对啊，我要的是直接打开系统相机。百度之后发现大多数人都是通过这种方法来做的，但是这个方式好像并不能实现我的需求。于是换种思路：

这里使用HTML5+来实现，直接上代码：

// 打开相册并获取图片相关信息
plus.gallery.pick((p) => {
     plus.io.resolveLocalFileSystemURL(p, (entry) => {
           entry.file((file) => {
		 var fileReader = new plus.io.FileReader()
		 fileReader.onloadend = function(evt) {
                       // console.log(evt.target.result)
                       file.file = evt.target.result
                       // console.log(file.file)
                       // console.log(file.size + '--' + file.name + '--' + file.type + '--' + file.lastModifiedDate)
                       that.uploadFile(file)
                  }
                  fileReader.readAsDataURL(entry, 'utf-8')
	    })
      }, (e) => {
           console.log('图片文件读取错误：' + e.message)
      })
}, (e) => {
     console.log('失败：' + e.message)
}, {
     filter: 'image'
})


// 拍照并获取拍的照片
var cmr = plus.camera.getCamera()
cmr.captureImage((p) => {
    plus.io.resolveLocalFileSystemURL(p, (entry) => {
        entry.file((file) => {
        	var fileReader = new plus.io.FileReader()
        	fileReader.onloadend = function(evt) {
                // console.log(evt.target.result)
                file.file = evt.target.result
                // console.log(file.file)
                // console.log(file.size + '--' + file.name + '--' + file.type + '--' + file.lastModifiedDate)
                that.uploadFile(file)
            }
            fileReader.readAsDataURL(entry, 'utf-8')
        })
    }, (e) => {
        console.log('图片文件读取错误：' + e.message)
    })
}, (e) => {
    console.log('失败：'+ e.message)
}, {
    filename: '_doc/camera/',
    index: 1
})

最后一个打开文件管理选取文件上传稍微麻烦一点，借用了一个插件（pickFile.js）：

// pickFile.js是一个插件，可以打开文件管理
pickFile.PickFile(function(src){  
    //  console.log(src + '777')
     plus.io.resolveLocalFileSystemURL(src, (entry) => {
        entry.file((file) => {
            	var fileReader = new plus.io.FileReader()
            	fileReader.onloadend = function(evt) {
                    // console.log(evt.target.result)
                    file.file = evt.target.result
                    // console.log(file.file)
                    // console.log(file.size + '--' + file.name + '--' + file.type + '--' + file.lastModifiedDate)
                    that.uploadFile(file)
                }
                fileReader.readAsDataURL(entry, 'utf-8')
            })
    }, (e) => {
        console.log('图片文件读取错误：' + e.message)
    })
})

这里是上传文件的功能：

uploadFile (file) {
    this.latestHs = true
    var fileObj = dataURLtoFile(file.file, file.name)
    // var file = $('#test')[0].files[0]
    var guid = require('uuid/v1')()
    var name = file.name
    var type = file.type
    var size = file.size
    var lastModifiedDate = file.lastModifiedDate
    var formData = new FormData()
    formData.append('file', fileObj)
    formData.append('guid', guid)
    formData.append('name', name)
    formData.append('type', type)
    formData.append('size', size)
    formData.append('lastModifiedDate', lastModifiedDate)
    AddFile(formData).then(res => {
        // console.log(res.data + '111')
        if (res.data === 'True') {
            var data = {
                guid: guid,
                name: name,
                token: `Bearer ${localStorage.getItem('access')}`
            }
            // console.log(JSON.stringify(data) + '999999')
            GetFileInfo(data).then(res => {
                // console.log(JSON.stringify(res) + 'ooooooo')
                this.onSuccess(res)
            })
        } else {
            console.log('上传失败败')
        }
    }).catch(() => {
        console.log('上传失败')
    })
    //将base64转换为文件对象
    function dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(',')
        var mime = arr[0].match(/:(.*?);/)[1]
        var bstr = atob(arr[1])
        var n = bstr.length
        var u8arr = new Uint8Array(n)
        while(n--){
            u8arr[n] = bstr.charCodeAt(n)
        }
        //转换成file对象
        return new File([u8arr], filename, {type:mime})
        //转换成成blob对象
        //return new Blob([u8arr],{type:mime});
    }
}