FastApi-17-页面美化-2

最新推荐文章于 2025-05-31 12:49:09 发布

Python研究所

最新推荐文章于 2025-05-31 12:49:09 发布

阅读量343

点赞数

CC 4.0 BY-SA版权

分类专栏： FastApi 文章标签： html svg 接口 restful nagios

本文链接：https://blog.csdn.net/qq_40442753/article/details/116725940

FastApi 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用LayUI库实现文件的手动上传功能，包括配置参数auto为false以禁用自动上传，并展示了如何在上传成功后进行提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手动上传

上一篇，我们知道 LayUI 默认会自动上传文件，那么我们怎么关闭自动上传，实现手动点击上传呢？

auto 参数

<script>
        layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        upload.render({
            elem: '#up_function' //绑定元素
            ,url: '/upfile1/' //上传接口
            ,accept: 'file' //限制上传文件类型
            ,field: 'upload_list' //传给FastApi后端的参数名
            ,auto: false //关闭自动上传
            ,done: function(res){
            //上传完毕回调
            if (res.code == 0){
                //请求成功后的动作
            }
            }
            ,error: function(){
            //请求异常回调
            }
        });
        });
        </script>

如上，我们增加 auto：false 参数即可。

效果

我们点击显示文件信息才会上传。

上传成功后提示

在 done 方法中添加提示

<script>
        layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        upload.render({
            elem: '#up_function' //绑定元素
            ,url: '/upfile1/' //上传接口
            ,accept: 'file' //限制上传文件类型
            ,field: 'upload_list' //传给FastApi后端的参数名
            //,auto: false //关闭自动上传
            ,done: function(res){
            //上传完毕回调
            if (res.code == 0){
                var layer = layui.layer;
                layer.msg('上传成功！');
                console.log(res);
            }
            }
            ,error: function(){
            //请求异常回调
            }
        });
        });
        </script>

效果

为了方便演示，我们选择自动上传并且进行提示。

可以看到，后台处理完后，返回 code=0，LayUI 即可对上传结果进行判断。

后台需要返回的数据格式

return {'result':'success!','code':0}

其中，code 是必须的。

预览

为了方便演示，我们选择图片进行上传。

代码

html 代码：

<div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">上传图片</button>
        <div class="layui-upload-list">
          <img class="layui-upload-img" id="demo1">
          <p id="demoText"></p>
        </div>
      </div>

LayUI 的前端脚本

<script>
    layui.use('upload', function(){
        var upload = layui.upload,
            $ = layui.jquery;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/upfile1/' //改成您自己的上传接口
            ,field: 'upload_list' //传给FastApi后端的参数名
            ,accept: 'images'
            ,auto: false
            ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#demo1').attr('src', result); //图片链接（base64）
            });
            }
            ,done: function(res){
            //如果上传失败
            if(res.code > 0){
                return layer.msg('上传失败');
            }
            //上传成功
            }
            ,error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
            }
        });
    });