Operaciones básicas del proyecto ThinkPHP6 (17. Carga de archivos del sistema de archivos para la parte de combate real)

Carga de archivos del sistema de archivos

Controlador:

<?php
namespace app\admin\controller;
use app\BaseController;
use think\facade\Filesystem;
use think\facade\View;

class Upload extends BaseController
{
    
    
	// 上传页面
    public function index(){
    
    
        return View::fetch("index");
    }
	
	// 上传文件方法
    public function image(){
    
    
        if(!$this->request->isPost()){
    
    
            return show(config("status.error"), "请求不合法");
        }
        $file = $this->request->file("file");
        $savename = Filesystem::putFile('topic', $file);
        if(!$savename){
    
    
            return show(config("status.error"), "上传图片失败");
        }
        return show(config("status.success"), "上传成功", ["savename"=>$savename]);
    }
}

De forma predeterminada, se carga en el servidor local. Se generará un runtime/storagearchivo con la fecha actual como subdirectorio y codificación md5 de microsegundos como nombre de archivo en el directorio. Por ejemplo,
Inserte la descripción de la imagen aquí
considerando que runtimeno se puede acceder directamente al directorio, si el archivo que desea cargar es Si puede acceder o descargar directamente, puede utilizar el publicmétodo de almacenamiento (también puede personalizar el directorio):

$savename = Filesystem::disk('public')->putFile('topic', $file);

Resultado de la carga:
Inserte la descripción de la imagen aquí
¿Por qué hay un directorio de almacenamiento adicional aquí? Debido a que el directorio raíz predeterminado está configurado en el archivo de configuración de configuración, en el
filesystem.phparchivo de configuración:

<?php

return [
    // 默认磁盘
    'default' => env('filesystem.driver', 'local'),
    // 磁盘列表
    'disks'   => [
        'local'  => [
            'type' => 'local',
            'root' => app()->getRuntimePath() . 'storage',
        ],
        'public' => [
            // 磁盘类型
            'type'       => 'local',
            // 磁盘路径
            'root'       => app()->getRootPath() . 'public/storage',
            // 磁盘路径对应的外部URL路径
            'url'        => '/storage',
            // 可见性
            'visibility' => 'public',
        ],
        // 更多的磁盘配置信息
    ],
];

Si no desea un storagedirectorio, puede modificar la configuración pública:

'root' => app()->getRootPath() . 'public',

resultado:
Inserte la descripción de la imagen aquí

Página delantera

Aquí está la página que usa layuiadmin:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>上传</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="{__STATIC__}/admin/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="{__STATIC__}/admin/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <style>
    .layui-upload-img{
     
     width: 92px; height: 92px; margin: 0 10px 10px 0;}
  </style>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">普通图片上传</div>
          <div class="layui-card-body">
            <div class="layui-upload">
              <button type="button" class="layui-btn" id="test-upload-normal">上传图片</button>
              <div class="layui-upload-list">
                <img class="layui-upload-img" id="test-upload-normal-img">
                <p id="test-upload-demoText"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="{__STATIC__}/admin/layuiadmin/layui/layui.js"></script>
  <script>
  layui.config({
     
     
    base: '{__STATIC__}/admin/layuiadmin/'
  }).extend({
     
     
    index: 'lib/index'
  }).use(['index', 'upload'], function(){
     
     
    var $ = layui.jquery
    ,upload = layui.upload;

    //普通图片上传
    var uploadInst = upload.render({
     
     
      elem: '#test-upload-normal',
      url: '/admin/upload/image',
      before: function(obj){
     
     
        //预读本地文件示例,不支持ie8
        obj.preview(function(index, file, result){
     
     
          $('#test-upload-normal-img').attr('src', result);
        });
      },
      done: function(res){
     
     
        if(res.status === 1){
     
     
          return layer.msg('上传成功');
        }else{
     
     
          return layer.msg('上传失败');
        }
      },
      error: function(){
     
     
        var demoText = $('#test-upload-demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
     
     
          uploadInst.upload();
        });
      }
    });

  });
  </script>
</body>
</html>

Inserte la descripción de la imagen aquí

Sugerencias: puede verificar el tipo de archivo, el tamaño y otros atributos en el controlador de carga.

Supongo que te gusta

Origin blog.csdn.net/zy1281539626/article/details/112062472
Recomendado
Clasificación