如何使用 Laravel + React 检查上传文件的类型?

Posted

技术标签:

【中文标题】如何使用 Laravel + React 检查上传文件的类型?【英文标题】:How can I check the type of an upload file using Laravel + React? 【发布时间】:2020-12-14 12:12:44 【问题描述】:

我正在使用 React + Laravel。对于上传文件,我使用 Maatwebsite 库。我只是在学习,所以这一切都是为了一个“家庭项目”:) 有一个表单,其中包含用于选择文件和按钮的输入:

<form>
  <input type="file" name="file" onChange=e => preUploadFile(e) />
  <Button onClick=importFileHandler disabled=!file>Upload</Button>
</form>

我把选中的文件保存到状态:

const [file, setFile] = useState(null);
const preUploadFile = e => 
        const file = e.target.files[0];
        setFile(file);
;

然后我将状态“丢弃”到 fetch 中:

// post for import
export const importFileInDataBase = async file => 
    try 
        const formData = new FormData();
        formData.append("file", file);
        await fetch(`$url/v2/organizations/import`, 
            method: "POST",
            body: formData
        ).then(response => 
            console.log("result", response);
        );
     catch (error) 
        console.log(error);
    
;

之后,我通过单击按钮调用此函数,也通过单击按钮调用该函数,该函数将通过 get 请求从表中请求数据并将其呈现在页面上。

const importFileHandler = () => 
    new Promise((resolve, reject) => 
        resolve(importFileInDataBase(file));
    ).then(() => 
        getAllOrganizations();
    );
;

我的模型在后端:

class ScheduledInspectionModel extends Model

    protected $table = 'scheduled_inspection';
    protected $fillable = ['name_smp', 'name_control', "verification_start", "verification_end", 'verification_duration'];
    public $timestamps = false;

控制器:

class OrganizationsImportController extends Controller

    public function import(Request $request)
    
        // return dd($request->file);
        Excel::import(new OrganizationsImport, $request->file);
        return response()->json('Success upload');
    

以及带有导入设置的文件:

class OrganizationsImport implements ToModel

    /**
     * @param array $row
     *
     * @return \Illuminate\Database\Eloquent\Model|null
     */
    public function model(array $row)
    
        return new ScheduledInspectionModel([
            'name_smp' => $row[0],
            'name_control' => $row[1],
            'verification_start' => $row[2],
            'verification_end' => $row[3],
            'verification_duration' => $row[4],
        ]);
    

请告诉我如何\需要检查导入文件的类型(只需要 .xls 文件)? PS:另一个问题,我想显示一些有关导入成功与否的消息。我在控制器中返回消息response () -&gt; json ('Import completed'); 我怎样才能使用它? PSS:也许它会派上用场dd($ response);

Illuminate\Http\UploadedFile #282
  -test: false
  -originalName: "test.xls"
  -mimeType: "application/vnd.ms-excel"
  -error: 0
  #hashName: null
  path: "/tmp"
  filename: "phpzFcBzS"
  basename: "phpzFcBzS"
  pathname: "/tmp/phpzFcBzS"
  extension: ""
  realPath: "/tmp/phpzFcBzS"
  aTime: 2020-08-25 14:39:02
  mTime: 2020-08-25 14:39:02
  cTime: 2020-08-25 14:39:02
  inode: 318670
  size: 6144
  perms: 0100600
  owner: 1000
  group: 1000
  type: "file"
  writable: true
  readable: true
  executable: false
  file: true
  dir: false
  link: false

【问题讨论】:

FWIW:security.stackexchange.com/questions/57856/… 【参考方案1】:

您可以只使用文件输入的accept 属性。

<input type="file" name="file" accept=".xls,application/vnd.ms-excel" onChange="..." />

这将只允许您在单击按钮时选择 .xls 文件。

【讨论】:

是的,看起来他的后端已经被覆盖了。如果Excel::import() 能够导入电子表格以外的其他内容,我会感到惊讶。 是的,有道理。我仍然会提到未来访客的危险:) 同意。检查扩展名,检查 mime 类型,尽可能地限制,但永远不要相信。 OWASP 一直是这些主题的好来源:owasp.org/www-community/vulnerabilities/… @ficuscr - 您的应用发送到服务器的所有内容都是一种信任练习。您无法保证浏览器发送给客户端的任何内容的安全性。客户端上的任何 Jaavscript 代码或其他任何东西都无法改变这一点。这无助于解决潜在的安全问题,而是对用户体验的改进。他的后端被文件的解析方式所覆盖。

以上是关于如何使用 Laravel + React 检查上传文件的类型?的主要内容,如果未能解决你的问题,请参考以下文章

Laravel CORS 第一篇文章的问题,如何解决?

Laravel 5.3,检查上传的文件是不是大于upload_max_filesize(可选上传)

Laravel Controller:如何使用函数存储和创建

React Fetch 到 Laravel API 创建新会话

跨域图片上传Angular+laravel

如何使用 Laravel Sanctum 和 React 修复 401 Unauthorized 错误?