精华内容
下载资源
问答
  • layui 富文本 图片上传 后端PHP接口

    千次阅读 2017-08-09 16:10:31
    layui 富文本 图片上传 后端PHP接口html<!DOCTYPE html> <script type="text/javascript" src='/static/js/jquery-3.2.1.mi

    layui 富文本 图片上传 后端PHP接口

    html

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
        <script type="text/javascript" src='/static/js/jquery-3.2.1.min.js'></script>
        <script type="text/javascript" src='/static/layui/layui.js'></script>
        <title></title>
    </head>
    
    <body>
    <div class="right" style="margin: 90px 0 0 190px;">
        <form action="{:url('goods/doadd')}" enctype="multipart/form-data" method="post">
    
                <textarea class="layui-textarea" id="LAY_demo1" name="details" style="display: none;">  
                </textarea>
            <input type="submit" name="" value="提交">
        </form>
    
    </div>
    </body>
    <script>
    layui.use('layedit', function(){
      var layedit = layui.layedit;
      layedit.set({
          uploadImage: {
            url: '/admin/goods/uploadImage' //接口url
            ,type: 'post', //默认post
            success:function(res){
    
            }
          }
        });
    
      //构建一个默认的编辑器
      var index = layedit.build('LAY_demo1',{
        height:800
      });
    
      //编辑器外部操作
      var active = {
        content: function(){
          alert(layedit.getContent(index)); //获取编辑器内容
        }
        ,text: function(){
          alert(layedit.getText(index)); //获取编辑器纯文本内容
        }
        ,selection: function(){
          alert(layedit.getSelection(index));
        }
      };
    
      $('.site-demo-layedit').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
    
      //自定义工具栏
      layedit.build('LAY_demo2', {
        tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right']
        ,height: 100
      })
    });
    </script>
    </html>

    php后端

    public function uploadImage(Request $request)
        {
    //thinkphp5的框架,如果是原生的,用$_FiLES['file']获取到图片,
            $file 	= $request->file('file');
            $info 	= $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if($info){
                 $name_path =str_replace('\\',"/",$info->getSaveName());
    
                    $result['data']["src"] = "/uploads/layui/".$name_path;
                $url 	= $info->getSaveName();
                //图片上传成功后,组好json格式,返回给前端
                $arr   = array(
                    'code' => 0,
                    'message'=>'',
                    'data' =>array(
                        'src' => "/uploads/".$name_path
                        ),
                    );
            }
    
            echo json_encode($arr);
    
        }
    展开全文
  • #标识图片上传的路径 file: #本地存储的跟目录 localDir: D:/image #网络访问虚拟路径 urlPath: http://image.jt.com
  • 这是一个图片上传的功能需求,当用户选择本地待上传的图片后隐藏上传组件并本地预览图片略缩图。这是个非常简单的功能且是前端使用频率很高的功能,ElementUI为了方便用户封装了一套文件上传的组件el-upload。可以...

    这是一个图片上传的功能需求,当用户选择本地待上传的图片后隐藏上传组件并本地预览图片略缩图。这是个非常简单的功能且是前端使用频率很高的功能,ElementUI为了方便用户封装了一套文件上传的组件el-upload。可以帮助用户简单、快捷的实现文件上传功能,同时还提供了丰富的属性来实现对文件的各种操作。

    1a46e83c403364eb5ea034e21ddc83e5.gif

    HTML构建

    这里我们利用ElementUI提供的组件el-upload来实现图片上传的功能,ElementUI封装了很多属性可以帮助我们快速的实现文件的上传,监听、校验和设限。这里我们不用el-upload的自动上传功能,所以我们利用属性:auto-upload="false"来禁止文件自动上传。属性on-change可以监听文件添加、上传时的状态改变,利用该属性触发自定义事件可以获取到需要的文件属性。

    acb405d571dc3078ad3514150a044e95.png

    CSS样式设计

    图片上传的样式根据设计需求来就可以了,我这里利用flex定义简单的样式。图片预览我们直接借用el-upload标签属性,设置其背景图片为我们上传的图片即可。

    04b7b965fa7db14a5cc1e4458130c9e0.png

    获取图片URL地址

    on-change属性在文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用,利用on-change属性绑定自定义触发事件来生成可用于本地预览的URL地址。e.raw为图片的实体对象,利用window.createObjectURL(e.raw)来创建图片地址。

    7b9304f27c6e1217482610fb90a1becc.png

    阻止自动上传并获取图片

    在el-upload中定义属性:auto-upload="false" 可以禁止文件自动上传,上传禁用之后无法通过上传之后的效果显示。此时before-upload、on-progress、on-success、on-error、on-preview、on-remove等钩子函数就无法获取到文件信息了,所以想获取到文件的还需要通过on-change属性来实现。既然禁止了自动上传那么我们就需要拿到文件对象,我们需要在data中创建一个 FormData 对象来接收文件数据(有文件的form表单上传数据要用formData类型)。

    3fcd44cca33ea27e524fb512d42ddbed.png

    手动上传图片

    获取到文件数据之后我们就可以开始手动上传文件,如果还需要附上表单数据我们可以通过append继续向formData中添加数据。formData可以将form表单元素的name与value进行组合,实现表单数据的序列化从而减少表单元素的拼接,提高工作效率。

    3eb4b4f96ac1540ac2f0524eff37e21d.png

    总结:

    在form表单中如果要上传文件,一定要将headers参数 Content-Type=”multipart/form-data”设置封装数据类型。把数据分成一个一个小段,再利用ajax的send()方法将数据发送至后台。以上内容是小编给大家分享的【Vue实战082:el-upload组件实现图片上传及预览】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏:将headers设置成'Content-Type':'multipart/form-data'类型。

    展开全文
  • 为什么要进行后端配置 :因为ueditor需要获得他的配置信息就是 config.json 里面的内容,比如图片的请求地址、保存路径等等 String rootPath = request.getSession().getServletContext().getRealPath("/"); run ...

    为什么要进行后端配置 :因为ueditor需要获得他的配置信息就是 config.json 里面的内容,比如图片的请求地址、保存路径等等

    String rootPath = request.getSession().getServletContext().getRealPath("/");

    run as application E:\git\wedding\wedding-app\wedding-app\src\main\webapp\

    run as server D:\01develop\apache-tomcat-8.5.35-windows-x64\apache-tomcat-8.5.35\webapps\wedding-app\

    流程 :

    下载ueditor jsp 版

    引入依赖

    <!-- ueditor包  依赖 springwebmvc  io  fastjson fileupload-->
    <dependency>
    	<groupId>com.gitee.qdbp.thirdparty</groupId>
    	<artifactId>ueditor</artifactId>
    	<version>1.4.3.3</version>
    </dependency>
    <!-- fastjson包 -->
    <dependency>
        <groupId>com.alibaba</groupId>
    	<artifactId>fastjson</artifactId>
    	<version>1.2.47</version>
    </dependency>
    <!-- 文件上传包 -->
    <dependency>
        <groupId>commons-fileupload</groupId>
    	<artifactId>commons-fileupload</artifactId>
    	<version>1.3.3</version>
    </dependency>    
    <!-- IO包 -->
    <dependency>
    	<groupId>commons-io</groupId>
    	<artifactId>commons-io</artifactId>
    	<version>2.4</version>
    </dependency>

    1 springboot jar包版(run as application)

    1 将ueditor/jsp/config.json 文件 放到src/main/webapp 下面(这里 你的json文件可能会报错 ,是因为里面json有注释 ,json校验的时候会报错 但是不影响运行)

    2 将ueditor.config.js文件 中的serverUrl 改为后端请求的地址

    3 后端controller  @requestMapping就是你上面的serverUrl 请求的路径

    @RequestMapping("/ueditor")
    	public void ueditor(HttpServletRequest request, HttpServletResponse response) {
    		System.out.println("进来了");
    		try {
    			request.setCharacterEncoding( "utf-8" );
    			response.setHeader("Content-Type" , "text/html");
    	        response.setContentType("application/json");
    	        // 去加载config.json文件
    			String rootPath = request.getSession().getServletContext().getRealPath("/");	
    			PrintWriter out = response.getWriter();
    			String exec = new ActionEnter( request, rootPath ).exec();
    			System.out.println(rootPath+"\n"+exec);
    			out.write( exec );
    			out.flush();
    			out.close();
    		} catch (Exception e) {
    			e.printStackTrace();
    		}	
    		
    	}
    
    

    这时候 去打开页面 就已经可以上传图片了

    上传的地址为  你的项目路径/src/main/webapp/+你的config.json里面设置的路径

    以我的为例

    就是 E:\git\wedding\wedding-app\wedding-app\src\main\webapp\ueditor\jsp\upload\image\20190331 文件目录下

    你可能 上传完毕后 回显不正常  就像下面这样

    那是因为你的请求路径没配置好 ,去config.json里面配置

    就显示成功啦

    2 springboot war包版( run as server)

    只需要 将ueditor.config.js 和 config.json 里面的配置文件修改 请求路径加上项目名称 就可以了 

    在tomcat 里面运行 webapp里面的文件和WEB-INF同级

     

    展开全文
  • 前端上传图片后端

    万次阅读 2017-07-25 21:17:09
    问题:前端上传图片后端该怎样处理才能获得图片的url? 方法一、前端通过控件传给后端的是经过base64编码的字符串,后端拿到这个字符串后再经过base64解码,把解码后的图片存到服务器的某个位置,然后数据库中...

    问题:前端上传了图片,后端该怎样处理才能获得图片的url?

    方法一、前端通过控件传给后端的是经过base64编码的字符串,后端拿到这个字符串后再经过base64解码,把解码后的图片存到服务器的某个位置,然后数据库中存储图片在服务器中路径。(以下代码是转自:http://www.cnblogs.com/libra0920/p/5754356.html)

    复制代码
    /**
     * @Description: 将base64编码字符串转换为图片
     * @Author: 
     * @CreateTime: 
     * @param imgStr base64编码字符串
     * @param path 图片路径-具体到文件
     * @return
    */
    public static boolean generateImage(String imgStr, String path) {
      if (imgStr == null)
        return false;
      BASE64Decoder decoder = new BASE64Decoder();
      try {
        // 解密
        byte[] b = decoder.decodeBuffer(imgStr);
        // 处理数据
        for (int i = 0; i < b.length; ++i) {
          if (b[i] < 0) {
            b[i] += 256;
          }
        }
        OutputStream out = new FileOutputStream(path);
        out.write(b);
        out.flush();
        out.close();
        return true;
      } catch (Exception e) {
        return false;
      }
    }
    复制代码

    解密自然也有加密。以下是加密:

    复制代码
    /**
     * @Description: 根据图片地址转换为base64编码字符串
     * @Author: 
     * @CreateTime: 
     * @return
     */
    public static String getImageStr(String imgFile) {
        InputStream inputStream = null;
        byte[] data = null;
        try {
            inputStream = new FileInputStream(imgFile);
            data = new byte[inputStream.available()];
            inputStream.read(data);
            inputStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        // 加密
        BASE64Encoder encoder = new BASE64Encoder();
        return encoder.encode(data);
    }
    复制代码

    再贴一个测试的main函数

    复制代码
    /**
     * 示例
     */
    public static void main(String[] args) {
        String strImg = getImageStr("F:/86619-106.jpg");
        System.out.println(strImg);
        generateImage(strImg, "F:/86619-107.jpg");
    }
    复制代码

    不过需要注意的是,一般插件返回的base64编码的字符串都是有一个前缀的。

    "data:image/jpeg;base64," 解码之前这个得去掉。(说明:其中的jpeg图片格式不同做相应的变换,可能是jpg、png等等。还有base64之后有个逗号。

    方法二、前端采用multipart/form-data形式,后端使用springMVC的CommonsMultipartFile来接收。

    具体方法参考:http://blog.csdn.net/freyaalisa/article/details/75575130

    展开全文
  • 我们这里是前端将图片上传后端,然后后端这里再上传到阿里云的OSS,并返回一个文件的路径给前端 先看效果 上传后生成的图片 前端: // pageList.js const props = { name: "avatar", listType: "picture-card", ...
  • 基于http协议,图片上传 后端实现。 前端以html做例子,后端 采用 asp.net实现图片上传接口。已经在 各类项目中使用过。如有需要,请下载。
  • Android端使用retrofit上传多张图片后端使用Php接收图片
  • 前端上传Base64图片后端处理

    千次阅读 2020-09-28 08:53:52
    前端上传Base64图片后端处理 写在前面 在与前端对接的时候,总会遇到上传图片的需求,一般前端会上传的是Base64格式的图片 Base64格式图片 前端上传后端时的Base64格式的图片是长这样的: data:image/jpeg;base64,...
  • JAVA后端 ----这里可以使用MultipartFile直接接收文件信息,也可以使用HttpServletRequest先接收 ----使用request接收后,再强转成MultipartHttpServletRequest类型,再获取文件信息使用MultipartFile接收 ...
  • 要想在页面上显示上传的本地图片,以前我们的做法是将选择的图片文件上传后端服务器,后端对其进行存储,再将图片的URL返回到前端,前端通过这个URL来显示图片。而H5的FileReader接口支持本地预览,FileReader接口...
  • 前端ajax上传文件,图片后端nodejs接收文件;学习了nodejs,就想实现一下有进度条的文件上传,html在作这个功能的时候遇到的问题前端用普通的ajax没法实现文件上传,只能post,get,一些json,string字符串;node...
  • 本文只实现了基本功能,具体一些判断用户传入的是否是图片等,请自行修改:(上传文件,简单方法:https://blog.csdn.net/sinat_35747438/article/details/81480757) 前端html部分: &lt;body&gt; &...
  • &lt;template&gt; &lt;div&gt; &lt;input type="file" @change="getFile($event)"...上传&lt;/button&gt; &lt;/div&gt; &lt;/template&a
  • 1、微信小程序上传图片调用接口wx.uploadFile() if (chooseImg.length != 0) { chooseImg.forEach((v, i) => { wx.uploadFile({ //被上传的文件的路径 filePath: v, ... //图片上传后端
  • 其中主要用到的两个API,wx.chooseImage(选择图片)和wx.uploadFile(将本地资源上传到服务器) 地址:微信小程序开发文档 wx.chooseImage 从本地相册选择图片或使用相机拍照。 代码示例: wx.chooseImage({ ...
  • 通过后端获取数据直接赋值给file-list <el-upload action="#" **:file-list="fileList"** list-type="picture-card" :auto-upload="false"> <i slot="default" class="el-icon-plus"></i> &...
  • element前端图片上传以及后端保存前端代码后端代码 前端代码 <el-form-item label="上传证件照片" prop="image"> <el-upload class="avatar-uploader el-upload-list--picture-card" :class="{'disabled...
  • 一、关于图片上传后端的写法

    千次阅读 2019-06-26 22:55:31
    1.在这里主要讲的是后端的,公司要用到图片上传,特意码了一段代码,在这里讲下我使用的方法思路,首先接收到前端的二进制流,然后把二进制流转化为字节数组,然后调用三方的jar包完成图片的上传。 二、用法 1....
  • 1.基于element-ui的多文件上传并存于后端文件夹 这里我们需要用到element-ui中的upload上传upload组件 a:element-ui的安装与使用 (1) 在cmd的vue项目路径或Visual Studio Code的终端下执行 npm i element-ui -S...
  • 前端调用获取图片接口,后端从FTP服务器下载图片,将其转为Base64编码后的结果返回给前端,前端将返回结果置于img标签中的src属性中即可。(存在问题,图片比较大时,编码后的内容很长) 直接将下载图片的接口请求...
  • 前端ajax上传文件,图片后端nodejs接收文件; 学习了nodejs,就想实现一下有进度条的文件上传, 在做这个功能的时候遇到的问题 用普通的ajax无法实现文件上传,只能post,get,一些json,string字符串; 想要...
  • php 上传图片后端代码

    2020-03-20 13:43:24
    //上传图片 public function uploadp() { // dump($_FILES);die; extract($_POST); $file_name = $_FILES['file']['name']; $type = array("jpg", "gif", 'png', 'bmp'); ...
  • <p style="text-align:center"><img alt="" src="https://img-ask.csdnimg.cn/upload/1622374809148.png" /></p>  </p>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,329
精华内容 19,331
关键字:

图片上传后端