laravel-vue多个图像不存储在数据库中

Question

我正在尝试上传多个图像。选择图像后，当我提交表格时，我得到了 -

“ {消息：“给定数据无效。”，错误：{媒体：[“需要媒体字段。”] }}“

看起来“媒体[]”字段没有得到该值。但是我在媒体数组中获得了数据（请参阅图像）

如何解决此

我的productController代码 -

`public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required|max:255',
            'price' => 'required|integer',
        
        'media'=>'required',

    ]);


    $product = Product::create([
        'title' => $request->title,
        'price' => $request->price,
        
    ]);

    if ($request->image) {
        $imageName = time() . '_' . uniqid() . '.' . $request->image->getClientOriginalExtension();
        $request->image->move(public_path('storage/product'), $imageName);
        $product->image = '/storage/product/' . $imageName;
        $product->save();
    }

    foreach($request->media as $image){
        $from = public_path('tmp/uploads/'.$image);
        $to = public_path('product_images/'.$image);

        File::move($from, $to);
        $product->images()->create([
          'name' => $image,
        ]);
      }
  

    return response()->json($product, 200);
}`

我的ImageController代码是 -

public function store(Request $request){

    $path = public_path('tmp/uploads');

    if (!file_exists($path)) {
      mkdir($path, 0777, true);
    }

    $file = $request->file('image');

    $name = uniqid() . '_' . trim($file->getClientOriginalName());

    $file->move($path, $name);

    return ['name'=>$name];
  }

  public function getImages(Product $product){
    $images = $product->images;
    return ['media'=>$images];
  }

api.php--

Route::resource('product','ProductController');
Route::post('/upload', [ImageController::class, 'store'])->name('upload');
Route::get('/media/{product}', [ImageController::class, 'getImages'])->name('product.images');

php---------php-------

import axios from 'axios'
export default {
    data(){
        return{
            media:[],
            loading:false,
        }
    },
    methods:{
        async fileChange(event){
            this.loading=true
            let files = event.target.files
            for(var i=0; i < files.length; i++){
                let formData = new FormData
                let url = URL.createObjectURL(files[i])
                formData.set('image', files[i])
                const {data} = await axios.post(this.server, formData)
                
            this.media.push({url:url, name:data.name, size:files[i].size, type:files[i].type});
                
                
        }
        this.loading=false
        this.media_emit()
    },
    remove(index){
        this.media.splice(index,1)
        this.media_emit()
    },
    media_emit(){
        this.$emit('media',this.media)
    }
},
mounted() {
    this.$emit('media',this.media)
},

Answer 1

您可以尝试：

$this->validate($request, [
    'title' => 'required|max:255',
    'price' => 'required|integer',        
    'media.*' => 'required|mimes:jpg,jpeg,png|max:20000']);

它还验证它是具有这些扩展名的图像。