vue + ajax + php实现向服务器上传文件和从服务器上下载文件

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="file" id="file"/>
        <button @click="upload">上传</button>
        <a v-if="download" :href="fileName" download target="_blank">
            <button @click="downLoad">下载查看</button>
        </a>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                fileName: '',
                download: false
            },
            methods: {
                // 文件上传
                upload() {
                    let fileData = document.getElementById('file').files[0]
                    let userNo = '123'
                    var formData = new FormData()
                    formData.append('fileData', fileData)
                    formData.append('userNo', '123')
                    let _this = this
                    $.ajax({
                        type: 'POST',
                        data: formData,
                        url: 'http://localhost:11111/phpStudy/uploadFile.php', // 请求的uploadFile.php的地址
                        dataType: 'json', // 传递数据的格式
                        async: false, // 这是重要的一步，防止重复提交的
                        cache: false,  // 设置为false，上传文件不需要缓存。
                        contentType: false, // 设置为false,因为是构造的FormData对象,所以这里设置为false。
                        processData: false, // 设置为false,因为data值是FormData对象，不需要对数据做处理。
                        success: function(data) {
                            console.log(data)
                            alert(data.msg)
                            _this.fileName = 'http://localhost:11111/phpStudy/' + userNo + '/' + data.fileName
                            _this.download = true
                        },
                        error: function(data) {
                            console.log('错误')
                        }
                    })
                },
                // 文件下载
                downLoad() {
                    console.log(this.fileName)
                }
            }
        })
    </script>
</body>
</html>

后台PHP代码：upload.php

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2019-1-21 0021
 * Time: 15:17
 */

header("Content-Type: text/html; charset=UTF-8");
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE');

// 获取上传文件data
$fileData = $_FILES['fileData'];
// 文件名
$fileName = $fileData['name'];
// 用户编号
$userNo = $_POST['userNo'];

// 服务器临时文件
$tmp_name = $fileData['tmp_name'];

// 转码为GB2312（防止文件夹名称为中文时乱码）
$fileName = iconv('UTF-8', 'GB2312', $fileName);

// 接收到的文件要保存的文件夹名称
$dirName = $userNo;
// 检查服务器当前地址有无名称为用户编号的
if (!file_exists($dirName)) {
    // 如果该文件夹不存在，新建该文件夹
    $cc = mkdir($dirName, 0777);
    if ($cc === true) {
        $msg = '创建'.$dirName.'文件夹成功！';
    } else {
        $msg = '创建'.$dirName.'文件夹失败！';
        echo json_encode($msg);
        return;
    }
} else {
    // 如果该文件夹已存在
    $msg = '文件夹'.$dirName.'在当前文件夹里已存在！';
}

// 目标地址
$desUrl = $dirName."/".$fileName;
// 将服务器上的临时文件移动至指定的目录 (move_uploaded_file函数)
$status = move_uploaded_file($tmp_name, $desUrl);
if ($status === true) {
    // 转码为UTF-8
    $fileName = iconv('GB2312', 'UTF-8', $fileName);
    // 输出语句
    echo json_encode(array('status' => 'success', 'msg' => '上传成功！', 'fileName' => $fileName));
} else {
    // 输出语句
    echo json_encode(array('status' => 'error', 'msg' => '上传失败！', 'fileName' => ''));
}

上传成功后，会在upload.php统计目录下创建名为123的文件夹，文件夹里即为上传的文件。

vue + ajax + php实现向服务器上传文件和从服务器上下载文件

猜你喜欢