[Vuejs]-How to get old image in edit form with VueJS?

by

0👍

one of the ways could be like this:

step1: in your .vue file, inside your created method, fetch your current image url

step2: keep that value in a separate property in your data object – say, originalFile

step3: do not bind your file-upload control directly to your new value. Use another data property for that – say, currentFile

step4: from your onchange handler, update your currentFile property and when the user uploads the new image, assign this new imageFile name/src to your originalFile property.

So, your code may look tentatively like this:
(here’s an extract from a project I recently worked on)

...
...
...
components: { DatePicker },
  data() {
    return {
      isLoading: false,
      imgFile: null,
      curImgUrl: "",
      filesSelected: 0
    };
  },
  created() {
    this.fetchUserPhotos();
  },
  methods: {
    handleFileChange: function(event) {
      if (!this.imgFile) {
        return;
      }
      // validate file size
      if (this.imgFile.size > 10000000) {
        U.showError("File larger than 10MB cannot be uploaded.");
        setTimeout(this.discardImage, 200);
        return;
      }
      let reader = new FileReader();
      reader.addEventListener(
        "load",
        function(e) {
          this.curImgUrl = e.target.result;
        }.bind(this)
      );
      reader.readAsDataURL(this.imgFile);
    },
    discardImage() {
      this.imgFile = null;
      this.curImgUrl = "";
    },
    fetchUserPhotos() {
      this.isLoading = true;
      PhotoService.getUserPhotos()
        .then(response => {
          this.userPhotos = response;
          this.isLoading = false;
        })
        .catch(error => {
          console.log(error);
          this.isLoading = false;
          U.showError(error);
        });
    },
    savePhoto() {
      if (this.caption == undefined || this.caption.trim().length < 4) {
        U.showError("Please add a caption.");
        return;
      }

      U.showBusy();
...
...
...

And in your vue template you may do something like this:

<v-row justify="center">
                  <v-col cols="12">
                    <v-file-input
                      chips
                      label="Add Photo"
                      color="secondary"
                      accept="image/*"
                      persistent-hint
                      hint="max size: 2MB"
                      truncate-length="18"
                      v-model="imgFile"
                      show-size
                      @change="handleFileChange"
                      @click:clear="discardImage"
                      :disabled="isLoading"
                    ></v-file-input>
                  </v-col>
                  <v-col cols="12">
                    <v-layout justify-center>
                      <v-btn
                        small
                        class="mx-2"
                        color="error"
                        dark
                        :disabled="(isLoading || imgFile == null && imgFile == undefined)"
                        @click="discardImage"
                      >Discard</v-btn>
                    </v-layout>
                  </v-col>
                  <v-col cols="12" v-if="curImgUrl">
                    <v-img :src="curImgUrl" aspect-ratio="1.7" contain></v-img>
                  </v-col>
                </v-row>

PS: I’m posting from my phone so the formatting may be a little messed up

Leave a comment