캐시가 VUE JS 애플리케이션에서 이전 업데이트된 사진을 표시함

캐시가 VUE JS 애플리케이션에서 이전 업데이트된 사진을 표시함

나를 정말 불안하게 했던 문제가 하나 있다.사용자 프로파일, 사용자 타임라인 등이 있는 vue 애플리케이션이 있습니다.

짧은 역사를 만들기 위해 문제는 다음과 같습니다.

내 사용자 프로필에는 업로드 또는 삭제할 수 있는 사진이 4장 있습니다.그래서 사진을 업데이트할 때 브라우저에 오래된 사진이 표시되는 경우가 있지만, 사진을 업데이트하면 CTRL+SHIFT+R이 브라우저에 새 사진이 표시됩니다.

location.reload(true)로 해결할 수 있는 문제인 것 같습니다만, 저는 잘 되지 않습니다.흐름은 다음과 같습니다.

1-사진 선택 2-노드 서버에 폼 보내기 3-노드 서버에서는 이미지를 업로드하고 응답합니다.노드 서버에서는 데이터를 다시 가져와 상태 5-console.log에 저장합니다.6-location.reload(true) 7-여기에서는 새로운 이미지가 표시되지만 오래된 이미지가 표시됩니다.eted가 갱신되었습니다.하지만 페이지를 새로고침하면 새 페이지가 나타납니다.

폼이 정상임을 확인하면 다음 절차를 수행하여 편집 및 새 데이터를 가져옵니다.>

        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}
      }
    }

사진을 업데이트 한 후 데이터베이스를 확인했더니 업데이트 되었기 때문에 백엔드의 문제는 없습니다.

나는 어떻게 해야 할지 모르겠다, 나는 많은 책을 읽었지만 해결책이 나오지 않는다.또한 일부 브라우저와 그렇지 않은 브라우저에서도 문제가 발생합니다.

읽어주셔서 감사합니다

사용 가능한 항목에 따라 버전이나 타임스탬프 등 일부 쿼리 파라미터를 추가하고 URL을 변경하여 새로운 이미지를 강제로 가져올 수 있습니다.

<img src="profile.gif" >

사용자 업데이트 시:

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

언급URL : https://stackoverflow.com/questions/54671351/cache-shows-old-updated-pictures-in-my-vue-js-application