JavaScript 关于form表单多文件上传的3种方式，

山河故人163

已于 2023-06-30 15:41:56 修改

阅读量2.8k

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-06-30 15:21:14 首次发布

本文链接：https://blog.csdn.net/weixin_62733705/article/details/131477292

版权

如果是直接上传文件，可以使用这种

 <form id="myForm" action="http://8.123.456.118:3002/api_getImg/" method="post" enctype="multipart/form-data">
 	<label for="">请上传：</label>
    <input type="file" multiple="" name="image[]"><br>
    <input type="hidden" name="u_name" :value="uName">
    <input type="submit" value="提交">
  </form>

如果上传文件后不需要页面跳转，可以添加标签

<form id="myForm" action="http://8.123.456.118:3002/getImg/" method="post" enctype="multipart/form-data"
      name="fileinfo" target="uploadFrame">
   <label for="">请上传：</label>
   <input ref="fileInputRef" type="file" multiple="" name="image[]" @change="handleFileChange">
   <input type="hidden" name="u_name" :value="uName">
   <input ref="fileSubmitRef" type="submit" value="提交">
</form>
<iframe id="uploadFrame" name="uploadFrame" style="display: none;"></iframe>

3，如果需要自定义上传按钮后的操作，可以使用axios技术

<template>
  <form id="myForm" @submit.prevent="uploadFile">
    <label for="">请上传：</label>
    <input type="file" ref="fileInput" multiple name="image[]"><br>
    <input type="hidden" name="u_name" :value="uName">
    <input type="submit" value="提交">
  </form>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      uName: ''
    };
  },
  methods: {
    uploadFile() {
      const formData = new FormData();
      const files = this.$refs.fileInput.files;
      
      // 添加文件数据到表单中
      for (let i = 0; i < files.length; i++) {
        formData.append('image[]', files[i]);
      }

      // 添加其他字段数据到表单中
      formData.append('u_name', this.uName);

      // 发送异步请求
      axios.post('http://8.123.456.118:3002/api_getImg/', formData)
        .then(response => {
          // 处理上传成功的回调
          console.log('上传成功');
          // 执行其他操作
        })
        .catch(error => {
          // 处理上传失败的回调
          console.error('上传失败', error);
          // 执行其他操作
        });
    }
  }
};
</script>

以上就是我总结的form表单文件上传的几种方式。
下面是我项目的代码，用的vue2 + antd：

<template>
    <div class="slow-offline">
        <a :href="downloadTemplateUrl"><a-button type="primary" icon="download" class="down-btn">点击下载模板</a-button></a>

        <!-- 慢速下线系统 -->
        <a-table :columns="columns" :data-source="data" bordered>
            <span slot="customTitle"><a-icon type="smile-o" /> 上传人</span>
            <span slot="file_percent" slot-scope="text">
                <a-tag :color="text.split('.')[0] == 100 ? 'green' : text.split('.')[0] >= 60 ? 'geekblue' : 'volcano'">
                    {{ text }}
                </a-tag>
            </span>
            <span slot="file_bar" slot-scope="text" :class="{ 'bold': text == '运行中' }">
                {{ text }}
            </span>
            <span slot="action" slot-scope="text, row" class="btns-box">
                <a-button :disabled="row.file_bar == '完成'" type="primary" class="btn" @click="startBtn(row)">开始</a-button>
                <a-button :disabled="row.file_bar == '完成'" type="dashed" class="btn" @click="suspendBtn(row)">暂停</a-button>
                <a-button type="danger" class="btn" @click="deleteBtn(row)">删除</a-button>
                <a :href="baseUrl + '/work_tasks/' + row.file_name + '/download'"><a-button class="btn">下载</a-button></a>
            </span>
        </a-table>

        <!-- 上传文件 -->
        <div class="upload-box">
            <form id="myForm" action="http://8.123.456.118:3002/getImg/" method="post" enctype="multipart/form-data"
                name="fileinfo" target="uploadFrame">
                <label for="">请上传：</label>
                <input ref="fileInputRef" type="file" multiple="" name="image[]" @change="handleFileChange" v-show="false">
                <input type="hidden" name="u_name" :value="uName">
                <a-button type="primary" icon="upload" @click="changeFile">选择文件</a-button>
                {{ fileName }}
                <div>
                    <input ref="fileSubmitRef" type="submit" value="提交" v-show="false">
                    <a-button type="primary" :disabled="isDisable" :loading="loading" @click="submitFile"
                        class="submit-file-btn">提交</a-button>
                </div>
            </form>
            <iframe id="uploadFrame" name="uploadFrame" style="display: none;"></iframe>
        </div>
        <div class="refresh-btn">
            <div class="refresh-box">
                <a-button type="primary" @click="refreshBtn"><a-icon type="rocket" />刷新</a-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getLegalList, runStart, runSuspend, runDelete } from '@/api/tools/offlinesystem/slowoffline.js'

