이미지를 업로드할 때 vue 구성 요소에서 이미지를 자동으로 업데이트하려면 어떻게 해야 합니까?
내 vue 컴포넌트는 다음과 같습니다.
<template>
<section>
...
<img class="media-object" :src="baseUrl+'/storage/banner/thumb/'+photo" alt="" width="64" height="64">
...
</section>
</template>
<script>
export default {
props: ['banners'],
data() {
return {
baseUrl: App.baseUrl,
bannerId: this.banners.id,
photo: this.banners.photo // result : chelsea.png
}
},
methods: {
onFileChange(e) {
let files = e.target.files,
reader = new FileReader(),
formData = new FormData(),
self = this
formData.append('file', files[0])
formData.append('banner_id', this.bannerId)
axios.post(window.App.baseUrl+'/admin/banner/upload-image',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function(response) {
if(response.data.status == 'success') {
self.photo = response.data.fileName // result : chelsea.png
}
})
.catch(function(error) {
console.log('FAILURE!!')
})
},
...
}
}
</script>
의 결과:src: \my-app\storage\app\public\display\displays\displays\displays.png
이미지를 업로드하면 onFileChange 메서드가 호출됩니다.프로세스 업로드는 백엔드로 계속됩니다.폴더에 업로드가 성공했습니다.그리고 응답은 동일한 파일 이름을 반환합니다.그래서 그 결과는response.data.fileName첼시입니다.png
여기서의 문제는 업로드 할 때 이미지가 자동으로 갱신되지 않는다는 것입니다.페이지를 새로 고치면 이미지가 업데이트되었습니다.
이미지를 업로드 할 때 이미지가 자동으로 업데이트/변경되지 않는 이유는 무엇입니까?
다음을 수행하여 수정했습니다. 변수 이름을 추가했습니다.rand캐시 버스트를 위해 사진 URL 끝에 있습니다.서버로부터 올바른 응답을 받으면, 그 변수를 일의(이 경우는 타임 스탬프)로 변경하기만 하면, 이미지가 갱신됩니다.
<template>
<img class="media-object" :src="baseUrl+'/storage/banner/thumb/'+photo + '?rand=' + rand" alt="" width="64" height="64">
</template>
<script>
export default {
data() {
return {
rand: 1
}
},
methods: {
onFileChange(e) {
...
axios.post(url,formData).then(function(response) {
if(response.data.status == 'success') {
self.rand = Date.now()
}
})
},
...
}
}
당신의 이미지는 브라우저에 의해 캐시 옵션.chelsea.png: 같은 이미지에 어떤 태그를 추가하려고 시도하겠습니까?t=
그냥computed 속성, 무리 아래 사용된다.
getImageUrl업데이트된 경로를 가져오려면.나는 자료가 제공해 흉내 내는 변화를 유발하는 단추를 덧붙였다.
new Vue({
el: "#app",
data: {
baseUrl: 'baseURl', //dummy
bannerId: '', //dummy
photo: 'initPhoto.png' // dummy
},
computed: {
getImageUrl: function() {
return this.baseUrl + '/storage/banner/thumb/' + this.photo;
}
},
methods: {
mimicOnChange: function() {
this.photo = "chelsea.png"
}
}
})<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
<span>{{ getImageUrl }}</span>
<br/>
<button @click="mimicOnChange">
On change trigger
</button>
</div>당신이 코드 위에, 단지 직접 src특성에:계산된를 사용한다.
<img class="media-object" :src="getImageUrl" alt="" width="64" height="64">
위에서 제공한 대답도 했는데 그것이 가장 약속/실제로 사용할 async에 관한 한 이 뻔한 반응을 위한 속성 재계산한다.만일 당신과 여전히 문제를 겪고 있다면 사용하지 않는 결정은 하지만, 고민자 님처럼 적재 속성을 사용할 수 있다.loading언제async(axios)을 시동, 아래 예에서 부동산은 DOM을 이용할 v-if을 DOM을 제거하에는.그리고 이 이미지 설정한 다음에 DOM요소를 회복하다.this.loading = true;. 이것은 DOMcomputed 속성을 강요한다의 손길을 뻗치다. 강요한다.
<template>
<section>
<div v-if="!loading">
<img class="media-object" :src="getPhoto" :alt="getAlt" width="64" height="64">
</div>
<div v-if="loading">
<!-- OR some spinner-->
<div>Loading image</div>
</div>
</section>
</template>
<script>
export default {
props: ['banners'],
data() {
return {
loading: false,
baseUrl: App.baseUrl,
bannerId: this.banners.id,
photo: {} // result : chelsea.png
}
},
computed: {
getPhoto() {
return App.baseUrl + '/storage/banner/thumb/' + this.photo.fileName;
},
getAlt() {
return photo.alt;
},
},
methods: {
onFileChange(e) {
let files = e.target.files,
reader = new FileReader(),
formData = new FormData(),
self = this
// Set loading to true
this.loading = true;
formData.append('file', files[0])
formData.append('banner_id', this.bannerId)
axios.post(window.App.baseUrl+'/admin/banner/upload-image',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function(response) {
if(response.data.status == 'success') {
self.photo = response.data.fileName // result : chelsea.png
this.loading = false;
}
})
.catch(function(error) {
console.log('FAILURE!!')
})
},
...
}
}
</script>
:전체 사진의 경로 결합해 보세요.
<template>
<section>
...
<img v-if="photoLink" class="media-object" :src="photoLink" alt="" width="64" height="64">
<p v-text="photoLink"></p>
...
</section>
</template>
<script>
export default {
props: ['banners'],
data() {
return {
baseUrl: App.baseUrl,
bannerId: this.banners.id,
photo: this.banners.photo, // result : chelsea.png
photoLink: App.baseUrl + '/storage/banner/thumb/' + this.banners.photo
}
},
methods: {
onFileChange(e) {
let files = e.target.files,
reader = new FileReader(),
formData = new FormData(),
self = this
formData.append('file', files[0])
formData.append('banner_id', this.bannerId)
axios.post(window.App.baseUrl+'/admin/banner/upload-image',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function(response) {
if(response.data.status == 'success') {
// self.photo = response.data.fileName // result : chelsea.png
console.log('>>>INSIDE SUCCESS');
self.photoLink = self.baseUrl + '/storage/banner/thumb/' + response.data.fileName;
}
})
.catch(function(error) {
console.log('FAILURE!!')
})
},
...
}
}
나는 같은 이미지를 입력 후의 어떤 행동을 유발하지 않을 것 같은 문제가 있었다고요나는 입력을 취소하여 그것을 고쳤다.
clearInput(e) {
e.target.value = '';
},
언급URL:https://stackoverflow.com/questions/49146670/how-can-i-update-image-automatic-on-vue-component-when-i-upload-the-image
'sourcecode' 카테고리의 다른 글
| Recyserview가 CreateView를 호출하지 않음홀더 (0) | 2022.08.01 |
|---|---|
| 유닛 테스트 VueJS 구성 요소에서 Vuex 오류 발생 (0) | 2022.07.31 |
| ReferenceError:"Swal 정의되지 않". (0) | 2022.07.31 |
| Excel 또는 PDF로 부트스트랩 테이블 내보내기 (0) | 2022.07.31 |
| 어레이 Vuej에서 속성의 모든 값을 합산하다 (0) | 2022.07.31 |