vue中如何上传同一张图片答案

【问题标题】：How to upload the same image in vuevue中如何上传同一张图片
【发布时间】：2022-01-13 06:28:10
【问题描述】：

当我第一次上传一张图片，然后将其从输入中删除并再次尝试上传时，图片无法上传。

我这样做的方式是在我的组件中使用以下代码，并且在上传图像时我发出事件upload 我在字段中设置文件。

当我单击triggerFileVisibility 时，它会从输入中删除图像的名称，但它不允许我再次上传相同的图像。

<template>
  <div class="file-upload-wrapper">
    <v-file-input
      v-bind="$props"
      ref="fileUpload"
      accept="image/png, image/jpeg, image/svg"
      :placeholder="fileName ? fileName : $t(labelType)"
      prepend-icon="mdi-camera"
      :disabled="!!fileName"
      :error-messages="getInvalidFeedback"
      v-on:change="uploadFiles"
      @focus="formFieldOnFocus"
    ></v-file-input>
    <v-icon v-if="!!fileName" class="close-icon" @click="triggerFileVisibility">
      mdi-close
    </v-icon>
  </div>
</template>

<script>
export default {
  name: 'FileUpload',
  props: {
    fileName: {
      default: '',
      type: String,
    },
    labelType: {
      default: 'organization.uploadFile',
      type: String,
    },
    invalidFeedback: {
      default: '',
      type: String,
    },
    required: {
      type: Boolean,
      default: true,
    },
    v: {
      type: Object,
      default: () => null,
    },
  },
  computed: {
    getUploadedImage() {
      console.log('getUploadedImage');
      return this.fileName;
    },
    getInvalidFeedback() {
      console.log('getInvalidFeedback')
      if (this.v && this.v.$error) {
        return this.invalidFeedback;
      }
      return '';
    },
  },
  watch: {
    fileName: function(value, oldValue) {
      console.log(`fileName: new ${value} and OLD ${oldValue}`);
      this.$forceUpdate();
    },
    getFieldError: function(value) {
      if (value && this.v) {
        this.v.$touch();
      }
    },
  },
  methods: {
    clear() {
      this.$refs.fileUpload.reset();
      this.$emit('onchange', '');
    },
    uploadFiles(selectedFile) {
      console.log('UPLOAD');
      this.$emit('upload', selectedFile);
    },
    formFieldOnFocus(value) {
      console.log('formFieldOnFocus', this.$props);
      this.$emit('focus', value);
      if (this.v) {
        this.v.$reset();
      }
    },
    triggerFileVisibility() {
      console.log('triggerFileVisibility')
      this.$emit('upload', '');
    },
  },
};
</script>

<style scoped>
.file-upload-wrapper {
  position: relative;
}

.close-icon {
  position: absolute;
  top: 27%;
  right: 0;
  cursor: pointer;
}
</style>

【问题讨论】：

标签： javascript vue.js upload

【解决方案1】：

你应该使用的简单方法

v-模型

在您的代码中并在删除后清除此值

【讨论】：

【解决方案2】：

我的解决方案：

<v-file-input
  v-bind="$props"
  ref="fileUpload"
  accept="image/png, image/jpeg, image/svg"
  :placeholder="fileName ? fileName : $t(labelType)"
  prepend-icon="mdi-camera"
  :disabled="!!fileName"
  :error-messages="getInvalidFeedback"
  @change="uploadFiles"
  @focus="formFieldOnFocus"
></v-file-input>

添加 :key="componentKey" 并在删除图像时增加它的值

【讨论】：