uniapp的h5兼容上传人脸

其实就是h5上传人脸,但是有些点还是要注意的
1.注意点一:uniapp是不支持原生input的,所以我们只能模拟

// 隐式创建一个input控件,然后实现直接访问相册
                let inputUploadObj = '';
                inputUploadObj = document.createElement('input')
                inputUploadObj.setAttribute('id', 'input_upload_ID');
                inputUploadObj.setAttribute('type', 'file');
                // 添加这个属性,就可以唤起相机的功能
                inputUploadObj.setAttribute('capture', 'camera');
                // 这里如果不加属性 accept 是 "image/*" 或者 "video/*",就默认打开摄像头,既可以拍照也可以录像
                inputUploadObj.setAttribute('accept', 'image/*');
                inputUploadObj.setAttribute("style", 'visibility:hidden');
                // 这里将创建的隐式input控件拼接到body的最后面,会增加页面的长度,所以要在适当的时候,移除掉这个隐式创建的input控件
                document.body.appendChild(inputUploadObj);
                // 这里是模拟点击了input控件
                inputUploadObj.click();
                inputUploadObj.onchange=async (event)=>{
                    let file = event.target.files[0];
                    const currentFile = await util.compressImg(file);//这里是图片压缩
                    let url="";
                    if (window.createObjectURL != undefined) { // basic
                            url = window.createObjectURL(currentFile);
                        } else if (window.URL != undefined) { // mozilla(firefox)
                            url = window.URL.createObjectURL(currentFile);
                        } else if (window.webkitURL != undefined) { // webkit or chrome
                            url = window.webkitURL.createObjectURL(currentFile);
                        }
                        util.setStorageSync('uploadPhotoPath', url);
                        this.uploadPath(url);
                }

2.注意点二:压缩图片,因为小程序的压缩我们用不了,所以只能用其他插件压缩,这里我们使用image-conversion就行压缩,压缩效果很好,还能指定压缩大小
首先就是安装

import { compressAccurately } from 'image-conversion';
export function compressImg(file) {
  return new Promise(resolve => {
    compressAccurately(file, 170).then(res => {
      // The res in the promise is a compressed Blob type (which can be treated as a File type) file;
      const currentFile = new File([res], file.name, { type: file.type });
      resolve(currentFile);
    });
  });
}

下面的就比较好说,大家应该都会了,不会的在call我吧

你可能感兴趣的:(uniapp的h5兼容上传人脸)