【前后端】文件上传与接收的流程

具体流程

先废话一会 当你知道文字数据怎么前传后的时候 突然传文件是不是脑子一热？被这个坑害惨了 所以来给自己提个醒 也给跟我一样迷惑的解答一下

前端到后端 示意图

Axios 解析

当选择完文件后 双向绑定的配置项会变成一个File

data(){
	return {
		img: File
	}
}

接着用formData 以key value的方式 把图片放进value里

const axios = require('axios');
const formData = new FormData();
formData.append('file', File);
formData.append('key1','value1');
formData.append('key2','value2');
// 在头部设置类型为 form-data
const headers = { 'Content-Type': 'multipart/form-data' };
axios.post(`url`, formData, { headers }).
then((res) => {
    // 正确执行后
}).catch(function (error) {
    // 错误所执行的
    window.alert(error);
});

key	value
file	图片文件
key1	value1
key2	value2

PHP解析

// 可以传入一个名字为图片保存的名字
function UploadImg($fill_name){
    // 允许上传的图片后缀
    $allowedExts = array("webp", "jpg", "png");
    // 分割字符串为数组 xxx.png 变成了 ['xxx'] ['png']
    $temp = explode(".", $_FILES["file"]["name"]);
    // end取数组最后一个值
    $extension = end($temp); // 获取文件后缀名
    // 判断文件类型
    if ((($_FILES["file"]["type"] == "image/webp")
         || ($_FILES["file"]["type"] == "image/jpg")
         || ($_FILES["file"]["type"] == "image/png"))
        && ($_FILES["file"]["size"] < 1024000)   // 小于 200 kb
        && in_array($extension, $allowedExts))
    {
        if ($_FILES["file"]["error"] > 0)
        {
            return "错误：" . $_FILES["file"]["error"];
        }
        else
        {
            // 判断是否有同名文件
            if (file_exists("./$fill_name.$extension"))
            {
                return "文件/ID已存在，请勿重复上传";
            }
            else
            {
                // 路径 将缓存的文件复制到某个路径里
                move_uploaded_file($_FILES["file"]["tmp_name"], "./$fill_name.$extension");
                return "成功上传文件";
            }
        }
    }
    else
    {
        return "文件格式只允许 jpg png webp 或 文件大小超过1M";
    }
}