文件池从 s3 加载初始图像

Question

我想在 vue-file-pond 中从 s3 加载初始图像，但它向 s3 发送 Xhr 请求并且被 cors 源策略阻止。（我不使用服务器端选项，因为我通过表单提交图像。）。这是我的文件池标签

            <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 是我的 s3 基础 URL。它只加载在 img 标签上，但在文件池中...... 我能做什么？我做了整整一周的噩梦

Answer 1

对于谁来说，这个问题可能会混淆：一个星期后，我终于弄明白了。这是因为浏览器缓存。当 s3 URL 在 img 标签中加载时，浏览器缓存了它，而另一次在 XHR 请求中它并没有像它可能的那样真正请求。所以我强迫他们不要缓存 :) 参考这个问题

文件池从 s3 加载初始图像

File pond load initial image from s3

javascript

amazon-s3

vue.js

filepond