проблема в изображении предварительного просмотра при обновлении элемента - PullRequest
0 голосов
/ 05 марта 2020

Я использую javascript для предварительного просмотра и сохранения файла изображения локально. Я хочу предварительно просмотреть изображение перед загрузкой, я создаю функцию предварительного просмотра изображения, и она работает для добавления данных. Но когда я обновляю элемент, я хочу просмотреть его изображение в диалоговом окне. Я не знаю, как это сделать. Может кто-то помочь мне с этим. вот мой код

    pickFile: function () {
      this.$refs.image.click()
    },
    onFilePicked () {
      const input = this.$refs.image
      const files = input.files
      if (files && files[0]) {
        const reader = new FileReader()
        reader.onload = e => {
          this.imageData = e.target.result
          console.log(' test ', this.imageData)
        }
        this.storeLogo = files[0]
        reader.readAsDataURL(files[0])
        this.$emit('input', files[0])
      }
    },
    updateItem (item) {
      this.editedIndex = this.storesList.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.imageData = btoa('static/images/storeLogo/' + this.editedItem.image)
      if (this.editedItem.country === this.countryID.country_name) {
        this.editedItem.country = this.countryID.country_id
        if (this.editedItem.state === this.stateID.state_name) {
          this.editedItem.state = this.stateID.state_id
          if (this.editedItem.city === this.cityID.city_name) {
            this.editedItem.city = this.cityID.city_id
          }
        }
      }
      this.dialogOpening = true
    }
<div class="base-image-input" :style="{ 'background-image': `url(${imageData})` }" @click="pickFile">
                  <span v-if="!imageData" class="placeholder">
                    Choose an Image
                  </span>
                  <input class="file-input" ref="image" type="file" @input="onFilePicked" />
                </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...