在 Laravel 中使用 BootstrapVue 上传文件

Posted 2023-02-16

【中文标题】在 Laravel 中使用 BootstrapVue 上传文件

【英文标题】：Upload File with BootstrapVue in Laravel

【发布时间】：2021-11-12 18:47:04

【问题描述】：

有人知道如何使用 bootstrapVue 文件输入提交文件吗？ 我从 request->all()

得到 null

array:13 [
 ...
  "calibration_cert" => array:1 [
    "$path" => null
  ]
]

以下是我尝试过的

            <b-form-group label="Calibration Cert:">
                <b-form-file
                    v-model="form.calibration_cert"
                    :state="Boolean(form.calibration_cert)"
                    placeholder="Choose a file or drop it here..."
                    drop-placeholder="Drop file here..."
                ></b-form-file>
            </b-form-group>
.....
      methods:
        onSubmit(event) 
            event.preventDefault();
            axios
                .post("/equipments/create", this.form, 
                    headers: 
                        "Content-Type": "multipart/form-data"
                    
                )
                .then(response => 
                    console.log(response);
                )
            ;
        ,

如果有人可以提供帮助，不胜感激

【参考方案1】：

你的幸运日，我正在努力。

您必须使用 formData() 对象从 Axios 提交文件。 如果你的 Laravel 路由使用 patch 方法，你必须使用 axios.post() 而不是 axios.patch() 并在 formData 中附加 _method: PATCH

这么说，我就是这样做的：

组件.vue

<b-form-file
    v-model="form.calibration_cert"
    :state="Boolean(form.calibration_cert)"
    placeholder="Choose a file or drop it here..."
    drop-placeholder="Drop file here..."
></b-form-file>

.....

methods:
  onSubmit(event) 
      event.preventDefault();
      
      // Set formData
      const formData = new FormData()
      // Append the method only if you are using a patch route in your server side
      formData.append('_method', 'PATCH')
      // Append the file
      formData.append('calibration_cert', this.form.calibration_cert)
      // Append the rest of your form data
      formData.append('data1', this.form.data1)
      formData.append('data2', this.form.data2)
      .....

      axios
         .post("/equipments/create", formData, 
              headers: 
                  "Content-Type": "multipart/form-data"
              
          )
          .then(response => 
              console.log(response);
          )
      ;
,

然后在你的 Laravel 这边，你可以做

$path = $request->file('calibration_cert')->store('files');

【参考方案2】：

您需要在 axios 请求中将文件作为对象发送，请使用以下示例了解您应该做什么。

const app = new Vue(
    data: () => (images: null),
    template: `
      <div>
        <input type="file" @change="uploadFile" ref="file">
        <button @click="submitFile">Upload!</button>
      </div>
    `,
    methods: 
      uploadFile() 
        this.Images = this.$refs.file.files[0];
      ,
      submitFile() 
        const formData = new FormData();
        formData.append('file', this.Images);
        const headers =  'Content-Type': 'multipart/form-data' ;
        axios.post('https://httpbin.org/post', formData,  headers ).then((res) => 
          res.data.files; // binary representation of the file
          res.status; // HTTP status
        );
      
    
  );

app.$mount("#content");