Vue.js Форма загрузки данных-данные - PullRequest
Новая
       24

Vue.js Форма загрузки данных-данные

1 голос
/ 16 марта 2019

Я пытаюсь загрузить изображение в Vue.js и отправить его на сервер с помощью axios, но есть ошибка, которую я получаю.

Прежде всего:

Я пытаюсь отправить это как formData. Не в формате base64.

вот мой ввод: 

<label>File
   <input type="file" id="file" ref="file" v-on:change="onChangeFileUpload()"/>
</label>
<button v-on:click="submitForm()">Upload</button>

и вот мой слой данных и методы: 

export default {
  data() {
    return {
      file: ''
           }
       },
        methods: {
           submitForm(){
            let formData = new FormData();
            formData.append('file', this.file);

            this.axios.post('apiURL',
                formData,
                {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'token': '030303039jddjdj'
                }
              }
            ).then(function(data){
              console.log(data.data);
            })
            .catch(function(){
              console.log('FAILURE!!');
            });
      },

      onChangeFileUpload(){
        this.file = this.$refs.file.files[0];
      }
    }
    }

и я пытаюсь показать изображение перед отправкой на сервер. 

<img :src="file" />

но я не могу отобразить изображение

Я получаю ошибку: 

[object%20File]:1 GET http://localhost:3000/[object%20File] 404 (Not Found)

где я ошибаюсь?

Ответы [ 2 ]

2 голосов
/ 16 марта 2019

Чтобы показать изображение, вы можете дать URL для src, как только изображение будет полностью загружено на сервер, или если вы хотите показать изображение перед отправкой на сервер, вы должны закодировать ваш файл в формате base64, например, определить переменную base64 в данных

    onChangeFileUpload ($event) {
      this.file = $event.files[0]
      this.encodeImage(this.file)
    },
    encodeImage (input) {
      if (input) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.base64Img = e.target.result
        }
        reader.readAsDataURL(input)
      }
    }

и затем вы можете проверить, загружен ли файл, вы должны просмотреть изображение непосредственно с URL, в противном случае в base64 

<img :src="base64Img" />
0 голосов
/ 16 марта 2019

Вот кодовое окно создания изображения.

https://codepen.io/Atinux/pen/qOvawK

Попробуйте это для загрузки файла. 

uploadFile(){
        let fd = new FormData();
        fd.append("file", this.file);

        this.axios.post('/uploadFile',fd,{
         headers: { 'Content-Type': undefined,
         'Authorization': `Bearer ${this.token}` },
        }).then(function (response) {
          if (response.data.ok) {
          }
        }.bind(this));

      }
...