javascript 如何将图片余烬上传到symfony

Posted 2021-05-04

//Call component with model
 
{{upload.programs.image-input program=model.newDeveloperProgram}}

//Create a new array for files and add file to it
 
import Ember from 'ember';
 
export default Ember.Component.extend({
    actions: {
        fileSelectionChanged: function(file) {
            if(this.program.get('files')===null)
            {
                this.program.set('files',[]);
            }
            var filesProgram = this.program.get('files');
            filesProgram.pushObject(file);
            this.program.set('files',filesProgram);
            this.set('files',filesProgram);
        }
    },
    files: Ember.A([])
});

//For each file, show it with name
 
{{#each files as |file|}}
    <img src="{{file.dataURL}}" width="200" height="200">
 
    <ul>
        <li>Titre: {{file.name}}</li>
    </ul>
{{/each}}
<br>
{{upload/programs/file-input fileChanged="fileSelectionChanged" id='input-program'}}
{{yield}}

//Show file
 
import Ember from 'ember';
export default Ember.TextField.extend({
    type: 'file',
    change: function() {
        let self = this;
        var inputFiles = $('#input-program').prop('files');
        if (inputFiles.length < 1) {
            return;
        }
 
        let inputFile = inputFiles[0];
 
        let fileInfo = {
            name: inputFile.name
        };
 
        var fileReader = new FileReader();
 
        fileReader.onloadend = function(e) {
            //let fileReader = e.target;console.log(e.target);
            fileInfo.dataURL = fileReader.result;
 
            self.sendAction('fileChanged', fileInfo);
        };
 
        let firstFile = $('#input-program').prop('files')[0];
        fileReader.readAsDataURL(firstFile);
    }
});

//Symfony part
 
public function postUploadAction()
    {
        $img = $_POST['dataUrl'];
        $patternJpg = '/data:image\/jpg/';
        $patternJpeg = '/data:image\/jpeg/';
        $patternPng = '/data:image\/png/';
 
//Define the extension
 
        preg_match($patternJpeg,$img,$matchJpeg);
        preg_match($patternJpg,$img,$matchJpg);
        preg_match($patternPng,$img,$matchPng);
 
        if($matchJpeg!=null)
        {
            $img = str_replace('data:image/jpeg;base64,', '', $img);
            $extension = '.jpeg';
        }
        elseif($matchJpg!=null)
        {
            $img = str_replace('data:image/jpg;base64,', '', $img);
            $extension = '.jpg';
        }
        elseif($matchPng!=null)
        {
            $img = str_replace('data:image/png;base64,', '', $img);
            $extension = '.png';
        }
        else
        {
            return $this->handleView($this->view('Image non valide', 403));
        }
 
 
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $programId = $_POST['programId'];
        $program = $this->getResourceManager()->getRepository(new DeveloperProgram())->find($programId);
 
        $dir = $this->get('kernel')->getRootDir().'/../web/'.DeveloperProgramPicture::getUploadDir();
 
        $new_name = md5(uniqid(rand(), true)).$extension;
        $dir_program = '/'.$program->getUniqueKeyPath().'/';
        $new_dir = $dir.$dir_program;
        if(!is_dir($new_dir))
            mkdir($new_dir);
        $file = $new_dir.$new_name;
        $success = file_put_contents($file, $data);
 
//Create the symfony picture entity
        $picture = new DeveloperProgramPicture($program->getName());
        $picture->setProgram($program);
        $picture->setExtension($extension);
        $picture->setWebPath(DeveloperProgramPicture::getUploadDir().$dir_program.$new_name);
        $picture->setPosition(0);
        $this->getResourceManager()->create($picture);
 
        return $this->handleView($this->view($picture, 201));
    }

//On save action, call ajax method to save picture
 
if (newDeveloperProgram.get('files') !== undefined) 
{
    for (var k = 0; k < newDeveloperProgram.get('files').length; k++) {
        var file = newDeveloperProgram.get('files')[k];
        var pictureNumber = 0;
        formData = new FormData();
        formData.append('dataUrl', file['dataURL']);
        formData.append('name', file['name']);
        formData.append('picturesCount', pictureNumber);
        formData.append('programId', newDeveloperProgram.id);
        pictureNumber++;
 
        $.ajax({
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            url: _this.get('apiNamespace')+'/developerPrograms/upload'
        });
    }
}