Warm tip: This article is reproduced from serverfault.com, please click

File pond load initial image from s3

发布于 2021-02-09 07:44:58

I want to load the initial image from s3 in vue-file-pond, but it sends Xhr request to s3 and blocked by cors origin policy. ( I don't use the server-side option because I submit images via the form. ). Here is my file pond tag

            <file-pond
                style="width: 100px; height: 100px"
                name="image"
                ref="image"
                label-idle="Drop files here or <span class='filepond--label-action'>Browse</span>"
                :allow-multiple="false"
                accepted-file-types="image/*"
                style-panel-layout="compact circle"
                image-preview-height="70"
                image-crop-aspect-ratio="1:1"
                image-resize-target-width="100"
                image-resize-target-height="100"
                @removefile="removefile(category.image, 'image')"
                @addfile="addImage"
                v-bind:files="image"
              />
              
              ---------------------------------
        data(){return{
                  image: this.category.image
                  ? [this.storage_url + this.category.image]
                : "",}
           }
               ,
     methods:{
     addImage() {
               this.form.image = this.$refs.image.getFile().file;
            }, 
     }

storage_url is my s3 base URL. It loads simply on img tag but in file pond ... what can I do? I had a full week with nightmare

Questioner
Elahe Karamzade
Viewed
0
Elahe Karamzade 2021-02-10 01:21:16

For Whom it may be confused with this issue : after a week finally, I figured it out. It was because of the browser cache. when the s3 URL load in img tag, the browser cached it and another time in the XHR request it doesn't really request as normal as it could be. so I forced them to not cache :) Refer to this StackOverFlow Issue