React手机端和vuePC端图片上传
React手机端图片压缩
在这里要介绍一下一个插件lrz，插件地址https://github.com/think2011/localResizeIMG/，这个插件确实很好用，我在vue和react框架里面都使用到了。
先来说一下在ant-design-mobile中使用。
**componentDidMount() {
let mythis = this; `//这里赋值给myhis,是因为this在下面这个方法里面不起作用`
document.getElementById('id-face').addEventListener('change', function () {
if (this && this.files && this.files[0]) {
let reader = new FileReader();
reader.onload = function (evt) {
imgsrcs.push(evt.target.result) //evt.target.result这里是图片的base64码，
BaseID2.push(evt.target.result) //你可以把evt打印出来看看
mythis.setState({
imgsrc: imgsrcs,
BaseID1:BaseID2,
});
};
reader.readAsDataURL(this.files[0]);
} else {
}
});
}**
这个是在componentDidMount()生命周期函数里面调用这个插件的，刚开始要npm i lrz安装插件并且引用。
疑问1：为什么是在这个生命周期函数里面进行调用？
解答1: 刚开始我也试了一下在componentwillMount()这个生命周期函数进行调用，但是发现根本不起效果，因为我所用的上传组件是input,为了使这个input外表显得更美观，我还包装了一下。我们都知道react有生命周期，若是你在componentwillMount()中调用lrz插件，当你上传照片的时候这个函数并不会触动，只有componentwillMount()这个生命周期函数进行调用的时候，你上传照片的时候，照片会被带出来。
外加两个小的知识点。
handlePhotos=(flag, path, i)=>{
let a = flag
if(a === 0){
if(path === this.props.shebeidata.getXiangmu[0].FilePath[i]){//这是后台给的照片
window.open(this.props.shebeidata.getXiangmu[0].FilePath[i],'big,'fullscreen=yes')
a == 1
console.log(a)
}else{
let newwin=window.open()
newwin.document.write("<img src="+this.state.imgsrc[i]+" />")//这是自己拍的照片
// window.open(this.state.imgsrc[i],'big','fullscreen=yes')
a == 1
console.log(a)
}
}else{
window.close()
a == 0
}
}
handlePhotos1=(path)=>{
window.open(path,'big','fullscreen=yes')
}
说明：
这些参数都是我自己传的值，你可以根据自己所需要的来决定，但是你必须吧path这个参数传过来，这个是代表了图片的路径。
window.open()： 方法一，他是基于浏览器放大的一个方法，它会充满你整个屏幕
window.open(path,‘big’,‘fullscreen=yes’)：方法二，这个原理一致，但是你能设置参数，具体参数含义请百度。
基于Element-ui的图片压缩和裁剪
这个是目前手上一个项目所要用的，因为要用vue来写，所以我相当于又重新回顾了一下先前的知识。压缩还是用lrz,裁剪用的是vue-cropper插件http://xyxiao.cn/vue-cropper/example/，这里遇到一个很好的引用这个插件的博客，https://blog.csdn.net/qq_35023116/article/details/84886846。
我这个是上传照片到腾讯云。
步骤：
- 调用上传的组件Element-ui中的Upload
说明：这里是引用组件。 - 在upload这个组件下面引用插件，这个插件放在dialog框里面，必须要把裁剪框放在一个盒子里面，不管你是用哪种盒子。
（图一）
这个插件里面会有一些参数，这些参数，你可以根据自己所需来定义，这个option对象是在data中定义的。不管你引用多少个uopload组件，这个插件你只需要引用一次就行，不用在每个upload组件后面都添加图一的代码。 - upload中方法的调用
这个里面的话主要是获取到图片的路径，vue-cropper所接收的图片路径可以使base64，也可以是Blob，这里我是转换成base64,图片文件转换base64在下面这个图片的方法。
new Image()对象，是为了等图片加载完之后获取图片的宽和高，赋值给裁剪框的宽和高，这样裁剪框就会自动匹配图片的大小。
- 就是图片压缩上传，压缩方法和react一致，直接调用插件即可。但是上传的一般都是一个file文件，很多人只能拿到base64码，却不知道转化，下面这个方法则是base64转图片文件。
2019/4/25 22:55 以后我要勤劳的管理我的博客，把我不会的技术难点都记录下来。
