在我的 vuejs 應用程式中，我有一個模式可以通過檔案上傳插入一些用戶資料。
當用戶成功上傳任何內容時，我應該能夠清除所有表單欄位。
除了檔案上傳欄位之外，我所有的欄位都會被重置。
它將保持原樣。
在我的內部form.vue，對于檔案上傳，我有
<div >
<dashboard-input-label
identifier="document"
:settings="{ help: true, helpDirection: 'left' }"
>
Upload document
<template slot="helpText">
Maximum filesize is 5 MB. The default allowed file extensions
are: pdf, jpeg and png.
</template>
</dashboard-input-label>
<validator-v2
:identifier="identifier"
name="document_file"
:rules="{ required: { message: 'Document is required.' } }"
>
<custom-file-upload
ref="documentDocument"
v-model="documentFile"
:max-upload-file-size="5"
name="document_file"
></custom-file-upload>
</validator-v2>
</div>
以下是我的按鈕
<loading-button ref="submitBtn" size="normal">
Save & Add new
</loading-button>
這是我的 submitBtn 方法，
storeDocumentAndAddNew() {
this.isAddNew = true
const loader = this.$refs.submitBtn
this.storeDocument(loader)
},
對于欄位重置，我有以下內容，
reset() {
this.documentName= null
this.dateOfIssue= null
this.expiryDate= null
this.documentNumber = null
this.doesNotHaveDocumentNumber = false
this.doesNotExpire = false
this.documentFile = null
this.doesOptIn = false
this.isAddNew = false
this.documentFile = ''
this.$refs.documentDocument.value = null
},
一旦我點擊提交，除了這個檔案上傳欄位之外，每個欄位都會被重置。
以下是我的custom-file-upload.vue組件
<template>
<div>
<div >
<div @click="selectFile" >
<p >
<span >
<span v-if="filename !== null">{{ filename | limitString }} </span>
<span v-else><slot
name="currentFile"></slot></span>
</span>
<span >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline
points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
</span>
</p>
<input @change="showFileName" ref="fileInput" type="file" :name="name">
<div >
<toastr-alert @hidden="resetToastrMessage" v-if="message !== ''" :message="message"
:type="type"></toastr-alert>
</div>
</div>
</div>
</div>
</template>
即使我使用過，this.$refs.documentDocument.value = null它也沒有清除我的檔案上傳欄位....
更新
我使用了@wendt88 的答案，然后洗掉了該檔案。但是之前上傳的檔案名稱將保持原樣。例如，如果我嘗試上傳名為 dummy.pdf 的檔案，即使在成功提交后它也會顯示 dummy.pdf 文本...
現在我的重置看起來像這樣，
reset() {
this.documentName= null
this.dateOfIssue= null
this.expiryDate= null
this.documentNumber = null
this.doesNotHaveDocumentNumber = false
this.doesNotExpire = false
this.documentFile = null
this.doesOptIn = false
this.isAddNew = false
this.$refs.documentDocument.$refs.fileInput.value = null
},
以下是我的完整custom-file-upload.vue
<template>
<div>
<div >
<div @click="selectFile" >
<p >
<span >
<span v-if="filename !== null">{{ filename | limitString }} </span>
<span v-else><slot
name="currentFile"></slot></span>
</span>
<span >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline
points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
</span>
</p>
<input @change="showFileName" ref="fileInput" type="file" :name="name">
<div >
<toastr-alert @hidden="resetToastrMessage" v-if="message !== ''" :message="message"
:type="type"></toastr-alert>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.custom-file-upload input {
position: absolute;
cursor: pointer;
height: 0;
width: 0;
opacity: 0;
}
.cs--file-upload-current-file {
max-width: 220px;
}
label {
font-weight: 400 !important;
}
</style>
<script>
// Mixins
import HasToastrMessage from '@/Mixins/HasToastrMessage.js';
// Helper
import Helper from '@/Support/Helper.js';
export default {
mixins: [HasToastrMessage],
props: ['name', 'value', 'maxUploadFileSize'],
data() {
return {
file: null,
filename: null,
message: "",
type: "",
fileSize: 0,
maxFileSize: 10,
validFileTypes: [
'application/pdf',
'image/jpeg',
'image/png'
]
}
},
mounted() {
if (Helper.isset(this.maxUploadFileSize)) {
this.maxFileSize = this.maxUploadFileSize;
}
},
methods: {
showFileName(e) {
this.filename = collect(e.target.value.split('\\')).last();
let file = e.target.files[0];
let fileSize = file.size / 1000000;
if (fileSize > this.maxFileSize) {
this.showToastrErrorMessage(`The uploaded file is too big. Max size: ${this.maxFileSize} MB.`);
this.$refs.fileInput.value = null
this.filename = null
} else if (!this.validFileTypes.includes(file.type)) {
this.showToastrErrorMessage(`The uploaded file is invalid. Please upload valid type.`);
this.$refs.fileInput.value = null
this.filename = null
} else if (this.filename) {
this.file = file
this.showToastrSuccessMessage(`Your file is successfully uploaded.`);
this.$emit('uploaded')
} else {
this.showToastrErrorMessage(`Your file could not be uploaded. Please try again.`);
}
},
resetToastrMessage() {
this.message = "";
this.type = "";
},
selectFile() {
this.$refs.fileInput.click();
},
}
}
</script>
uj5u.com熱心網友回復：
this.$refs.documentDocument是一個 vue 組件，清除它的 value 屬性使用this.$set(this.$refs.documentDocument, 'value', null)-> https://v2.vuejs.org/v2/guide/reactivity.html
否則 documentDocument 不知道你已經改變了它的值
但如果要清除檔案輸入值，請運行（https://stackoverflow.com/a/16222877/1826106）：
this.$refs.documentDocument.$refs.fileInput.value = null;
this.$set(this.$refs.documentDocument, 'filename', null);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/460835.html
下一篇：如何在JavaScript中將List<Pair<String,String>>轉換為List<String>？