图片上传问题。

提问 已结
25 787
三毛
三毛 2018-5-10
悬赏:20飞吻
layui图片上传后 直接存到目录下边了 我要把路径存到数据库 该怎么办
回帖
  • @三毛 这是我修改的,测试没问题,但是也不能完全保证没错误,因为也改了一些其他的逻辑,不知道是不是有相互作用的影响。你可以试一下。
    0 回复
  • @三毛 额,怎么感觉更加不明白你的需求了哈。我说一下我们上传图片的功能实现的逻辑吧,你看下有可以参考的价值不。例子还是用户的头像。
    第一,用户头像数据库中保存的就是一个路径。
    第二,form表单中我是添加了一个普通的输入框,input,然后后面加多一个选择图片的按钮,下方是预览的,如果一开始有图片了显示的是保存在头像字段的路径所指的图片。
    第三,点击选择图片,不自动上传,预览图片,没问题的时候点击上传按钮,这时候发一个交易给后台,后台给我保存起来了并且给我路径,(正常的话,异常做异常处理)。
    第四,成功回调中我就是通过js把路径给改到先前头像的input中去,然后上传图片的使命应该就完结了。
    第五,最后保存用户信息,这时候才会真正的把用户头像的路径给改成新上传的图片的路径,如果用户上传之后不提交表单,那么是不会保存的等于说是虽然上传了新的图片上去,但是偏偏不用(任性),这个场景也是可以理解的,并不是说我上传一张图片了就一定要用这个作为头像,当然你也可以根据用户表单的状态来决定是否在上传的时候就更新用户的头像路径,比如在新建一个用户的form用户上传头像上去也没有一个用户实例给你保存,但是如果是用户已经祖册过了,上传的图片就可以在上传的时候就顺便更新头像了,这个看具体得业务需求了。
    第六,总体来说,就是上传就是一个独立的接口,功能就是保存文件返回路径,跟表单没有太大的关系。
    目前就这么多。
    1 回复
  • 三毛
    2018-5-10
    求大佬解答一下
    0 回复
  • 具体问题具体处理了,比如你是修改一个user,然后里面有头像,上传了图片之后让后台给你返回是否成功的同时把图片的路径也给你,然后你把路径信息设置到头像的字段信息中,最后点击提交用户表单的时候就会保存起来了,这个只是情景之一,各种情景不太一样处理的方式也不同,不过一般都是需要后台人员参与处理的。
    0 回复
  • 三毛
    2018-5-10
    @岁月小偷 就是你说的这种情况呢 成功上传的同时 我要拿到图片的路径 该怎么写呢 不是太熟悉
    0 回复
  • 三毛
    2018-5-10
    就类似
    public function upload()
    {
    $file = request()->file('file');

    $url = DS.'uploads'.DS;

    $path = ROOT_PATH . 'public' . $url;

    $info = $file->move($path);

    $temp = $url.$info->getSaveName();

    return json_encode($temp);
    }

    就像这个$temp 就是我要给表里边存的值 但是这个方法是layui.upload 调用的 return 之后给前端返回了 我的添加user得方法里 该怎么拿到这个值呢
    0 回复
  • 三毛
    2018-5-10
    0 回复
  • @三毛 我也不熟[哈哈] 不用自己做后台,基本都是跟后台的开发人员说,我要路径,给我返回回来就可以了,然后其实也要看具体情况,因为一般图片之类的是有一个服务器存储的,所以让他返回一个图片的绝对的地址给我,如果就是放在本地项目的服务器上让他给我拼出相对路径给我了,不管什么情况都是以它给我的路径为准,但是我基本不开发后台估计得看下其他人有没有什么方法获得了,没个语言的方法估计也不太一样。我们是springmvc的获得项目下的相对路径大概是下面这样的。
    0 回复
  • @三毛 还是说你已经得到了路径的值了??如果是已经拿到里路径的值那它就跟一个不同的数据没什么两样呀,不要让后台给你保存到用户中去,这个不太好,上传的接口就只管保存文件返回路径就o了,至于最后这个图片用不用,还是留给用户决定,如果能得到路径了,那么保存它其实跟保存用户名称等等之类的属性是没什么区别的我觉得。
    0 回复
  • 三毛
    2018-5-10
    @岁月小偷 这个路径就是用来在img标签里来显示 的 所以存到数据库中去 但是现在不知道这个值怎么给我的添加方法
    0 回复
  • 三毛
    2018-5-10
    layui.upload
    是预览图片是 顺便已经把图片保存到了项目目录下边 把input <file 的 值 提交到添加方法里面去 然后添加方法里面调用 上传文件的方法 然后 return 之后就把处理过的路径返回到添加方法里面了 我就可以存到数据库了
    0 回复
  • 三毛
    2018-5-10
    layui.upload
    是预览图片时 顺便已经把图片保存到了项目目录下边 我想的是 把input < file 的 value值用form 提交到添加方法里面去 然后添加方法里面调用 上传文件的方法 然后 return 之后就把处理过的路径返回到添加方法里面了 我就可以存到数据库了
    0 回复
  • 三毛
    2018-5-10
    @岁月小偷 layui.upload 在预览图片时 顺便已经把图片保存到了项目目录下边 我想的是 把input < file 的 value值用form 提交到添加方法里面去 然后添加方法里面调用 上传文件的方法 然后 return 之后就把处理过的路径返回到添加方法里面了 我就可以存到数据库了
    0 回复
  • 三毛
    2018-5-10
    @岁月小偷 难道我要把返回去的路径 用js动态赋值到input标签里 然后在提交到后台吗 我的天
    0 回复
  • 上面的说的很详细,当然你也可以把上传和表单做成一个接口,在后台中获取上传文件的路径然后将其添加到对象的字段中就可以了.我是做后台的[囧]
    0 回复
  • 三毛
    2018-5-10
    @岁月小偷 我明白了 你说的是上传到目录 但是 要是不保存 不会和其他表单数据一起保存到数据库 也就是你说的 上传了 但是我不是非要用

    我想做的是 我开始只想预览图片 然后点击保存时 才会把图片上传到目录 并且路径和其他表单值保存到数据库中
    0 回复
  • @三毛 嗯嗯,你这个想法除非一种情况就是你的后台的交易支持。不过应该也是可以的,这些工作就只能交给后台人员来做了,你提交表单的时候把图片流数据也放在一个参数里面给他,他要做的工作就是保存图片然后生成路径,再保存用户信息,这个是上传的接口跟表单提交是同一个的情况下,假设这些都ok,但是怎么说嗯感觉耦合性太强了,假设上传的接口跟表单提交用两个不同的接口,那只能通过一些投机取巧的方式来处理,比如点击保存,表单验证通过,然后再判断图片是否已经上传,如果上传了返回成功了,那么就调用表单提交的ajax,如果还没有就不做任何处理,然后在上传图片的成功回调中再次点击form表单的提交,这样做到第一次点击的提交表单的时候发现还没有上传图片,然后这时候调用开始上传,并且不会表单提交不会form ajax提交,等待着,等上传o了设置状态位,然后再点调用表单按钮提交的点击事件,这时候还是那个逻辑不通的是发现已经提交好了,路径也来了,那么这时候就可以真正的表单提交了。不知道这个过程能不能满足你。
    0 回复
  • 三毛
    2018-5-11
    @岁月小偷 或者layui的upload模块 可不可以只做预览 不走上传

    0 回复
  • @三毛 可以的应该,设置不自动提交就不会提交的,然后也不要给绑定提交按钮估计就只有预览没有实际提交功能,除非js调用upload
    0 回复
  • 三毛
    2018-5-11
    @岁月小偷 我试了一下 设置为不自动上传的话 就没有图片预览了
    0 回复
  • 南鸢000
    2018-5-11
    可以选择(choose)预览或者上传前(before)预览,上传后(done)返回图片路径放到隐藏文本框,提交时一起提交到后台
    0 回复
  • @三毛 这个关系到另外一个upload很奇特的设定,我猜你是把预览的代码写在了before回调里面了吧,可以把预览的代码给写到choose,选择文件之后的模块里面。before的最好也要保留,原因就是我说的那个坑爹的设定,本来选择文件的回调这个应该就是在选中文件就一定要走的,可是如果设置了自动上传,框架它不走choose直接奔上传去了,所以本来预览这一块可以统一放在choose里面来负责就好了,因为这个坑爹的设定,导致可能需要在before也做预览,在choose里面也做预览!当然愿意修改源码的话可以把自动上传那块的代码动一下手脚,支持选中文件比走choose回调就ok了。两种方式都行。可以试一下。
    0 回复
  • 三毛
    2018-5-11
    @岁月小偷 layui.use('upload', function() {
    var $ = layui.jquery
    , upload = layui.upload;
    var uploadInst = upload.render({
    elem: '#test1',
    url: "{:url('admin/user/indexs')}",
    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('上传失败');
    }
    },
    });
    })



    直接拉的文档里的代码 要怎么改一下呢
    0 回复
  • 三毛
    2018-5-11
    @岁月小偷 嗯嗯 好的 我知道怎么做了
    0 回复
  • JorinChen
    2018-5-16
    建议用h5重写它那图片上传的问题,用文件分段上传,框架本身上传不太好,不能实现对大文件异步上传可能会出现中断的问题
    0 回复