Невозможно загрузить изображение Vue - PullRequest
Новая
       19

Невозможно загрузить изображение Vue

0 голосов
/ 05 января 2019

Итак, я использую пакет под названием vue-picture-input , и я загружаю изображение с помощью axios. Мой VUE файл содержит этот элемент: 

 <picture-input
  ref="pictureInput"
  :width="500"
  :height="500"
  :removable="true"
  :custom-strings="{
    upload: '<h1>Upload it!</h1>',
    drag: 'Drag and drop your image here'
  }"
  button-class="ui button primary"
  remove-button-class="ui red button"
  accept="image/jpeg, image/png, image/gif"
  @change="onChanged"
  @remove="onRemoved"
/>

Загружается с помощью этого метода: 

uploadAPI('pages/', this.image, name)
          .then(response=>{
            console.log(response)
            if (response.data.success){
              this.image = '';
              console.log("Image uploaded successfully Harambe");
            }
          })
          .catch(err=>{
            console.error(err);
          });

У меня есть все значения в параметрах, и API принимает эти параметры и подтверждает, что они есть. Файл uploadAPI: импорт axios из 'axios'; импортировать конфигурацию из '../../configs/config'

export default function (urn, file, name) {
  if (typeof urn !== 'string') {
    throw new TypeError(`Expected a string, got ${typeof url}`);
  }

  const formData = new FormData();
  formData.append(name, file);
  const config = {
    headers: {
      'content-type': 'multipart/form-data'
    }
  };

  let url = configuration.SERVER.uploadURL + urn

  return axios.post(url, formData, config);
};

URL указывает на http://localhost:4000/static/uploads. Но ничего не загружается. Кажется, что нет никаких проблем с CORS, и никаких ошибок не обнаружено. Это странно для меня. Ответ на запрос axois - это статус 200 с данными: 

<!doctype html>
<html data-n-head="">
  <head>
    <title data-n-head="true">nuxt-sever</title><meta data-n-head="true" charset="utf-8"/><meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-n-head="true" data-hid="description" name="description" content="The Spiciest Nuxt.js Project"/><link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico"/><link rel="preload" href="/_nuxt/runtime.js" as="script" /><link rel="preload" href="/_nuxt/commons.app.js" as="script" /><link rel="preload" href="/_nuxt/vendors.app.js" as="script" /><link rel="preload" href="/_nuxt/app.js" as="script" />
  </head>
  <body data-n-head="">
    <div id="__nuxt"><style>#nuxt-loading {  visibility: hidden;  opacity: 0;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;  animation: nuxtLoadingIn 10s ease;  -webkit-animation: nuxtLoadingIn 10s ease;  animation-fill-mode: forwards;  overflow: hidden;}@keyframes nuxtLoadingIn {  0% {visibility: hidden;opacity: 0;  }  20% {visibility: visible;opacity: 0;  }  100% {visibility: visible;opacity: 1;  }}@-webkit-keyframes nuxtLoadingIn {  0% {visibility: hidden;opacity: 0;  }  20% {visibility: visible;opacity: 0;  }  100% {visibility: visible;opacity: 1;  }}#nuxt-loading>div,#nuxt-loading>div:after {  border-radius: 50%;  width: 5rem;  height: 5rem;}#nuxt-loading>div {  font-size: 10px;  position: relative;  text-indent: -9999em;  border: .5rem solid #F5F5F5;  border-left: .5rem solid #fff;  -webkit-transform: translateZ(0);  -ms-transform: translateZ(0);  transform: translateZ(0);  -webkit-animation: nuxtLoading 1.1s infinite linear;  animation: nuxtLoading 1.1s infinite linear;}#nuxt-loading.error>div {  border-left: .5rem solid #ff4500;  animation-duration: 5s;}@-webkit-keyframes nuxtLoading {  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);  }  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);  }}@keyframes nuxtLoading {  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);  }  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);  }}</style><script>window.addEventListener('error', function () {  var e = document.getElementById('nuxt-loading');  if (e) e.className += ' error';});</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div><!-- https://projects.lukehaas.me/css-loaders --></div>
  <script type="text/javascript" src="/_nuxt/runtime.js"></script><script type="text/javascript" src="/_nuxt/commons.app.js"></script><script type="text/javascript" src="/_nuxt/vendors.app.js"></script><script type="text/javascript" src="/_nuxt/app.js"></script></body>
</html>

не выводит никаких ошибок, а response.data.success не соответствует действительности. Я немного растерялся и был бы признателен, если бы вы помогли мне отладить это. Спасибо за ваше время.

1 Ответ

0 голосов
/ 05 января 2019

Пришлось получить файл на бэкэнд с мултером

...