Vue如何调用手机相机和相册以及上传

这篇文章主要介绍了Vue如何调用手机相机和相册以及上传，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

目前成都创新互联已为近1000家的企业提供了网站建设、域名、网页空间、成都网站托管、企业网站设计、大荔网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

组件

javaScript代码

  export default {
    name: "cameras-and-albums",
   data(){
    return{
     imgList: [],
     datas: new FormData(),
     files:0,
     size:0
    }
   },
   methods:{
    //调用相册&相机
    fileClick() {
     $('#upload_file').click();
 
    },
    //调用手机摄像头并拍照
    getImage() {
     let cmr = plus.camera.getCamera();
     cmr.captureImage(function(p) {
      plus.io.resolveLocalFileSystemURL(p, function(entry) {
       compressImage(entry.toLocalURL(),entry.name);
      }, function(e) {
       plus.nativeUI.toast("读取拍照文件错误：" + e.message);
      });
     }, function(e) {
     }, {
      filter: 'image'
     });
    },
    //从相册选择照片
    galleryImgs() {
     plus.gallery.pick(function(e) {
      let name = e.substr(e.lastIndexOf('/') + 1);
      compressImage(e,name);
     }, function(e) {
     }, {
      filter: "image"
     });
    },
    //点击事件，弹出选择摄像头和相册的选项
    showActionSheet() {
     let bts = [{
      title: "拍照"
     }, {
      title: "从相册选择"
     }];
     plus.nativeUI.actionSheet({
       cancel: "取消",
       buttons: bts
      },
      function(e) {
       if (e.index == 1) {
        this.getImage();
       } else if (e.index == 2) {
        this.galleryImgs();
       }
      }
     );
    },
    fileChange(el) {
     this.files=$("#upload_file").get(0).files;
     console.log(this.files.length);
     for(let i=0;i

感谢你能够认真阅读完这篇文章，希望小编分享的“Vue如何调用手机相机和相册以及上传”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!