【发布时间】：2022-09-12 00:15:30
【问题描述】：
我有一个具有添加和编辑表单的模块。在添加和编辑表单中，用户可以上传文件。编辑时会显示上传的文件
在添加形式中，它可以工作。用户上传时，文件的文件大小正确显示文件大小
但我的问题是编辑表单时，每个文件在所有文件上显示 1kb 文件大小
你可以在这里看到问题：
我使用 filepond 包上传文件
我的Vue组件是这样的：
<template>
<b-card>
<b-form @submit=\"onSubmit\">
<b-row>
<b-col cols=\"8\">
...
<b-form-group
id=\"fieldset-horizontal\"
label-cols-sm=\"4\"
label-cols-lg=\"2\"
content-cols-sm
content-cols-lg=\"8\"
label-for=\"description\"
>
<template v-slot:label>
Description
</template>
<b-form-input id=\"description\" v-model=\"description\" required maxlength=\"100\"></b-form-input>
</b-form-group>
<b-form-group
id=\"fieldset-horizontal\"
label-cols-sm=\"4\"
label-cols-lg=\"2\"
content-cols-sm
content-cols-lg=\"9\"
label-for=\"files\"
>
<template v-slot:label>
Files
</template>
<file-pond v-if=\"this.$route.params.id\"
label-idle=\'Drag and drop files here... or <span class=\"filepond--label-action\"> Browse </span>\'
v-bind:allow-multiple=\"true\"
v-bind:server=\"server\"
v-bind:files=\"files\"
/>
<file-pond v-else
label-idle=\'Drag and drop files here... or <span class=\"filepond--label-action\"> Browse </span>\'
v-bind:allow-multiple=\"true\"
accepted-file-types=\'application/pdf, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, .xlsx\'
v-bind:server=\"server\"
v-bind:required=\"true\"
/>
</b-form-group>
</b-col>
<b-col cols=\"4\">
<b-button type=\"submit\" @click=\"save\" variant=\"success\">Save</b-button>
</b-col>
</b-row>
</b-form>
</b-card>
</template>
<script>
import { mapGetters, mapActions } from \"vuex\"
import vueFilePond from \"vue-filepond\"
...
export default {
data() {
return {
files: [],
server: {
process: (fieldName, file, metadata, load, error, progress, abort) => {
if(file.lastModified) {
if (this.dataFiles.findIndex(a => a.fileName == file.name) > -1) {
error(new Error(\'More than one file with the same name cannot be attached\'));
}
else {
const data = new FormData()
data.append(\'files[]\', file)
const CancelToken = axios.CancelToken
const source = CancelToken.source()
const config = {
method: \'post\',
url: `${apiUrl}/upload`,
data : data,
cancelToken: source.token,
onUploadProgress: (e) => {
progress(e.lengthComputable, e.loaded, e.total)
},
}
axios(config)
.then(response => {
this.setSaveFile({
id: response.data.id,
name: response.data.name,
url: response.data.url,
})
load(response.data.id)
})
.catch((thrown) => {
if (axios.isCancel(thrown)) {
console.log(\'Request canceled\', thrown.message)
} else {
error(\'error\')
}
})
return {
abort: () => {
source.cancel(\'Operation canceled by the user.\')
}
}
}
}
else { /* this will show data file when edit data */
this.setSaveFile({
id: metadata.id,
name: metadata.name,
url: metadata.url,
})
load(metadata.id)
}
},
revert: (uniqueFileId, load, error) => {
const type = this.$route.params.id ? \'edit\' : \'add\'
this.setDeleteFile({id: uniqueFileId, type: type } )
error(\'error\')
load()
},
},
}
},
async mounted() {
if(this.$route.params.id) {
await this.setEdit(this.$route.params.id)
}
},
computed: {
...mapGetters([
\"dataFiles\",
\"dataEditSuccess\",
])
},
watch: {
dataEditSuccess: {
handler(data) {
if (this.$route.params.id && data) {
this.showEditData()
}
},
immediate: true
}
},
methods: {
...mapActions([
\"setSaveFile\",
\"setDeleteFile\",
\"setEdit\",
]),
showEditData() {
const data = this.dataEditSuccess
this.description = data.description
for (let key in data.files) {
let filePost = {
source: data.files[key].name,
options: {
metadata: {
id: data.files[key].id,
name: data.files[key].name,
url: data.files[key].url,
},
},
}
this.files.push(filePost)
}
},
},
...
}
</script>
我怎么解决这个问题？
笔记 ：
文档：https://github.com/pqina/vue-filepond
更新 ：
我在代码盒中制作我的代码，如下所示：https://codesandbox.io/s/vue-filepond-live-demo-forked-0v3r3j
这里看起来相同的文件大小
实际上我可以取消注释这个脚本来解决我的问题：
file: {
name: this.filesFromApi[key].name,
size: this.filesFromApi[key].size,
},
但这使我无法在处理过程中获取metadata。所以process 不能被调用。你可以试试看控制台日志
-
请为您的代码提供一些上下文。哪个部分负责显示文件大小？你在做什么来获取文件大小？如果其中任何一个与 vuex 相关联，那么数据是如何存储的？你认为麻烦点可能在哪里？解释你的代码，不要只是粘贴它。
-
@yoduh我已经更新了我的问题。我在代码沙箱中演示我的脚本
标签： vue.js vuejs2 vue-component vuex filepond