我無法將影像檔案從.vue上傳到我的資料庫

我在 Laravel 中使用 Vue，我嘗試做一個簡單的 crud，它在文章標題或描述（文本欄位）等方面效果很好，但是當我嘗試發送影像檔案時，它不起作用。我嘗試過formData，但無濟于事。

這是我在模板中的表單，標題沒有問題進入資料庫，如果我控制臺記錄 selectedFile 則它顯示正確選擇的檔案但 addArticle 方法沒有附加影像

<form @submit.prevent="addArticle" class="container">
      <label>Title</label>
      <input type="text" v-model="article.title" />
      <label>Image</label>
      <input type="file"  v-on:change="selectedFile"  />
      <button type="submit">Create</button>
</form>

這是我的腳本

<script>
export default { 
  data() {
    return {
      fileSelected: null,       
      article: {},
    };
  },

  methods: {
    addArticle() {
       var formData =new FormData();
       formData.append(this.article.image, this.fileSelected);
        
      axios
        .post("http://localhost:8000/api/articles", this.article) 
        .then((response) => this.$router.push({ name: "ArticlesList" }))
        .catch((err) => console.log(err))
        .finally(() => (this.loading = false));
      }
    ,

    selectedFile(event) {
      this.fileSelected = event.target.files[0];
    },
  },
};
</script>

uj5u.com熱心網友回復：

這是我的代碼

<input type="file" @change="onFileChange">


  onFileChange(e) {
    this.sendphoto = e.target.files[0];

  },

  editUser() {
    var self = this;
    let formData = new FormData();
   
      formData.append("image" , self.sendphoto )
  
    let config = {
      header : {
        'Content-Type' : 'multipart/form-data'
      }
    }
    axios.post('/edit-user' , formData , config)
            .then(function (response) {

            })
            .catch(function (error) {
              console.log(error);
            })
  },

uj5u.com熱心網友回復：

您正在創建一個FormData物件，但您沒有在 Axios 請求中發送它。為了發送檔案和表單資料，您必須將所有內容附加到FormData物件。

<script>
export default { 
  data() {
    return {
      fileSelected: null,       
      article: {},
    };
  },

  methods: {
    addArticle() {
      var formData =new FormData();
      formData.append('image', this.fileSelected);
      formData.append('title', this.article.title);
        
      axios
        .post("http://localhost:8000/api/articles", formData) 
        .then((response) => this.$router.push({ name: "ArticlesList" }))
        .catch((err) => console.log(err))
        .finally(() => (this.loading = false));
      }
    ,

    selectedFile(event) {
      this.fileSelected = event.target.files[0];
    },
  },
};
</script>

uj5u.com熱心網友回復：

這適用于將影像檔案作為字串發送到資料庫中，希望它可以幫助遇到類似問題的其他人

setup() {
        const base64 = ref()
        const changeFile= async(event) => {
            const file = event.target.files[0]; 
            base64.value = await convertBase64(file);          
        }    
 
        const convertBase64 = (file) => {
            return new Promise ((resolve, reject) => {
                const fileReader = new FileReader();
                fileReader.readAsDataURL(file);

                fileReader.onload = () => {
                    resolve(fileReader.result)
                }

                fileReader.onerror = (error) => {
                    reject(error)
                }
            })
        } 
  
        const form = reactive({
            title: " ",
            body: " ",
            image:  base64,
        })
     
        const submitForm = () => {            
            axios.post("http://localhost:8000/api/articles", form)
        }
        return { changeFile, submitForm, form}
    },

標籤：javascript 拉拉维尔 Vue.js

上一篇：如何凍結請求以測驗使用賽普拉斯禁用的組件？

下一篇：根據條件通過for回圈從物件串列中選擇一些物件