对不起，我都在使用vue-dropzone，但是我有一个问题，我无法发送多个文件，而我的laravel驱动程序无法在文件中使用foreach不能识别它，并且在php 7.2中也不适合我有一个问题，我不知道为什么要感谢您的帮助，因为我已经在寻找使用vue的多个档案，我不知道是否使用其他方法，但是我仍然给出相同的错误，文件的称呼是什么计数laravel和php 7.2，因为我找不到关于此的解决方案
<template>
<div class="">
<div class="list-traffic">
<ul v-for="file in fileproject" :key="file.id" class="list-group">
<li class="list-group-item">{{file.id}}_{{file.typename}}--{{file.project_id}} <a class="badge label-danger" v-on:click="deleteFileproject(file)" ><i class="fa fa-trash-o" ></i></a><i @click.prevent="downloadfileproject(file)" class="btn fa fa-cloud-download"></i></li>
</ul>
</div>
<vue-dropzone ref="myVueDropzone" id="dropzone" @vdropzone-files-added="startUploading" v-on:vdropzone-sending="postFileproject" :options="dropzoneOptions"></vue-dropzone>
</div>
</template>
<script>
import axios from 'axios'
import draggable from 'vuedraggable'
import Swal from 'sweetalert2'
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
export default {
props:['project','name_project'],
name: 'filesprojects-component',
components: {
vueDropzone: vue2Dropzone
},
data(){
return{
type_name:[],
attachments:[],
name_type:'',
fileproject:[],
dropzoneOptions: {
url: '/api/postfileproject',
dictDefaultMessage: '<i class="fa fa-folder-open-o position-fa-file"><i><br><p class="position-text-file">SUELTA LOS ARCHIVOS AQUI</p>',
dictRemoveFile: "Eliminar archivo",
uploadMultiple: true,
addRemoveLinks: true,
parallelUploads: 1, //Cuanto archivos subir al mismo tiempo
uploadMultiple: false,
maxFilesize: 5, //Maximo Tama�o del archivo expresado en mg
paramName: "file",//Nombre con el que se envia el archivo a nivel de parametro
createImageThumbnails: true,
maxThumbnailFilesize: 10, //Limite para generar imagenes (Previsualizacion)
thumbnailWidth: 154, //Medida de largo de la Previsualizacion
thumbnailHeight: 154,//Medida alto Previsualizacion
filesizeBase: 1000,
maxFiles: 5,//si no es nulo, define cu�ntos archivos se cargaRAN. Si se excede, se llamar� el EVENTO maxfilesexceeded.
params: {}, //Parametros adicionales al formulario de envio ejemplo {tipo:"imagen"}
clickable: true,
ignoreHiddenFiles: true,
acceptedMimeTypes: null,//Ya no se utiliza paso a ser AceptedFiles
autoProcessQueue: true,//True sube las imagenes automaticamente, si es false se tiene que llamar a myDropzone.processQueue(); para subirlas
autoQueue: true,
addRemoveLinks: true,//Habilita la posibilidad de eliminar/cancelar un archivo. Las opciones dictCancelUpload, dictCancelUploadConfirmation y dictRemoveFile se utilizan para la redacci�n.
previewsContainer: null,//define d�nde mostrar las previsualizaciones de archivos. Puede ser un HTMLElement liso o un selector de CSS. El elemento debe tener la estructura correcta para que las vistas previas se muestran correctamente.
capture: null,
init: function() {
this.on("queuecomplete", function (file) {
});
},
headers: { "My-Awesome-Header": "header value" }
}
//csrf: document.head.querySelector('meta[name="csrf-token"]').content
}
},
mounted(){
this.getfileproject()
console.log(this.project)
console.log(this.name_project)
var url = "https://via.placeholder.com/150";
},
computed:{
},
methods:{
startUploading() {
this.type_name = this.$refs.myVueDropzone.getQueuedFiles();
if(this.type_name.length == 0) {
alert("upload ends, redirect or do something")
}
//console.log(this.type_name[0]);
},
onImageChange(e){
//this.type_name = e.target.files[0];
//console.log(this.type_name);
},
// get
getfileproject() {
var url= '/api/v2/showfileproject/'+this.project;
axios.get(url)
.then(response=>{
this.fileproject = response.data;
if(!this.fileproject){
console.log("error en servidor")
}else{
console.log("data",this.fileproject);
}
}).catch(function(error){
console.log(error);
});
},
// envio de todas las preguntas
postFileproject(){
const config = { headers: { 'Content-Type': 'multipart/form-data' } };
let fd = new FormData();
fd.append('typename',this.type_name[0]);
fd.append('project_id',this.project);
fd.append('name_project',this.name_project);
axios.post('/api/postfileproject', fd,config)
.then (response => {
this.errors=[];
console.log(response.data);
if(response.data.error){
this.errorSwal();
}else{
this.timeSwal();
this.getfileproject();
}
}).catch (error => {
console.log(error.response)
});
},
deleteFileproject(file){
const swalWithBootstrapButtons = Swal.mixin({
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
})
swalWithBootstrapButtons({
title: 'Seguro quieres eliminar el archivo?',
text: "Despues de eliminada no podra recuperarlo ",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Eliminar',
cancelButtonText: 'Cancelar',
reverseButtons: true
}).then((result) => {
if (result.value) {
var url = '/api/destroyfileproject/'+file.id;
axios.delete(url).then(response=>{
this.getfileproject();
swalWithBootstrapButtons(
'Archivo eliminada con exito',
'',
'success'
)
});
} else if (
// Read more about handling dismissals
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons(
'No te preocupes no eliminaste el archivo',
'',
'error'
)
}
})
},
timeSwal(){
let timerInterval
Swal.fire({
title: 'Guardando archivo en el servidor',
html: ' <strong></strong> segundos.',
timer: 2000,
onBeforeOpen: () => {
Swal.showLoading()
timerInterval = setInterval(() => {
Swal.getContent().querySelector('strong')
.textContent = Swal.getTimerLeft()
}, 100)
},
onClose: () => {
clearInterval(timerInterval)
}
}).then((result) => {
if (
// Read more about handling dismissals
result.dismiss === Swal.DismissReason.timer
) {
console.log('tiempo terminado')
}
})
console.log('archivo agregada correctamente')
},
errorSwal(){
Swal(
'el archivo no fue agregado',
'archivos admitidos jpg,jpeg,png,gif,doc,pdf',
'error'
);
},
downloadfileproject(file){
var url = '/api/downloadfileproject/'+ file.project_id;
axios.get(url)
.then (response => {
this.errors=[];
if(response.data.error){
console.log('error');
}else{
window.open(url);
console.log("archivo descargado exito")
}
}).catch (error => {
console.log(error.response)
});
},
}
}
</script>
<style>
</style>
控制器
public function store(Request $request)
{
$id_project = $request['project_id'];
$name_project = $request['name_project'];
$credentials = $request->only(
'typename','project_id'
);
$rules = [
'typename' => 'required|mimes:jpg,jpeg,png,gif,doc,pdf',
'project_id' => 'required|numeric'
];
$validator = Validator::make($credentials, $rules);
if($validator->fails()) {
return response()->json(['success'=> false, 'error'=> $validator->messages()]);
}
$name= null;
if ($request->hasFile('typename')) {
//verificar si la carpeta existe si no creearla
$path = storage_path('/Proyectos/Proyecto/'.$id_project.$name_project.'/documentos/');
if (! File::isDirectory ( $path )) {
File::makeDirectory ( $path , 0777 , true , true );
}
// coloca el archivo en carpeta correspondiente
$file = $request->file('typename');
$name = time().$file->getClientOriginalName();
$file->move(storage_path().'/Proyectos/Proyecto/'.$id_project.$name_project.'/documentos/',$name);
// Guarda la informacion en base datos segun id del proyecto
$project = Fileproject::create([
'typename' => $name,
'project_id' => $request['project_id']
]);
return response()->json($project);
}else{
return "archivo no seleccionado";
}
}