时间戳

首页 > 解决方案 > 使用 Vue axios 将表单数据和参数传递给 Laravel 控制器

laravel - 使用 Vue axios 将表单数据和参数传递给 Laravel 控制器

问题描述

我正在尝试向控制器发送文件输入和另一个参数以上传文件。

对于图像/文件上传，我使用“vue-upload-multiple-image”插件。

            <vue-upload-multiple-image
              dragText="Drop your photos here"
              browseText="(or click to upload)"
              primaryText="Default"
              markIsPrimaryText="Set as default"
              popupText="This photo will be displayed as default"
              @upload-success="uploadImageSuccess"
              @before-remove="beforeRemove"
              />

在 Vue 方法中：

 uploadImageSuccess(formData, index, fileList) {
  const config = {
    headers: {
      'content-type': 'multipart/form-data',
    }
  }

  this.$store.dispatch('listings/addPhotos', {
    'imageData': formData,
    'config': config
  })
},

在 vuex 商店中，我有以下内容：

  async addPhotos ({ commit }, listing) {
    await axios.post('/api/addPhotos', listing.imageData, listing.config)
      .then((res) => {
        console.log(res.data)
      }).catch((err) => {
        console.log(err)
      })
  },

在 Laravel 控制器中：

public function addPhotos(Request $request)
  {
      $imgpath = public_path('images');
      $fileName = $request->file->getClientOriginalName();
      $newName = time() . '_'.$fileName.'.' . $request->file->getClientOriginalExtension();
      $request->file->move($imgpath, $newName);

      $post['name'] = $file_name;
      //$post['paired'] = 'slug';
      //$post['listing_id'] = 0;
      $result = ListingPhoto::insertGetId($post);
  }

这工作正常。图像文件被上传，数据也被上传到数据库中。

我不知道如何使用另一个参数，以便我可以在数据库的“配对”字段中添加一些数据。

现在可以说我发送“formData”。是否可以发送 formData 和 slug？

像这样的东西：

this.$store.dispatch('listings/addPhotos', {
    'imageData': formData,
    'slug': slug,
    'config': config
  })

或者也许将其添加到 formdata 中，如下所示：

let formDataN = new FormData();
formDataN.append('imgfile', formData);
formDataN.append('slug', slug);

我尝试了两种方法，但它返回一个错误。当我发送“formDataN”（其中包含带有图像和 slug 的正常 formData）时，它停止工作。例如，当我尝试 getClientOriginalName 时，它​​要么显示“在 null 上调用成员函数 getClientOriginalName()”，要么显示“尝试获取非对象的属性‘文件’”

谁能帮我这个？关于如何做到这一点的任何建议？我只想像往常一样使用formData，但还发送另一个参数“slug”以添加到数据库表中。

编辑：我找到了一种方法，但我觉得这不是最好的解决方案。无论如何，对于任何感兴趣的人：

uploadImageSuccess(formData, index, fileList) {
  const config = {
    headers: {
      'content-type': 'multipart/form-data',
    }
  }

  let slug = 'slug-uid-'+this.user.id

  this.$store.dispatch('listings/addPhotos', {
    'imageData': formData,
    'slug': slug,
    'config': config
  })
},

在 vuex 商店中：

  async addPhotos ({ commit }, listing) {
    await axios.post(`/api/addPhotos/${listing.slug}`, listing.imageData, listing.config)
      .then((res) => {
        console.log(res.data)
      }).catch((err) => {
        console.log(err)
      })
  },

在 API 调用中：

Route::post('addPhotos/{slug}', 'ListingController@addPhotos');

在控制器中：

public function addPhotos($slug, Request $request)
  {
    ...

EDIT2：我刚刚意识到我正在使用的 vue 上传图片插件，它已经创建了一个“formData”，所以我不必在我的 Vue 代码中创建一个新的。所以我需要做的就是附加我想要的任何其他参数。最终解决方案：

uploadImageSuccess(formData, index, fileList) {    
  let slug = 'slug-uid-'+this.user.id
  formData.append("slug", slug);

  this.$store.dispatch('listings/addPhotos', formData)
},

为了检索实际的图像文件，您使用“文件”（这是在 vue-upload-multiple-image 插件中定义的方式）。在 laravel 控制器中：

$request->file('file')->getClientOriginalName();
$request->slug;

标签： laravelvue.jsaxios

解决方案

如果有帮助，试试这个

而是像这样将 formdata 和 slug 发送到 vuex 将 slug 附加到 formData

var formData = new FormData();
formData.append("image", image); // this should be your image
formData.append("slug", slug); // it is the slug

this.$store.dispatch('listings/addPhotos', formData)

在 vuex 中：

  async addPhotos ({ commit }, formData) {
    await axios.post('/api/addPhotos', formData, {'content-type': 'multipart/form-data'})
      .then((res) => {
        console.log(res.data)
      }).catch((err) => {
        console.log(err)
      })
  },

在 Laravel 中：

public function addPhotos(Request $request)
  {
      $img = $request->file('image');
      $slug = $request->slug;
  }

推荐阅读