Question

好吧，我正在尝试将图像文件上传到带有响应的laravel服务器，但这似乎不起作用。我尝试了刀片模板及其工作。现在做出反应，它没有检测到file，我也正在将redux与axios一起用于api的呼叫，这是我的代码：

创建后操作：

 export function add_post(data) {
    return function(dispatch) {
      const formdata = new FormData();
      formdata .append("file",data.file);
      formdata .file = formdata;
      return axios.post("/posts",data,{
       headers:{
        'content-type': 'multipart/form-data',
       }
      })
        .then((res) => {
          console.log(res.data);
        dispatch(fetch_posts_data());
        dispatch(post_notify({
          message:"Post Created!",
          type:"success"
        }))
             setTimeout(function(){
            dispatch(close_notification())
          },2000)
      })
      .catch((err)=>console.log(err));
    };
  }

createPost组件：

    import React, { useState } from 'react'
import { Formik,Field} from 'formik';
import * as Yup from 'yup';
import 'react-summernote/dist/react-summernote.css';
import {add_post} from "../store/thunks"
import {useDispatch} from "react-redux"

const FormSchema = Yup.object().shape({
    title: Yup.string()
      .min(2, 'Too Short!')
      .required('Required'),
    body: Yup.string()
      .min(10, 'Too Short!')
      .required('Required'),
  });

const CreatePost = (props)=>{
  const dispatch  = useDispatch();
  const [file,setfile] = useState(null)
  const addimage = e=>{
    setfile(e.target.files[0])
  }
    return(
        <Formik
        validationSchema={FormSchema}
               initialValues={{
        title: '',
        body: ''
      }}
        onSubmit={values => {
         dispatch(add_post({...values,file:file}));
         props.history.push("/")
      }}
      render = {({ handleSubmit}) => (
        <form onSubmit={handleSubmit}>
        <div className="form-group mt-2">
        <Field name="title" placeholder="title" type={'text'} component={customInputForm}/>
      </div>
      <div className="form-group">
        <label htmlFor="#body">body</label>
        <Field name="body"  component={customTextarea}/>
      </div>
      <div className="form-group mt-2">
          <label >Image</label>
          <input type="file"
            className="form-control" id='file' accept="image/*" onChange={addimage}/>
        </div> 
    <div  className="d-flex">
    <button type="submit" className="btn btn-primary  ml-auto">Add</button>
    </div>
                  </form>   )
                    }/>

    )
}
export const customInputForm = ({field, form: {touched, errors}, ...props}) => (
  <>
   <label>{props.name}</label>
      <input
      className={`form-control ${!!(touched[field.name] && errors[field.name])?"is-invalid":""}`}
          {...field}
          {...props} />
      {touched[field.name] && errors[field.name] && <div className="invalid-feedback d-block">{errors[field.name]}</div>}
      </>
);
export const customTextarea = ({field, form: {touched, errors}, ...props}) => (
  <>
     <label>{props.name}</label>
      <textarea  style={{height:300}}
      className={`form-control ${!!(touched[field.name] && errors[field.name])?"is-invalid":""}`}
      name={props.name}
          {...field}
          {...props} ></textarea>
      {touched[field.name] && errors[field.name] && <div className="invalid-feedback d-block">{errors[field.name]}</div>}
      </>
);

和用于服务器控制器：

public function store(Request $request)
{
    if($request->hasFile("file")){
        $filenameWithExt = $request->file("file")->getClientOriginalName();
        $filename= pathinfo($filenameWithExt,PATHINFO_FILENAME);
        $extension = $request->file("file")->getClientOriginalExtension();
        $fileNameToStore = $filename."_".time().".".$extension;
        $path= $request->file("file")->storeAs("public/images",$fileNameToStore);
    }
    else{
        $fileNameToStore = "no-image.svg";
        $path="public/images/no-image.svg";
    };
    $post = new Post;
    $post->title= $request->title;
    $post->body= $request->body;
    $post->image_name= $fileNameToStore;
    $post->image_path = $path;
    $post->save();

}

服务器总是将$fileNameToStore设置为no-image.svg。这意味着没有检测到文件，我尝试了很多建议的解决方案，但没有任何效果。请希望对此有解决方案，谢谢！

Answer 1

尝试一下：

import { Directive, ElementRef, Renderer2, OnInit, AfterViewChecked } from         　　'@angular/core';
@Directive({
selector: '[emptyRow]'
})
export class EmptyRowDirective implements OnInit, AfterViewChecked {
    textElement: any;
    actionElement : any;
    constructor(private renderer: Renderer2, 
        private hostElement: ElementRef) {
    }

ngOnInit() {
    this.hostElement.nativeElement.getElementsByClassName('datatable-body')[0].addEventListener("scroll", event => {
        this.hostElement.nativeElement.getElementsByClassName('datatable-header')[0].scrollLeft = event.srcElement.scrollLeft;
    });
}

ngAfterViewChecked(){
    if (this.hostElement.nativeElement.getElementsByClassName('empty-row').length != 0){
 　　　this.hostElement.nativeElement.getElementsByClassName('empty-row')[0].style.width = this.hostElement.nativeElement.getElementsByClassName('datatable-row-center')[0].style.width;
　　}
}

我希望这会有所帮助。

反应上传文件到laravel服务器错误

1 个答案: