Кэш показывает старые обновленные картинки в моем приложении VUE JS - PullRequest
0 голосов
/ 13 февраля 2019

У меня есть проблема, из-за которой я действительно сильно расстроился.У меня есть приложение VUE, где у меня есть профиль пользователя, временная шкала пользователя и т. Д. *

Чтобы сделать краткую историю, проблема в том, что:

В моем профиле пользователя у меня есть 4 изображения, которые яМожно загрузить или удалить.Поэтому, когда я обновляю свои картинки, иногда браузер показывает старые, но когда я делаю: CTRL + SHIFT + R, браузер показывает новые.

Кажется, проблема может быть исправлена ​​с помощью местоположения..reload (правда), но это не работает для меня.Это поток:

1-Выбор изображения 2-Отправка формы на сервер узла 3-В сервер узла Я загружаю фотографии и отправляю ответ, если все в порядке 4 vuex 4 отправки, чтобы получить мои данные снова и сохранитьв состоянии 5-console.log новое состояние (отображаются обновленные элементы) 6-location.reload (true) 7-здесь, где я должен увидеть свои новые изображения, показаны старые, однако состояниеобновлено.Но когда я перезагружаю страницу, она показывает новые.

Когда я проверяю, что форма в порядке, я делаю следующее для отправки редактирования и получения новых данных>

        const response = await this.$store.dispatch('company/edit', this.formData)
        if (response.success === true) {
            await this.$store.dispatch('company/populate', this.currentUser.identifier)
         }

Сначала я отправляю редактирование следующим образом>

        async edit ({commit, rootGetters}, form) {
      commit('setStatus', { loading: true, error: false, message: '' })
      const endpoint = form.get('editing') === 'solutions' ? '/api/solution/register' : '/api/company/edit/' + form.get('editing')
      const headers = { 'Authorization': 'Bearer ' + rootGetters['auth/getToken'] }

      try {
        await axios.post(endpoint, form, { headers: headers })
        commit('setStatus', { loading: false, error: false, message: 'Success' })
        return { success: true }
      } catch (error) {
        let message = ''
        if (error.response) {
          message = error.response.data.message
        } else if (error.request) {
          message = 'No response received from the server. If the problem persists contact the site administrator (' + error.message + ')'
        } else {
          message = error.message
        }
        commit('setStatus', { loading: false, error: true, message: message })
        return { success: false }
      }
    },

Тогда, если это успех>

        const endpoint = '/api/company/' + identifier
    const headers = { 'Authorization': 'Bearer ' + rootGetters['auth/getToken'] }

        try {
          const {data} = await axios.get(endpoint, { headers: headers })
          // await commit('clear')
          await commit('setData', data.company)
          console.log('DATA COMPANY', data.company)
          if (silent === false) {
            commit('setStatus', { loading: false, error: false, message: 'Success' })
          }
          return { success: true }
        } catch (error) {
          ......

И это мои мутации и состояние>

        const state = {
      data: null,
      status: {
        loading: false,
        silent: false,
        error: false,
        message: ''
      }
    }

    const mutations = {
      setData (state, data) {
        data.solutions = data.solutions === null ? [] : data.solutions
        Vue.set(state, 'data', data)
        return {success: true}
      },

      setStatus (state, status) {
        Vue.set(state, 'status', status)
      },

      clear (state) {
        state.data = null
        return {success: true}
      }
    }

Я проверил базу данных после того, как обновил свои фотографии, и она обновилась, так чтоэто не бэкэнд-проблема.

Я не знаю, что делать, я много читал, но не могу найти решение.И проблемы появляются в некоторых браузерах, а другие не

Спасибо за чтение

1 Ответ

0 голосов
/ 13 февраля 2019

Вы можете принудительно получать новые изображения, изменив URL-адрес, добавив некоторые параметры запроса, например, версия или отметка времени зависят от того, что у вас есть.

<img src="profile.gif" >

Когда пользователь обновляет:

<img src="profile.gif?version=1">
...