當我第一次上傳一張圖片然后從輸入中洗掉它并再次嘗試上傳時，圖片沒有上傳。
我這樣做的方式是我在我的組件中使用以下代碼，并且在上傳影像時我正在發出事件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>
uj5u.com熱心網友回復：
你應該使用的簡單方法
模型
在您的代碼中，洗掉后清除此值
uj5u.com熱心網友回復：
我的解決方案：
<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" 并在洗掉影像時增加它的值
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/378499.html
標籤：javascript Vue.js 上传
上一篇：反應式默認道具值
下一篇：ASPMVC不驗證模型