Vue.js单输入框多文件上传时如何显示对应上传文件名

该需求完全可以实现。首先注意你的原有代码存在方法名不匹配的问题：模板中绑定的handleFileUploads、submitFiles和实际定义的方法名不一致，需要先修正才能正常运行。

实现思路 #

• 在data中新增状态字段，存储上传状态标识、当前正在上传的文件名
• 在模板中添加上传状态展示区域，绑定对应状态
• 可根据需要选择两种展示逻辑：
  • 一次性提交所有文件：上传时展示全部待上传的文件名列表
  • 串行逐个提交文件：上传时实时展示当前正在上传的单个文件名

完整修正后的可运行代码（串行逐个上传版本） #

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<div id="asad">
    <div class="container">
        <div>
            <h2>多文件上传</h2>
            <hr/>
            <label>选择文件
                <input type="file" multiple @change="handleFileUpload( $event )"/>
            </label>
            <br>
            <!-- 上传状态展示区域 -->
            <div v-if="isUploading" style="margin: 10px 0;color: #2c5aa0;">
                正在上传：*{{ currentUploadName }}*
            </div>
            <button v-on:click="submitFiles" :disabled="isUploading">提交上传</button>
        </div>
    </div>
</div>
</body>

<script>
    var app = new Vue({
    el: '#asad',
        data(){
            return {
                files: [],
                isUploading: false,
                currentUploadName: ''
            }
        },
        
        methods: {
            handleFileUpload( event ){
                this.files = Array.from(event.target.files);
            },
            
            async submitFiles(){
                this.isUploading = true;
                try {
                    // 串行逐个上传文件
                    for(let i = 0; i < this.files.length; i++ ){
                        let file = this.files[i];
                        // 更新当前正在上传的文件名
                        this.currentUploadName = file.name;
                        let formData = new FormData();
                        formData.append('file', file);
                        await axios.post( '/multiple-files',
                            formData,
                            {
                                headers: {
                                        'Content-Type': 'multipart/form-data'
                                }
                            }
                        )
                    }
                    console.log('全部上传成功!!');
                } catch(e) {
                    console.log('上传失败!!', e);
                } finally {
                    // 上传完成后重置状态
                    this.isUploading = false;
                    this.currentUploadName = ''
                }
            }
        }
    })
</script>
</html>

改动说明 #

1. 修正了原有代码中方法名不匹配的错误
2. 新增了上传状态控制，上传过程中会禁用提交按钮避免重复提交
3. 上传过程中会实时显示当前正在上传的文件名，全部上传完成后自动隐藏提示
4. 如果你需要一次性提交所有文件，只需在提交前将所有文件名拼接赋值给currentUploadName即可，无需修改为串行上传逻辑。

内容的提问来源于stack exchange，提问作者Inayat Kazi