在 Laravel 中使用 BootstrapVue 上传文件答案

【问题标题】：Upload File with BootstrapVue in Laravel在 Laravel 中使用 BootstrapVue 上传文件
【发布时间】：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);
                })
            };
        },

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

【问题讨论】：

标签： laravel vue.js vuejs2 axios bootstrap-vue

【解决方案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");

【讨论】：