Question

我正在创建一个上传VueJS组件，并且我已经将此部分显示在images对象中的图像：

    <div class="row">
        <figure class="col-md-3" v-for="image in images">
            <img :src="'/'+image.image" :alt="image.description+'-'+image.image" class="img-responsive"
                 style="width:100%;">
        </figure>
    </div>

我想知道在每次成功上传后是否有images形象，并获取新上传的图片。

以下是我用来提交图片的方法：

props: ['data'],
    data() {
        return {
            files: [],
            slug: this.data.slug,
            id: this.data.part.id,
            images : this.data.part.images
        }
    },
    methods: {

        submitFiles() {
            let formData = new FormData();
            for (let i = 0; i < this.files.length; i++) {
                let file = this.files[i];

                formData.append('files[' + i + ']', file);
            }

            axios.post('/dashboard/galleries/',
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
            ).then(function () {
                console.log('SUCCESS!!');
            })
                .catch(function () {
                    console.log('FAILURE!!');
                });
        }

感谢大家的帮助。

Answer 1

您可以做的是上传文件后返回包含您的图片网址的回复：

return response()->json(['images' => $images]);

然后在.then块中，您可以将响应分配给images数据，如下所示：

axios.post('/dashboard/galleries/',
    formData,
    {
      headers: {
         'Content-Type': 'multipart/form-data'
      }
    }
    ).then(function (res) {
        this.images = res.data.images;
    })

更新

由于数据在我们收到回复后会发生变化，我们需要使用watch，如下所示：

props: ...,
methods: ...,
watch: {
  images: function(val) {
    this.images = val;
  }
}

Answer 2

使用此https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL显示base64字符串中的图像。有一个简单的例子。

在vueJS中更新对象

2 个答案:

更新