1

我在updating products使用来自服务器的现有文件添加更多文件时遇到问题vueDropzone。首先，我添加多个文件没有问题，但是当我编辑产品然后添加更多文件时，甚至只是我只更新Product Name了文件而不更新文件。它从 Laravel 验证器向我抛出了一个错误。

顺便说一句，我正在使用Vue.js并且我只使用一种Add/Update产品方法。

这是我的 vuedropzone 组件。

<vue-dropzone 
    ref="product_images" 
    id="dropzone" 
    :options="dropzoneOptions" 
    @vdropzone-success-multiple="dzAfterComplete" 
    @vdropzone-removed-file="dzAfterRemove" 
    @vdropzone-max-files-reached="dzMaxFiles" 
    @vdropzone-error-multiple="dzComplete"
    @vdropzone-file-added-manually="dzThumbnil">
</vue-dropzone>

这是我的submitProduct()方法。

submitProduct() {
    let images = this.$refs.product_images.getAcceptedFiles();

    let formData = new FormData();
    if ( images.length > 0 ) {
        for ( var i = 0; i < images.length; i++ ) {
            let file = images[i];
            formData.append('images[' + i + ']', file);
        }
    }
    else {
        formData.append('images[]', '');
    }
    if (this.product.id)
        formData.append('id', this.product.id); // update if it has ID

    
    // axios.post()
}

还有我的editProduct方法。

editProduct(data) {
    this.$refs.product_images.removeAllFiles(); // empty dropzone first
    
    for ( var i = 0; i < data.images.length; i++ ) {
        let file = { 
            size: data.images[i].size, 
            name: data.images[i].name, 
            type: data.images[i].type,
            accepted: true
        };
        let url = '{{ url('/') }}/' + data.images[i].path;
        this.$refs.product_images.manuallyAddFile(file, url);
    }
    $('#productModal').modal('show');
},

现有文件显示在 dropzone 区域，但是，当我提交表单时，Laravel 验证器会抛出错误，因为图像为空。但是当我在console.log()提交表单之前签入时它有文件。

public function storeProduct(Request $request)
{   
    $this->validate($request, [
        'images.*'  => 'mimes:jpeg,jpg,png|required|max:2048',
    ]);

    // when I check the file
    return response()->json($request->file('images')); 

    // it's return images: null
}

任何帮助将非常感激。希望是明确的说法。

干杯!

4

0 回答 0