display 隐藏上传按钮_React移动端前端上传OSS实践

由于项目需求，需要在移动端H5页面实现一个图片和pdf文档资料上传到阿里云的oss(见上图)，此项目是采用react技术编写，于是就有了这篇文章。由于技术比较简单粗暴，对于没有实现过此功能的新手来说，可以参考一下，大神请直接跳过就好。

一、准备步骤：

1、文档上传OSS需要的一些参数：accessKeyId，accessKeySecret，stsToken，region，bucket，主要用来实例化前端OSS对象（上传OSS的第一步必须要实例化一个oss对象），具体说明请直接移步官网文档查看：https://help.aliyun.com/document_detail/87728.html?spm=a2c4g.11186623.6.546.78c41a455hEUFW#title-4jw-00w-3sm

2、文件选择的简单了解

二、实现步骤：

1、后端提供一个接口，用于获取准备步骤1中前端oss对象实例化需要的参数。

2、前端需要准备好文件选择的相关视图，主要有文件缩略图展示和选择文件的按钮（见开头图形），这部分主要是HTML和CSS的考察，比较简单。

3、点击选择文件按钮，选中文件之后对文件进行上传前处理，主要是input的onchange方法和上传文件的处理，也比较简单。

4、使用实例化好的OSS对象调用接口方法进行文件上传，此处选择调用的是multipartUpload方法，因为想要进行文件进度的跟踪，目前发现只有这个方法可以跟踪到进度，其他方法可能是我使用姿势不对，反正没能拿到进度，具体其他方法请参考oss官方文档，已经写得很清楚了（主要看看node上传的sdk部分）。

5、处理在移动设备上选择文件的一些坑，是的，因为我们的项目是原生同学提供Android和ios壳子，H5应用嵌入webview，所以会遇到坑。

三、具体代码

1、引入前端oss插件，由于使用的是react开发，所以直接:yarn add ali-oss

2、实例化oss对象：

//必须引入OSS模块：import OSS from 'ali-oss'
//此处的token对象是从后端请求返回的参数封装对象：
this.client = new OSS({   
   accessKeyId: token.accessKeyId, 
   accessKeySecret: token.accessKeySecret,   
   stsToken: token.securityToken,    
   region: 'oss-cn-beijing',   
   bucket: token.bucketName
});

3、input文件选中onchange事件中对文件的处理：

 {       
        if (!e.target.files[0]) return;           
        const file = e.target.files[0]);
         const reader = new FileReader();//此处主要用FileReader处理         
         reader.readAsDataURL(file);               
         reader.onloadend = (e: any) => {  
                const index1 = file.name.lastIndexOf('.');
                const index2 = file.name.length;
                let fileName = file.name.substring(0, index1); // 文件名
                const suffix = file.name.substring(index1, index2); // 后缀名
                fileName = this.stripscript(fileName);
                const url =    fileName + '_' + new Date().getTime() + '_' + Math.round(Math.random() * 100000000) + suffix;                        
                //oss上传
                this.client.multipartUpload(
                    'filePhoto/' + url,   //放到filePhoto文件夹下                  
                     file,
                ).then(res => {                           
                //上传结果处理，此处因为需要放开图片访问权限，所以还需要调用putACL方法处理一下
                this.client.putACL(res.name, 'public-read');
            })
        })
}}/>

4、以上伪代码就是主要步骤，实现起来比较简单，没啥好说的，现在说说处理遇到的坑。正如之前所说，本项目是前端页面嵌入Android和ios原生壳子里面，所以在图片上传这块会有很多兼容性问题，在Android端，因为原生webview的一些机制，导致在微信浏览器里面查看是没有问题的，但是放到webview里面就有问题，主要是点击选择按钮没反应，照相机按钮不出现，手机相册找不到等问题，这部分主要是Android的同学调试webview尝试解决，而且不同机型和不同Android版本表现的坑也可能不同，只能说原生Android套H5页面里面实现的上传真的比较坑，Android同学比较辛苦要解决。在ios上，主要的坑是点击上传按钮没反应，后面经过排查，是因为ios上对input隐藏元素选择有问题，所以最终由前端这边通过样式把input的尺寸调整跟按钮一样大，不用display：none来隐藏，用opacity: 0来隐藏解决了。