通过 v-for 循环获取照片预览

Question

我想在下面的代码中预览照片。我正在使用 BootstrapVue。

但我不知道问题出在哪里..在查看我的 Vue devtools 后，我可以看到表单文件有图片，但我的“手表”不工作..

如果有人能帮助我，那将非常有帮助！

我的模板：

<template>
  <div>
    <div v-for="item in files" :key="item.id">
      <b-button v-b-toggle="item.id" variant="danger btn-block mb-2">
        Upload {{ item.id }}</b-button>
      <b-collapse :id="item.id" class="mt-2">
        <div class="m-2 mt-3">
          <table class="table table-striped mt-2">
            <tbody>
              <div class="mt-3 mb-2 ml-1">Upload</div>
              <b-form-file
                :v-model="item.request"
                placeholder="Upload ..."
                class="mb-2"
              ></b-form-file>
              <b-img
                v-if="item.request"
                :src="item.src"
                class="mb-3"
                fluid
                block
                rounded
              ></b-img>
            </tbody>
          </table>
        </div>
      </b-collapse>
    </div>
  </div>
</template>

我的脚本：

<script>
const base64Encode = (data) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(data);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });

export default {
  data() {
    return {
      files: [
        { id: "1", src: null, request: null },
        { id: "2", src: null, request: null },
        { id: "3", src: null, request: null },
      ],
    };
  },

  watch: {
    files: {
      deep: true, //watch changes at objects properties
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          if (newValue) {
            base64Encode(newValue.src)
              .then((value) => {
                newValue.src = value;
              })
              .catch(() => {
                newValue.src = null;
              });
          } else {
            newValue.src = null;
          }
        }
      },
    },
  },
};
</script>

Answer 1

你犯了一个小错误！

不要为 b-form-file 组件编写 :v-model，而是使用 v-model。

在手表属性中，您无法了解哪些上传输入发生了变化。因此，请尝试为 b-form-file 使用 input 事件处理程序。然后你可以传递每个 files 和运行 base64Encode 函数的索引。

您可以看到代码的工作版本 here。

通过 v-for 循环获取照片预览

get a photo preview over v-for loop

javascript

vue.js

vuejs2

bootstrap-vue