export default {
    name: 'SlowOffline',
    data() {
        return {
            data: [],
            baseUrl: 'http://8.123.456.118:3002',
            uName: JSON.parse(localStorage.getItem('userUser')).name,
            fileName: '未选择任何文件', // 文件名称
            loading: false,
            isDisable: true, // 文件提交按钮是否可点
            columns: [
                {
                    dataIndex: 'user',
                    key: 'user',
                    slots: { title: 'customTitle' },
                    scopedSlots: { customRender: 'user' },
                    align: 'center'
                },
                {
                    title: '文件名称',
                    dataIndex: 'file_name',
                    key: 'file_name',
                    align: 'center'
                },
                {
                    title: '时间',
                    dataIndex: 'time',
                    key: 'time',
                    align: 'center'
                },
                {
                    title: '进度',
                    key: 'file_percent',
                    dataIndex: 'file_percent',
                    scopedSlots: { customRender: 'file_percent' },
                    align: 'center'
                },
                {
                    title: '状态',
                    dataIndex: 'file_bar',
                    key: 'file_bar',
                    scopedSlots: { customRender: 'file_bar' },
                    align: 'center'
                },
                {
                    title: '剩余数量',
                    dataIndex: 'file_status',
                    key: 'file_status',
                    align: 'center'
                },
                {
                    title: '预估完成时间',
                    dataIndex: 'file_time',
                    key: 'file_time',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    scopedSlots: { customRender: 'action' },
                    align: 'center'
                },
            ]
        }
    },
    created() {
        this.getLegalList()
    },
    computed: {
        downloadTemplateUrl() {
            return this.baseUrl + '/model'
        },
    },
    methods: {
        // 获取数据
        async getLegalList() {
            const res = await getLegalList()
            if ((res.status == 200 || res.statusText == 'OK') && res.data && res.data.length) {
                if (Array.isArray(res.data)) {
                    this.data = res.data
                } else {
                    setTimeout(() => {
                        this.refreshBtn()
                    }, 1500);
                }
            } else {
                this.data = []
            }
        },
        // 开始按钮
        async startBtn(row) {
            await runStart(row.file_name)
            this.refreshBtn()
        },
        // 暂停按钮
        async suspendBtn(row) {
            await runSuspend(row.file_name)
            this.refreshBtn()
        },
        // 删除按钮
        async deleteBtn(row) {
            await runDelete(row.file_name)
            this.refreshBtn()
        },
        // 文件选择的change事件
        handleFileChange(event) {
            this.fileName = event.target.files.length > 1 ? `${event.target.files.length}个文件` : event.target.files[0].name
        },
        // 选择文件的按钮
        changeFile() {
            this.$refs.fileInputRef.click()
        },
        // 提交文件的按钮
        submitFile() {
            this.loading = true
            this.$refs.fileSubmitRef.click()
            setTimeout(() => {
                this.getLegalList()
                this.loading = false
            }, 1000);
        },
        // 刷新按钮
        refreshBtn() {
            this.fileName = '未选择任何文件'
            this.getLegalList()
        }
    },
    watch: {
        fileName(val) {
            this.isDisable = val == '未选择任何文件' ? true : false
        }
    }
}
</script>
<style lang="less" scoped>
.slow-offline {
    .down-btn {
        margin: 20px 0;
    }

    .btns-box {
        .btn {
            margin-left: 5px;
        }
    }

    .upload-box {
        margin-top: 10px;
    }

    .submit-file-btn {
        margin-top: 10px;

        &:hover {
            transform: scale(1.2);
            transition-duration: 0.5s;
        }
    }

    .refresh-btn {
        display: flex;
        justify-content: center;
        align-items: center;

        .refresh-box {
            &:hover {
                transform: scale(1.2);
                transition-duration: 0.5s;
            }
        }

    }

    .bold {
        font-size: 18px;
        font-weight: bold;
    }
}
</style>
<style>
.ant-table-tbody {
    background-color: #fff;
}

.ant-table-tbody>tr>td {
    padding: 10px 16px;
}
</style>