Отправка фото с vuejs

Question

Я использую ElementUi Uploader , и мне нужно отправить мой файл с остальными данными моей формы, но, похоже, он не передает правильные детали фотографии на сервер:

Скриншоты

Console log when i select an image

Data that sent to back-end

Код

photo input

<el-upload
    action="#"
    :limit="1"
    :multiple="false"
    :on-change="photoChanged"
    :on-exceed="handleExceed"
    list-type="picture-card"
    :on-remove="handleRemove"
    :on-preview="handlePictureCardPreview"
    :before-remove="beforeRemove"
    :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

Script

export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            form: {
                name: '',
                slug: '',
                price: '',
                new_price: '',
                sku: '',
                qty: 1,
                active: '',
                photo: '',
                shortDesc: '',
                longDesc: '',
                region: '',
                date1: '',
                date2: '',
                type: [],
                tags: [],
                brand_id: '',
                categories: [],
                resource: '',
                user_id: ''
            }
        }
    },
    methods: {
        onSubmit(e) { //send data to back-end
            e.preventDefault();
            axios.post('/api/admin/products/store', this.form)
            .then(res => {
                console.log(res);
            })
            .catch(error => {
                console.log(error);
            })
        },
        handleRemove(file) {
            this.form.photo = ''; // remove photo from from when it's removed
        },
        photoChanged(file, fileList){
            this.form.photo = file.raw;  // add photo to form when it's selected
            console.log('file', file) // screenshot 1
            console.log('raw', file.raw) //screenshot 2
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleExceed(files, fileList) {
            this.$message.warning(`The limit is 1, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally, remove old image and try again.`);
        },
        beforeRemove(file) {
            return this.$confirm(`Cancel the transfert of ${ file.name } ?`);
        }
    },
  }
</script>

Есть идеи?

Answer 1

Я использовал FormData для отправки фотографии или документа на сервер. JavaScript FormData

  <form id="myForm" name="myForm">
    <div>
        <label for="username">Enter name:</label>
        <input type="text" id="username" name="username" v-model="imageData.name">
      </div>
     <div>
        <label for="useracc">Enter account number:</label>
        <input type="text" id="useracc" name="useracc" v-model="imageData.account">
      </div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
  <input type="submit" value="Submit!">
</form>

export default {
    data() {
        return { 
            imageData: {}
        }
    },
    methods: {
        uploadImageToServer() {
            // 1.Save the form Data and return the new id to save the image 
            axios.post('/api/admin/products/store', this.imageData)
            .then(res => {
                if(res.id) {
                //2. Save the image to id
                let formData = new FormData();
                let file = document.getElementById('userfile');
                formData.append('file', file)
                axios.post('/api/admin/products/image/{id}', formData)
                    .then(res => {
                        console.log(res)
                    })
                }
            })
            .catch(err => {
                console.log(err)
            }) 

        }
    }
}

Здесь данные формы и данные файла не могут быть отправлены в одном запросе. 1. Сохранение данных формы и возврат идентификатора. 2. Сохранение данных изображения в id. Замените html синтаксисом element-ui. Убедитесь, что ваш api rest получает данные формы в качестве входных данных.

Answer 2

Решено

Ну, я решил отказаться от отправки изображения с остальными данными в бэкэнд и сначала загрузить изображение с action="#" на входе, а взамен я получаю имя файла в форме и просто отправляю имя файла с остатком формы вместо отправки файла изображения.

<el-upload
  action="/api/upload"
  :on-success="handleAvatarSuccess"
.....>


methods: {
  handleAvatarSuccess(res, file) {
    this.form.photo = res.data;
  },
}

Таким образом, он отправляет мой файл на сервер, как только он выбран, и задает имя сохраненного файла в моем form.photo, и это имя будет отправлено вместе с остальными входными данными моей формы.

Надеюсь, это может быть полезно и другим.

Answer 3

конвертируйте ваш файл в base64

при выборе изображения, используйте код ниже

       onImageChange() {
          let file = this.form.photo

          if (file == '')
                return;

           this.createImage(file);
       }

       createImage(file) {
           let reader = new FileReader();
           let el = this
           reader.onload = (e) => {
                el.form.photo = e.target.files[0];      
           };
           reader.readAsDataURL(file);
       },

прикрепите функцию onImageChange во входном файле