vue中base64和file文件类型的互相转换

如图需求，上传文件后要求支持图片的预览，裁剪，放大和缩小，利用vue-cropper实现，elemeng-ui的上传组件之后是file文件类型，需要转换成base64在右侧区域进行展示预览。

​​​​​​​

             // 组件dom结构，on-change钩子函数绑定
                    <el-upload
                    class="upload-demo"
                    drag
                    :show-file-list="false"
                    :auto-upload="false"
                    action="https://jsonplaceholder.typicode.com/posts/"            
                    :on-change="previewImage"
                    multiple>
                    <div v-if="!loading" class="el-upload__text" style="font-size: 16px;color: #68718C;">将图片拖到此处，或<em>点击上传</em>或拍照</div>
                </el-upload>

file转base64，下图代码中的file参数为el-upload上传组件中钩子函数的file参数

            var URL = null
            if (window.createObjectURL !== undefined) {
                URL = window.createObjectURL(file.raw)
            } else if (window.URL !== undefined) {
                URL = window.URL.createObjectURL(file.raw)
            } else if (window.webkitURL !== undefined) {
                URL = window.webkitURL.createObjectURL(file.raw)
            }
            this.option.img = URL
//option为组件vue-cropper中绑定的data值，img获得转化后的base64格式的URL就可以在cro-pperjs中进行展示

预览使用cropper组件的钩子函数

        clip(){//对图片进行裁剪
            this.$refs.cropper.getCropData((data) => {
                this.localUrl = data //img的src属性指定locaUrl就可以实现预览
                console.log(data,'裁剪之后的图片地址')
                sessionStorage.setItem('imageToBase64',this.localUrl)
                // this.subFileList = this.dataURLtoFile(this.localUrl, this.file.name)
            })             
        },

做的宁外一个需求也是肖像上传，需要在本地实现预览功能，同时后台接口传递的是file文件类型，传参方式使用的FormData表单形式

预览的还是使用vue-cropper组件，效果如图，转化代码如下

        // base64转file，dataurl为base64地址，filename为文件名称，自定义即可
        dataURLtoFile(dataurl, filename) {
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length; 
            let u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type:mime}, {uid: 1111111111111});
        },