前端(layui)如何以图片流的形式上次给后端

img


不知道具体怎么去上传图片流给后端,我对这个是个不怎么了解也不会,求解

https://blog.csdn.net/qq_47750283/article/details/119117293

// 引入上传工具:upload
layui.use('upload', function () {
var upload = layui.upload; // 调用工具
// 执行实例
var uploadInst = upload.render({
elem: "#img1" // 指向容器选择器,与id进行绑定
});
})

https://www.cnblogs.com/anhan/p/15217556.html

你选择这个是批量上传图片的,给你一个简单例子:

<form class="layui-form ok-form" lay-filter="filter">
<div class="layui-form-item">
        <label class="layui-form-label">上传照片</label>
        <div class="layui-input-inline uploadHeadImage">
            <div class="layui-upload-drag" id="uploadpic">
                <i class="layui-icon"></i>
                <p>点击上传图片,或将图片拖拽到此处</p>
            </div>
        </div>
        预览图:
        <div class="layui-upload-list uploader-list" id="uploader-list"></div>
        <input type="hidden" id="imgUrls" name="picpath" class="layui-input">
    </div>
<div class="layui-form-item">
      <div class="layui-input-block">
        <input type="hidden" name="action" value="addsave" lay-verify="required">
        <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
<script src="/lib/layui/layui.js"></script> 
<script>
    layui.use(["element", "form", "laydate", "okLayer", "okUtils",'upload'], function () {
        window.form = layui.form;
        window.$ = layui.jquery;
        let laydate = layui.laydate;
        let Layer = layui.Layer;
        let okUtils = layui.Utils;
        let upload = layui.upload;
        okLoading.close();
var s = "";//保存图片地址
        var upload_num=5;
        //拖拽上传
            var uploadInst = upload.render({
                elem: '#uploadpic'
                ,url: '/api/ajax_upload.php' //改成您自己的上传接口
                ,acceptMime: 'image/*' //普通文件
                ,exts: 'jpg|png|gif|bmp|jpeg' //只允许上传压缩文件
                , size: 1000
                , multiple: true
                , number: upload_num
                , before: function (obj) {
                    this.data={'picpath':'koubei'};
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        var oldsttr=$("#imgUrls").val();
                         var choose_length=Object.keys(obj.pushFile()).length;
                        var img_arr=[];
                        if(oldsttr!=''){
                            img_arr=oldsttr.split(",");
                        }
                        if(img_arr.length+choose_length>upload_num){
                            layer.msg('最多上传'+upload_num+'张图片', {icon: 5});
                            var UPLOAD_FILES = obj.pushFile();
                            for(var x in UPLOAD_FILES){
                                delete UPLOAD_FILES[x];
                            }
                            return false;
                        }
                    //预读本地文件示例,不支持ie8
                    obj.preview(function (index, file, result) {
                        if(file.size >0.3*1024*1024){                 //判断上传每个图片大小
                            layer.msg('文件大小不得超过0.3M', {icon: 5});  //layui弹出层,icon:5,时,是一个嘴角向下的脸
                            var UPLOAD_FILES = obj.pushFile();
                            for(var x in UPLOAD_FILES){
                                delete UPLOAD_FILES[x];
                            }
                            return false;
                        }
                    });
                }
                , done: function (res,index) {
                    delete this.files[index]//移除队列中文件 ---这很重要防止之前的图片重复上传
                    if(res.code==0){
                        if (s == "") {
                            s = JSON.stringify(res.imgsrc);
                        } else {
                            s = s + "," + JSON.stringify(res.imgsrc);
                        };
                        $('#uploader-list').append('<div id="" class="file-iteme"><div class="handle"><i class="layui-icon layui-icon-delete"></i></div><img style="width: 100px;height: 100px;" src='+ res.imgsrc +'></div>')
                        $("#imgUrls").val(s);
                    }
                    return layer.msg(res.msg);
                }           
                , error: function () {
                  
                }

            });
</script>

layui文档

参考:https://www.layuiweb.com/doc/modules/upload.html#use


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>upload模块快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<button type="button" class="layui-btn" id="test1">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>
</body>
</html>