0

Всем привет. Работаю с Vue в Laravel. Использую примерно такие компоненты:

Vue.component('news-create', require('./components/NewsCreate.vue').default);
Vue.component('sp-edit', require('./components/SpecEdit.vue').default);
Vue.component('sp-create', require('./components/SpecCreate.vue').default);

Во всех этих компонентах я использую модуль yimo-vue-editor. Код настройки модуля в компонентах практически одинаков:

import YimoVueEditor from 'yimo-vue-editor'

window.Vue.use(YimoVueEditor, {
      name: 'yimo-editor-app',
      uploadHandler: (type, resTxt) => {
        console.log(resTxt);
        if (type === 'success') {
          var res = JSON.parse(resTxt)
          if (!res) {
            return null
          }
          return res.url
        } else if (type === 'error') {
          //todo toast
        } else if (type === 'timeout') {
          //todo toast
        }
        return 'upload failed__'
      },
          uploadImgUrl: 'http://domain/upload-image/news',
          uploadHeaders: {
             'X-CSRF-TOKEN': document.getElementById('csrf-token').getAttribute('content')
          },
      }
    });

Единственный параметр который изменяется - это uploadImgUrl. Проблема состоит в том, что всегда картинка отправляется на один url http://domain/upload-image/news, то есть тот, который был первым подключён в app.js.

С чем это может быть связано?

1 ответ 1

4

Первое, что необходимо сделать - это глобально зарегистрировать плагин в app.js:

import VEditor from 'yimo-vue-editor'

Vue.use(VEditor, {
    name: 'yimo-vue-editor',
    config: {
        uploadImgUrl: 'http://domain/upload-image/news',
        uploadHeaders: {
            'X-CSRF-TOKEN': document.getElementById('csrf-token').getAttribute('content')
        }
    },
    uploadHandler: (type, resTxt) => {
        console.log(resTxt);
        if (type === 'success') {
            var res = JSON.parse(resTxt)
            if (!res) {
                return null
            }
            return res.url
        } else if (type === 'error') {
            //todo toast
        } else if (type === 'timeout') {
            //todo toast
        }
        return 'upload failed__'
    },

})

Далее при использовании в компонентах вы переопределяете свойство config, например:

<template>
<div>
  <yimo-vue-editor v-model="text" :config="myYimoConfig"></yimo-vue-editor>
</div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      myYimoConfig: {
        uploadImgUrl: 'http://domain/upload-image/spec',
      }
    }
  }
}
</script>
2
  • Большое спасибо, попробую Ваш способ. 27 апр 2019 в 6:37
  • Давно уже опробывал Ваш способ, всё отлично работает. Очень благодарен) 21 июн 2019 в 8:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.