如何使用codeigniter和vue js上传多个文件

CodeIgniter是一个轻量级的PHP框架，Vue.js是一个用于构建用户界面的渐进式JavaScript框架。使用CodeIgniter和Vue.js上传多个文件可以通过以下步骤实现：

在CodeIgniter中创建一个上传文件的表单页面，包括一个用于选择多个文件的文件输入字段和一个提交按钮。使用Vue.js绑定文件输入字段，以便可以实时获取选择的文件列表。
在CodeIgniter的控制器中，编写一个处理文件上传的方法。该方法将从文件输入字段获取上传的文件列表，并逐个处理每个文件。
在CodeIgniter的配置文件中，设置上传文件的目录和允许上传的文件类型、大小等限制。
在处理文件上传的方法中，使用CodeIgniter的上传类库来处理文件上传。通过循环遍历文件列表，逐个上传文件并保存到指定目录中。
在Vue.js中，可以使用Axios库来发送异步请求，将选中的文件列表发送给CodeIgniter的处理文件上传的方法。可以使用FormData对象来构建表单数据，以便包含文件列表。

以下是一个示例的代码，演示如何使用CodeIgniter和Vue.js上传多个文件：

在CodeIgniter的视图文件中（upload_form.php）：

<!DOCTYPE html>
<html>
<head>
    <title>文件上传</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="file" multiple v-on:change="handleFileSelect">
        <button v-on:click="uploadFiles">上传</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                fileList: []
            },
            methods: {
                handleFileSelect(event) {
                    this.fileList = event.target.files;
                },
                uploadFiles() {
                    let formData = new FormData();
                    for (let i = 0; i < this.fileList.length; i++) {
                        formData.append('files[]', this.fileList[i]);
                    }
                    axios.post('/upload/process', formData)
                        .then(response => {
                            console.log(response.data);
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

在CodeIgniter的控制器中（Upload.php）：

<?php
class Upload extends CI_Controller {
    public function __construct() {
        parent::__construct();
        $this->load->helper(array('form', 'url'));
    }

    public function index() {
        $this->load->view('upload_form');
    }

    public function process() {
        $config['upload_path'] = './uploads/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = 1024; // KB
        $config['encrypt_name'] = TRUE;

        $this->load->library('upload', $config);

        $files = $_FILES['files'];
        $uploaded = array();
        foreach ($files['name'] as $key => $name) {
            $_FILES['file']['name'] = $files['name'][$key];
            $_FILES['file']['type'] = $files['type'][$key];
            $_FILES['file']['tmp_name'] = $files['tmp_name'][$key];
            $_FILES['file']['error'] = $files['error'][$key];
            $_FILES['file']['size'] = $files['size'][$key];

            if ($this->upload->do_upload('file')) {
                $uploaded[] = $this->upload->data();
            } else {
                $uploaded[] = array('error' => $this->upload->display_errors());
            }
        }

        echo json_encode($uploaded);
    }
}

上述代码示例中，通过Vue.js监听文件输入字段的change事件，获取选中的文件列表并保存到Vue实例的fileList属性中。点击上传按钮时，使用Axios发送POST请求，将选中的文件列表作为FormData发送到CodeIgniter的process方法。在process方法中，循环处理文件列表，使用CodeIgniter的上传类库来处理文件上传，并将上传结果以JSON格式返回给前端。

请注意，上述代码仅供参考，实际使用时需要根据具体情况进行适当修改和完善。同时，还需要根据自己的项目需求对上传文件的验证、存储和处理进行进一步的开发。

如何使用codeigniter和vue js上传多个文件

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