web-dev-qa-db-ja.com

ファイル入力をリセット/クリアする方法

入力Type = fileからイメージファイルをリセットするのから、この問題を停止しています。これがシナリオです、私はイメージを設定してから「キャンセル」ボタンをクリックしました（これはリセットされたことを意味します）、それから私は同じイメージを再度設定します、それは設定されません。私は理由を知りませんが、それがバグだと思います。

これが画像/形式をリセットするための私のコードです。

    resetImage () {
  this.$refs.addImageForm.reset()
  this.dialog = ''
  this.imgSrc = ''
  this.fileName = ''
  this.imgUrl = ''
  this.file = ''
}
 _

私はvue.jsを使って、それが役立つかどうかをvuetifyしています。私はあなたが私を助けることができることを願っています。私はこの問題に立ち往生しています

ここにIS HTML）です

    <template>
  <v-dialog
    persistent
    v-model="dialog"
    width="600"
  >
    <template v-slot:activator="{ on }">
      <v-btn depressed color="primary" v-on="on">
        <v-icon class="pr-2">check</v-icon>Approve
      </v-btn>
    </template>
    <v-card>
      <div class="px-4 pt-3">
        <span class="subheading font-weight-bold">Approve Details</span>
        <input
          ref="image"
          type="file"
          name="image"
          accept="image/*"
          style="display: none;"
          @change="setImage"
        />
        <v-layout row wrap align-center>
          <v-flex xs12 class="pa-0">
            <div class="text-xs-center">
              <v-img :src="imgUrl" contain/>
            </div>
            <VueCropper
              :dragMode="'none'"
              :viewMode="1"
              :autoCrop="false"
              :zoomOnWheel="false"
              :background="false"
              :src="imgSrc"
              v-show="false"
              ref="cropper"
            />
            <v-form ref="addImageForm" lazy-validation>
              <v-layout row wrap class="pt-2">
                <v-flex xs12>
                  <v-text-field
                    outline
                    readonly
                    :label="imgSrc ? 'Click here to change the image' : 'Click here to upload image'"
                    append-icon='attach_file'
                    :rules="imageRule"
                    v-model='fileName'
                    @click='launchFilePicker'
                  ></v-text-field>
                </v-flex>
              </v-layout>
            </v-form>
          </v-flex>
        </v-layout>
      </div>
      <v-divider></v-divider>
      <v-card-actions class="px-4">
        <v-btn
          large
          flat
          @click="resetImage()"
        >Cancel</v-btn>
        <v-spacer></v-spacer>
        <v-btn
          large
          depressed
          color="primary"
          @click="approveCashout"
          :loading="isUploading"
        >Approve</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
 _
filevue.jsinputtypesreset
6
Peter Parker

REFを使用してファイルのアップロード元の値をリセットできます。

this.$refs.fileupload.value=null;
 _

codepen - https://codepen.io/pratik__007/pen/mwyvjqp?editor=101

1
Patel Pratik