FileReader上传多张图片

客官°小女子只卖身不卖艺 2021-06-24 16:10 603阅读 0赞

使用Promise实现同步处理

<div>
        <input type="file" accept="image/*" @change="setImage" multiple="multiple"/>
    </div>
    <script>
            setImage(e) {
                let that = this
                const files = e.target.files;
                that.checkIsImage(files)
                    .then(that.readerFileToList)
                    }).then(function(){
                        return new Promise(function(resolve, reject){
                            // do sth   for upload
                            ajax.post ...
                        })
                    }).catch(error => that.$Message.error(error))
    
            },
            /**
             * 检查是否图片格式
             * @param files
             */
            checkIsImage(files){
                return new Promise(function(resolve, reject){
                    let fileLength = 0;
                    let checkImage = function(file){
                        if (!file.type.includes('image/')) {
                            let error = '请选择图片'
                            reject(error)
                        }
                        fileLength++
                        if(fileLength<files.length){
                            checkImage(files[fileLength])
                        }else{
                            resolve(files)
                        }
                    }
                    checkImage(files[fileLength])
                })
                
            },
            /**
             * 读取图片到数组
             * @param files
             */
            readerFileToList(files){
                return new Promise(function(resolve, reject){
                    if (typeof FileReader === 'function') {
                        let uploadList = []
                        let fileLength = 0;
                        const reader = new FileReader();
                        reader.readAsDataURL(files[fileLength]);
                        reader.onload = function(e) {
                            if(e.target.result) {
                                uploadList.push(e.target.result)
                                fileLength++;
                                if(fileLength < files.length) {
                                    reader.readAsDataURL(files[fileLength]);
                                } else {
                                    resolve(uploadList)
                                }
                            }
                        }
                    }else{
                        let error = 'FileReader API不支持'
                        reject(error)
                    }
                })
            },
    </script>

多张网络图片转base64