Question

我想将带有vue组件的图像文件上传到laravel控制器。我单击提交按钮的名称/说明/地址被保存但图像名称未保存时发生我的问题

我想将图像名称保存到数据库中，但是if（$ request-> hasFile（'id_image'））始终返回false

您能告诉我有关解决此解决方案的语法吗？

这是create.vue

       <form action="/listorgs" enctype="multipart/form-data">
          <div class="form-group">
            <label>name_org:</label>
            <input type="text" class="form-control" v-model="org.name_org">
          </div>
          <div class="form-group">
            <label>picture:</label>
            <input
              type="file"
              @change="onFileChange"
              name="name_image"
              id="id_image"
              class="inputFile"
            >
          </div>
          <div class="form-group">
            <label>description:</label>
            <textarea
              class="form-control mb-2"
              rows="5"
              v-model="org.description"
            ></textarea>
          </div>
          <div class="form-group">
            <label>address:</label>
            <input type="text" class="form-control" v-model="org.address">
          </div>
          <div class="form-group">
            <button class="btn btn-primary" v-on:click="addNewOrg()">Save</button>
          </div>
        </form>

在导出默认设置中

data() {
    return {
      org: {
        name_org: "",
        description: "",
        address: "",
        image: ""
      }
    };
  },
  methods: {
    addNewOrg() {
      axios
        .post("/api/listorgs", this.org)
        .then(response => {
          console.log(response.data);
          if (response.data.etat) {
            this.org = {
              name_org: response.data.etat.name_org,
              description: response.data.etat.description,
              address: response.data.etat.address,
              picture: response.data.etat.image
            };
          }
        })
        .catch(error => {
          console.log("errors: ", error);
        });
        console.log(this.image);
    },
    onFileChange(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.createImage(files[0]);
    },
    createImage(file) {
      let reader = new FileReader();
      reader.onload = e => {
        this.org.image = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }

这是我的控制人

$listorg=new ListOrg();
$listorg->name_org=$request->get('name_org');
$listorg->description=$request->get('description');
$listorg->address=$request->get('address');
if($request->hasFile('name_image')){
    $listorg->picture= $request->image->store('images');
}
$listorg->save();
return response()->json($listorg);

说

Answer 1

您的JavaScript引用了一个“图像”字段，而您的字段名为“ id_image”？

对不起，我无法发表评论（评分），但也许尝试坚持某种惯例？

尝试仅在控制器方法中转储并处理整个请求。

可能会为您提供有关错误之处的很好线索。

Answer 2

您混淆了FORM POST的3种不同方法。让我澄清一下：

如果要使用axios，请更改表单并删除action和enctype，以免混淆您是在执行AJAX POST，而不是常规的FORM POST。
确定是否要尝试以base64编码或二进制形式检索文件。看起来您想执行二进制操作，因此摆脱了base64冗余代码。并将文件输入直接与v-model绑定。
好的，现在我们可以确定您要执行二进制操作，因为您的服务器端代码具有此$request->hasFile('name_image')，您需要将其提交为FormData对象。

因此，您的代码如下所示：

<!-- point #1, we made it clear that it is an AJAX submit 
by handling the submit event. -->
     <form @submit.prevent="addNewOrg">
          <div class="form-group">
            <label>name_org:</label>
            <input type="text" class="form-control" v-model="org.name_org">
          </div>
          <div class="form-group">
            <label>picture:</label>
<!-- remove change event handling and bind 
the file directly to the image property -->
            <input
              type="file"
              v-model="org.image"
              class="inputFile"
            >
          </div>
          <div class="form-group">
            <label>description:</label>
            <textarea
              class="form-control mb-2"
              rows="5"
              v-model="org.description"
            ></textarea>
          </div>
          <div class="form-group">
            <label>address:</label>
            <input type="text" class="form-control" v-model="org.address">
          </div>
          <div class="form-group">
<!-- point #1, change the button type to submit button.  
The form and submit button combination also has a 
side-affect/benefit of auto-submit if user hit 
the enter button on the form. -->
            <button class="btn btn-primary" type="submit">Save</button>
          </div>
        </form>

data() {
    return {
      org: {
        name_org: "",
        description: "",
        address: "",
        image: null
      }
    };
  },
  methods: {
    addNewOrg() {
      // point #2, to do binary data upload 
      // you need to use FormData
      var fd = new FormData();
      for (var key in this.org) {
        fd.append(key, this.org[key]);
      }

      axios
        .post("/api/listorgs", fd)
        .then(response => {
          console.log(response.data);
          if (response.data.etat) {
            this.org = {
              name_org: response.data.etat.name_org,
              description: response.data.etat.description,
              address: response.data.etat.address,
              picture: response.data.etat.image
            };
          }
        })
        .catch(error => {
          console.log("errors: ", error);
        });
        console.log(this.image);
    }

/* Since you're doing binary submit, you don't need 
all that base64 image data url codes, unless you 
want to do something else like preview image 
canvas before upload or something 
similar. */

然后是服务器端代码：

$listorg=new ListOrg();
$listorg->name_org=$request->get('name_org');
$listorg->description=$request->get('description');
$listorg->address=$request->get('address');

/* you're submitting it as image with ajax
 not a regular form post so you don't want 
to use the name of the input.  That's why 
I removed the input name in the html 
above to avoid confusion */

if($request->hasFile('image')){
    $listorg->picture= $request->image->store('images');
}
$listorg->save();
return response()->json($listorg);

Answer 3

$ listorg->图片。

如果我是对的，则从控制器返回的数据不具有image属性。尝试console.log（this.picture）;

如何使用vue组件和laravel控制器上传文件[Axios]

3 个答案: