在 Laravel 中使用 BootstrapVue 上传文件

Question

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

得到空值

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);
                })
            };
        },

如果有人能提供帮助，我们将不胜感激

Answer 1

您需要在 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");

Answer 2

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

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

话虽如此，我是这样做的：

component.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');

在 Laravel 中使用 BootstrapVue 上传文件

Upload File with BootstrapVue in Laravel

laravel

vue.js

axios

vuejs2

bootstrap-vue