May 26, 2020
0
Level 1
File Upload Problem Vue.js
Hello , sorry for my english.
I'm trying to upload multiple image on a form and other string element.
I did it like this :
<div v-for="(image, index) in form.images" :key="index">
<h3>Nouvelle image {{ index+1 }}</h3>
<div class="md-layout md-gutter">
<div class="md-layout-item">
<md-field>
<label>Votre image</label>
<md-file :name="`form.images[${index}][file_path]`" v-model="image.file_path" accept="image/*" @change="fileCahnged"/>
</md-field>
</div>
<div class="md-layout-item">
<div class="md-layout md-gutter">
<div class="md-layout-item md-small-size-100">
<md-field>
<label for="email">Nom</label>
<md-input :name="`form.images[${index}][name]`" autocomplete="email" v-model="image.name" :disabled="sending" />
</md-field>
</div>
<div class="md-layout-item">
<md-field>
<label for="email">Description</label>
<md-input :name="`form.images[${index}][description]`" autocomplete="email" v-model="image.description" :disabled="sending" />
</md-field>
</div>
</div>
</div>
</div>
</div>
<div>
<md-button class="md-raised" @click="addImage()">Ajouter une image</md-button>
</div>
It's dynamic so I need to do it like this and my script is like that :
export default {
name: 'CreateWorksComponent',
data: () => ({
allEntreprise: [],
form: {
name: null,
end_date: null,
section: [],
entreprise_id: null,
description: null,
create_date: null,
images: [],
},
files: [],
sending: false,
selectedEnt: {},
selected: false,
menuVisible: false,
apiLoaded: false,
entSearch: '',
disabledDates: date => {
const day = date.getDay()
return day === 6 || day === 0
}
}),
methods:
{
fileCahnged(e)
{
console.log(e.target);
this.files.push(e.target.files[0]);
},
addImage()
{
this.form.images.push({
name : '',
description : '',
file_path : '',
})
},
sendForm()
{
this.sending = true;
this.form.entreprise_id = this.selectedEnt.id;
let formData = new FormData();
formData.append('form', this.form);
$.each(this.form.files, function(key, image) {
formData.append(`images[${key}]`, image);
});
axios.post('/works/store', formData,{ headers: {'Content-Type': 'multipart/form-data'}})
.then((response) => {
$('#success').html('Affaire créée');
this.sending = false;
})
},
}
Here it's look all ok but it's not working. It only send the part named form and it's not sending the images part. If I check what's send it's : form: [object Object]
And then on my php I can't do anything with this.
I try this but nothing is working :
dump($request);
$inputData = $request->form;//it's [Object object]
$images = $request->images; // it's null
$work = new Work();
$work->name = $inputData['name'];
My dump show me that :
Illuminate\Http\Request {#43
#json: null
#convertedFiles: null
#userResolver: Closure($guard = null) {#235
class: "Illuminate\Auth\AuthServiceProvider"
this: Illuminate\Auth\AuthServiceProvider {#52 …}
use: {
$app: Illuminate\Foundation\Application {#2 …}
}
file: "C:\laragon\www\hav-clients-manager\vendor\laravel\framework\src\Illuminate\Auth\AuthServiceProvider.php"
line: "105 to 107"
}
#routeResolver: Closure() {#244
class: "Illuminate\Routing\Router"
this: Illuminate\Routing\Router {#26 …}
use: {
$route: Illuminate\Routing\Route {#224 …}
}
file: "C:\laragon\www\hav-clients-manager\vendor\laravel\framework\src\Illuminate\Routing\Router.php"
line: "655 to 657"
}
+attributes: Symfony\Component\HttpFoundation\ParameterBag {#45
#parameters: []
}
+request: Symfony\Component\HttpFoundation\ParameterBag {#44
#parameters: array:1 [
"form" => "[object Object]"
]
}
+query: Symfony\Component\HttpFoundation\ParameterBag {#51
#parameters: []
}
+server: Symfony\Component\HttpFoundation\ServerBag {#47
#parameters: array:42 [
"REDIRECT_STATUS" => "200"
"HTTP_HOST" => "hav-clients-manager.test"
"HTTP_CONNECTION" => "keep-alive"
"CONTENT_LENGTH" => "150"
"HTTP_ACCEPT" => "application/json, text/plain, */*"
"HTTP_ORIGIN" => "http://hav-clients-manager.test"
"HTTP_X_XSRF_TOKEN" => "eyJpdiI6InNocVc4V2d5MUovWldIK0lzbUVDZHc9PSIsInZhbHVlIjoiTFIyakZ5Y21zZnRvbXBEbGd6RFBWSS9tN2R0eFc5WFgwZHNRN3BmMkJDWWFPaDU5ekY1aE9qdU5QbkgwV3VxMiIsIm1hYyI6ImMxNzliMjdhZWMzMWFkYWEwNGI3NmE3MjJhNGU0ZjgzZTNjZmZlODc5ZDY0M2ViMDcxODA1ZTM2YmU5NGM3YzUifQ=="
"HTTP_X_REQUESTED_WITH" => "XMLHttpRequest"
"HTTP_USER_AGENT" => "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.134 Safari/537.36 Vivaldi/2.5.1525.41"
"CONTENT_TYPE" => "multipart/form-data; boundary=----WebKitFormBoundarylAL6I8xnm2nNhmnN"
"HTTP_REFERER" => "http://hav-clients-manager.test/works/create"
"HTTP_ACCEPT_ENCODING" => "gzip, deflate"
"HTTP_ACCEPT_LANGUAGE" => "fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7"
"HTTP_COOKIE" => "XSRF-TOKEN=eyJpdiI6InNocVc4V2d5MUovWldIK0lzbUVDZHc9PSIsInZhbHVlIjoiTFIyakZ5Y21zZnRvbXBEbGd6RFBWSS9tN2R0eFc5WFgwZHNRN3BmMkJDWWFPaDU5ekY1aE9qdU5QbkgwV3VxMiIsIm1hYyI6ImMxNzliMjdhZWMzMWFkYWEwNGI3NmE3MjJhNGU0ZjgzZTNjZmZlODc5ZDY0M2ViMDcxODA1ZTM2YmU5NGM3YzUifQ%3D%3D; hav_clientsmanager_session=eyJpdiI6InNWTi9uRlg3eXAyWmVkdXR2TzlSbWc9PSIsInZhbHVlIjoidnpKclVnVE9Vam1wcXpsN3huT2k2YXkrdnRQRnBrdmZHRHk3UHN4Uy9IdUlscGJKMWNQUmhEVGNVSGttdnNjYyIsIm1hYyI6IjhlNDc4Y2Y1YTQ3MThjNDU3MGU4NjcyOTYxYzBlZDEyNTVhYzlkNGM1NjMwNTM4NDI3NDg4NTk0ZDUzMmEwMWQifQ%3D%3D"
"PATH" => "C:\Python27\;C:\Python27\Scripts;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\GtkSharp.12\bin;C:\Users\Justin-\AppData\Local\Microsoft\WindowsApps;C:\adb;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\PuTTY\;E:\php-7.2.12-Win32-VC15-x64;C:\composer;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\Program Files\nodejs\;C:\ProgramData\chocolatey\bin;C:\Program Files (x86)\Yarn\bin\;C:\Program Files\Git\cmd;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\dotnet\;C:\Program Files\Calibre2\;C:\Users\Justin-\AppData\Local\Programs\Python\Python37\Scripts\;C:\Users\Justin-\AppData\Local\Programs\Python\Python37\;C:\Users\Justin-\AppData\Local\Microsoft\WindowsApps;C:\Users\Justin-\AppData\Local\Programs\Python\Python37\python.exe;C:\Users\Justin-\AppData\Roaming\Dashlane.0.3.11395\bin\Firefox_Extension\{442718d9-475e-452a-b3e1-fb1ee16b8e9f}\components;C:\Users\Justin-\AppData\Roaming\Dashlane.0.3.11395\ucrt;C:\Users\Justin-\AppData\Roaming\Dashlane.0.3.11395\bin\Qt;C:\Users\Justin-\AppData\Roaming\Dashlane.0.3.11395\bin\Ssl;C:\Users\Justin-\AppData\Local\atom\bin;C:\Users\Justin-\AppData\Roaming\Composer\vendor\bin;C:\Users\Justin-\AppData\Roaming\Dashlane.1907.0.17833\bin\Firefox_Extension\{442718d9-475e-452a-b3e1-fb1ee16b8e9f}\components;C:\Users\Justin-\AppData\Roaming\Dashlane.1907.0.17833\ucrt;C:\Users\Justin-\AppData\Roaming\Dashlane.1907.0.17833\bin\Qt;C:\Users\Justin-\AppData\Roaming\Dashlane.1907.0.17833\bin\Ssl;C:;%USERPROFILE%\AppData\Local\Microsoft\WindowsApps;"
"SystemRoot" => "C:\WINDOWS"
"COMSPEC" => "C:\WINDOWS\system32\cmd.exe"
"PATHEXT" => ".COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC"
"WINDIR" => "C:\WINDOWS"
"SERVER_SIGNATURE" => ""
"SERVER_SOFTWARE" => "Apache/2.4.35 (Win64) OpenSSL/1.1.0i PHP/7.2.11"
"SERVER_NAME" => "hav-clients-manager.test"
"SERVER_ADDR" => "127.0.0.1"
"SERVER_PORT" => "80"
"REMOTE_ADDR" => "127.0.0.1"
"DOCUMENT_ROOT" => "C:/laragon/www/hav-clients-manager/public/"
"REQUEST_SCHEME" => "http"
"CONTEXT_PREFIX" => ""
"CONTEXT_DOCUMENT_ROOT" => "C:/laragon/www/hav-clients-manager/public/"
"SERVER_ADMIN" => "[email protected]"
"SCRIPT_FILENAME" => "C:/laragon/www/hav-clients-manager/public/index.php"
"REMOTE_PORT" => "59747"
"REDIRECT_URL" => "/works/store"
"GATEWAY_INTERFACE" => "CGI/1.1"
"SERVER_PROTOCOL" => "HTTP/1.1"
"REQUEST_METHOD" => "POST"
"QUERY_STRING" => ""
"REQUEST_URI" => "/works/store"
"SCRIPT_NAME" => "/index.php"
"PHP_SELF" => "/index.php"
"REQUEST_TIME_FLOAT" => 1590482052.338
"REQUEST_TIME" => 1590482052
]
}
+files: Symfony\Component\HttpFoundation\FileBag {#48
#parameters: []
}
+cookies: Symfony\Component\HttpFoundation\ParameterBag {#46
#parameters: array:2 [
"XSRF-TOKEN" => "W7exQQvtbuC6bHuGMupkuZiFr7sVC0ZfKxtwlx4r"
"hav_clientsmanager_session" => "HDj91SREunJzGk7iSZ3rhRs5GKtFH6BaThqwwbwD"
]
}
+headers: Symfony\Component\HttpFoundation\HeaderBag {#49
#headers: array:13 [
"host" => array:1 [
0 => "hav-clients-manager.test"
]
"connection" => array:1 [
0 => "keep-alive"
]
"content-length" => array:1 [
0 => "150"
]
"accept" => array:1 [
0 => "application/json, text/plain, */*"
]
"origin" => array:1 [
0 => "http://hav-clients-manager.test"
]
"x-xsrf-token" => array:1 [
0 => "eyJpdiI6InNocVc4V2d5MUovWldIK0lzbUVDZHc9PSIsInZhbHVlIjoiTFIyakZ5Y21zZnRvbXBEbGd6RFBWSS9tN2R0eFc5WFgwZHNRN3BmMkJDWWFPaDU5ekY1aE9qdU5QbkgwV3VxMiIsIm1hYyI6ImMxNzliMjdhZWMzMWFkYWEwNGI3NmE3MjJhNGU0ZjgzZTNjZmZlODc5ZDY0M2ViMDcxODA1ZTM2YmU5NGM3YzUifQ=="
]
"x-requested-with" => array:1 [
0 => "XMLHttpRequest"
]
"user-agent" => array:1 [
0 => "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.134 Safari/537.36 Vivaldi/2.5.1525.41"
]
"content-type" => array:1 [
0 => "multipart/form-data; boundary=----WebKitFormBoundarylAL6I8xnm2nNhmnN"
]
"referer" => array:1 [
0 => "http://hav-clients-manager.test/works/create"
]
"accept-encoding" => array:1 [
0 => "gzip, deflate"
]
"accept-language" => array:1 [
0 => "fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7"
]
"cookie" => array:1 [
0 => "XSRF-TOKEN=eyJpdiI6InNocVc4V2d5MUovWldIK0lzbUVDZHc9PSIsInZhbHVlIjoiTFIyakZ5Y21zZnRvbXBEbGd6RFBWSS9tN2R0eFc5WFgwZHNRN3BmMkJDWWFPaDU5ekY1aE9qdU5QbkgwV3VxMiIsIm1hYyI6ImMxNzliMjdhZWMzMWFkYWEwNGI3NmE3MjJhNGU0ZjgzZTNjZmZlODc5ZDY0M2ViMDcxODA1ZTM2YmU5NGM3YzUifQ%3D%3D; hav_clientsmanager_session=eyJpdiI6InNWTi9uRlg3eXAyWmVkdXR2TzlSbWc9PSIsInZhbHVlIjoidnpKclVnVE9Vam1wcXpsN3huT2k2YXkrdnRQRnBrdmZHRHk3UHN4Uy9IdUlscGJKMWNQUmhEVGNVSGttdnNjYyIsIm1hYyI6IjhlNDc4Y2Y1YTQ3MThjNDU3MGU4NjcyOTYxYzBlZDEyNTVhYzlkNGM1NjMwNTM4NDI3NDg4NTk0ZDUzMmEwMWQifQ%3D%3D"
]
]
#cacheControl: []
}
#content: null
#languages: null
#charsets: null
#encodings: null
#acceptableContentTypes: null
#pathInfo: "/works/store"
#requestUri: "/works/store"
#baseUrl: ""
#basePath: null
#method: "POST"
#format: null
#session: Illuminate\Session\Store {#273
#id: "HDj91SREunJzGk7iSZ3rhRs5GKtFH6BaThqwwbwD"
#name: "hav_clientsmanager_session"
#attributes: array:3 [
"_token" => "W7exQQvtbuC6bHuGMupkuZiFr7sVC0ZfKxtwlx4r"
"_previous" => array:1 [
"url" => "http://hav-clients-manager.test/works/create"
]
"_flash" => array:2 [
"old" => []
"new" => []
]
]
#handler: Illuminate\Session\FileSessionHandler {#272
#files: Illuminate\Filesystem\Filesystem {#148}
#path: "C:\laragon\www\hav-clients-manager\storage\framework/sessions"
#minutes: "120"
}
#started: true
}
#locale: null
#defaultLocale: "en"
-preferredFormat: null
-isHostValid: true
-isForwardedValid: true
basePath: ""
format: "html"
}
I hope someone can help me and very sorry for my language level ......
Please or to participate in this conversation.