使用vue axios和PHP上传多个文件-仅上传一个文件

fed3vt

我正在尝试使用vue和axios创建多个文件上传。我的问题是,只有ine文件会上传到服务器。这是我使用的代码:模板代码

<input type="file" name="images[]" multiple ref="images" @change="handleUpload()">

JS代码

//this is part of the handleUpload() vue method.

let formData = new FormData();

for(let i;i < $refs.images.files.length; i++){
 let file = this.$refs.images.files[i];
 formData.append('image', file);
}

axios.post('/upload', formData, { header: { 'Content-Type': 'multipart/form-data' } })
.then( (response) => console.log(response, response.data) )
.catch( (error) => console.log(error) ); 

PHP服务器代码

// I'm using slim 4 and sirius upload to manage the file validation/upload
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;
use Psr\Http\Message\UploadedFileInterface;
use Slim\Factory\AppFactory;
use Sirius\Upload\Handler as UploadHandler;

require __DIR__ . '/vendor/autoload.php';

$app = AppFactory::create();

$app->post('/platform/api/v1/compress', function(Request $request, Response $response){

    $uploadHandler = new UploadHandler('/uploads');
    
        $uploadHandler->addRule('extension', ['allowed' => ['jpg', 'jpeg', 'png']]);
   
        $result = $uploadHandler->process( $request->getUploadedFiles() );
        
        // handle single input with single file upload
        if( $result->isValid() ){
            $result->confirm();
                   
            $url = ["master_image_url" => "/uploads/".$result->name];

            $response->getBody()->write(json_encode($url));
        }


    return $response;
});

$app->run();

如何上传多个文件?也许我需要修改代码?

jcHernande2

尝试在appened函数中将“ image”更改为“ image []”

例:

for(let i;i < $refs.images.files.length; i++){
 let file = this.$refs.images.files[i];
 formData.append('image[]', file);
}

在服务器中

$uploadedFiles=$request->getUploadedFiles();
foreach ($uploadedFiles['image'] as $uploadedFile) {
        if ($uploadedFile->getError() === UPLOAD_ERR_OK) {
           
        }
    }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用多个文件上传器仅上传一个文件

允许用户仅使用Plupload上传一个文件

使用vue js和axios上传多个文件

使用快速文件上传后,多个文件上传只上传第一个

尝试使用Python和Selenium将多个文件上传到网站,但仅选择第一个文件,而不选择其他文件,为什么?

多个文件上传仅上传最后一个文件,而不上传其余文件

使用PHP上传多个文件

Laravel使用AngularJS从多个文件上传文件中仅存储一个文件

使用 PHP 通过 SFTP 上传图片上传的是一个 0 字节的文件

PHP使用FWRITE和SSH2上传多个文件

如何使用PHP,jQuery和AJAX上传多个文件

如何使用ReactJS和Axios上传文件

使用VueJS,axios和Laravel上传文件

使用一个输入javascript处理目录/文件上传

如何使用一个按钮上传文件

如何使用Java API在一个调用中将多个文件上传到Google Cloud Storage?

如何使用multer从同一个mongodb集合的多个字段上传文件

使用jquery多文件上传插件选择多个文件时,列表中只显示一个文件

使用VueJs和Laravel上传多个文件

使用ruby和sinatra上传多个文件

仅上传最后一个文件(Azure Blob)

Dropzone JS仅上传一个文件

POST要求每个请求仅上传一个文件

如何使用另一个网站在一个网站上上传文件

使用Symfony2和一个简单的表格上传文件

使用Vue和Laravel上传文件

分别选择多个文件并使用PHP上传

使用php上传一个xlsx文件到mysql,并显示所有值的额外字符

如何使用Retrofit 2和php作为后端在一个请求中上传多个图像?