使用Ajax方法通过Kartik FileInput Yii2小部件成功上传后更新图像时图像为空

Question

我有一个表格来更新我的新闻文章，在同一页上有标题、内容和图片上传按钮。图像上传程序使用Kartik FileINput小部件，用于应用Ajax方法的Yii2。

这是我处理AJAX上传的actionUpload

public function actionUpload($id)
{
$model = $this->findModel($id);
$currentImage=$model->image;
if (Yii::$app->request->isAjax) 
    {
    \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;

            $image = $model->uploadImage();
            if($image===false)
                             {
                                  //echo "image instance is empty";
                                  $model->image = $currentImage; 
                            }

            if ($model->validate() && $model->save()) 
             {
                if($image !== false)
                    {
                  $model->image = $image->basename.'.'.$image->extension;
                $image->saveAs('uploads/batam/'.$model->image);
                $model->save(false);
                return \yii\helpers\Json::encode(array("image" => $model->image,
                    ));
                    }
             }
             else
                {echo "validation failed";}
    }
}

这是我表单中的widget文件上传文件（注意：它在活动表单中）

echo FileInput::widget([
    'name' => 'image',
    'options'=>[
        'multiple'=>false
    ],
    'pluginOptions' => [

         'uploadUrl' => Url::to(['news/upload','id'=>$id]),
         'uploadExtraData' => [
            'id'=>$id,
        ],
        'initialPreview'=>[
          Yii::getAlias('@web').'/uploads/batam'.$model->image
        ],
        'initialPreviewAsData'=>true,
        'overwriteInitial'=>false,
        'maxFileSize'=>2800
    ]
]);

这是我的模型规则和上传图像方法

 public function rules()
    {
        return [
            [['title', 'content'], 'required'],
            [['content'], 'string'],
            [['created_at', 'updated_at'], 'safe'],
            [['image'], 'file','skipOnEmpty'=>true, 'extensions'=>'jpg,png,jpeg'],
            [['title'], 'string', 'max' => 255],
        ];
    }

    public function uploadImage() {
        $image = UploadedFile::getInstanceByName('image');
        if (empty($image)) {
            return false;
        }
        return $image;
    }

我这里有两个问题需要帮助：1。验证规则不起作用。我可以上传任何扩展名的文件，并成功上传和更新到数据库2中。图像上传包含在活动表单中，因此在使用AJAX成功上传后，当我按下“更新”按钮时，图像将不会显示。image字段被视为空，因此update按钮的行为就像我更新了一个空图像一样。在我的数据库中，已成功存储了受尊重的新闻id的AJAX上载文件的图像路径，并上载了该文件。如何解决这个问题？事实上，我不介意上传方法没有使用AJAX，而是使用普通的单表单提交方法，使用post，因此省略了uploadAJAX按钮，但根据Kartik纪录片，如果我想使用显示先前存储的图像的小部件，它需要AJAX。

我在StackOverflow等中查看了一些类似的问题，但是他们都有Ajax调用方法中空映像实例的问题（我以前也遇到过同样的问题，但是我在研究之后在Ajax上应用了Formdata），而我在Ajax调用中没有空实例的问题，但正常表单提交上的实例为空。

这是我的行动更新

public function actionUpdate($id)
{
    $model = $this->findModel($id);
$image= UploadedFile::getInstanceByName('image');

 if ($model->load(Yii::$app->request->post()) && $model->save() ){
var_dump($image);exit();

            return $this->redirect(['view', 'id' => $model->id]);
        } else {
            return $this->render('update', [
                'model' => $model,

            ]);
        }
}

提前感谢！

Answer 1

首先，验证器不工作的原因是因为你没有从模型中创建文件输入小部件，你必须这样做，以便你的规则在类模型中工作：

echo $form->field($model, 'image')->widget(FileInput::classname(), [
    'options' => ['accept' => 'image/*'],
]);

然后我不知道你的数据库的结构如何，但我对如何处理图像上传的建议。首先，在与数据库的图像字段分离的类中创建一个公共变量，这个公共图像变量将是在表单上实例化小部件的变量，也是具有规则的变量。这样，当您发布表单时，数据库中的图像字段不会被过度压缩。

因此，当您使用ajax上传时，您也将发送对象的id，并且在upload函数中，一旦设置了所有内容，您将在数据库的image字段中存储路径、图像或其他内容。