分布式-图片上传到Lgnix

作者: 您好简书 | 来源:发表于2019-03-16 14:33 被阅读4次

分布式-图片上传到Lgnix
分布式-图片上传到Lgnix
教你一个图片提取文字的方法，超级实用哦😄
Vue+ElementUI+NodeJs图片上传
Typora+PicGo-core插入图片自动上传
iOS开发-共享上传大量图片到电脑
ajax上传图片的本质
图片url转blob值
GCD调度组的业务场景使用探讨
php判断图片是否需要旋转

image.png

配置完Lgnix后

在foreknow-manager-web src/test/java 创建com.foreknow.test Junit类型 TestFTP.java

package com.foreknow.test;
/**
 * 1.要实现文件的上传
 * 2.页面如何向后台请求
 *  // 编辑器参数
    kingEditorParams : {
        //指定上传文件参数名称
        filePostName  : "uploadFile",
        //指定上传文件请求的url。
        uploadJson : '/pic/upload',
        //上传类型，分别为image、flash、media、file
        dir : "image"
    },
    3.返回的数据格式：Json  两种形式   
    
    1 成功 
    {
    "error":0,
    "url":"http://foreknow.com/path/to/abc.jpg"
    
    }
    
    2  失败
    {
    
    "error":1,
    "message":"添加图片失败"
    
    
    
    }
    上传文件的思路
    
    1.引入依赖的库 
        <!-- 文件上传组件 -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
        </dependency>
    2.配置文件上传的解析器  src/main/resources  spring      springmvc.xml
    <!-- 定义文件上传解析器 -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 设定默认编码 -->
        <property name="defaultEncoding" value="UTF-8"></property>
        <!-- 设定文件上传的最大值5MB，5*1024*1024 -->
        <property name="maxUploadSize" value="5242880"></property>
    </bean>
    3.实现Service
    
    
 */

import static org.junit.Assert.*;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.net.SocketException;

import org.apache.commons.net.ftp.FTP;
import org.apache.commons.net.ftp.FTPClient;
import org.junit.Test;

import com.foreknow.common.util.FtpUtil;

public class TestFTP {

    @Test
    public void testFTP() {
        try {
        //创建FTPClinent对象
        FTPClient ftpClient=new FTPClient();
        //建立链接
        ftpClient.connect("192.168.230.128");
        //登录   参数 是 账号的密码neusoft,123
        ftpClient.login("ftpuser", "sunyong0305");
        //上传到远程服务器的路径
        ftpClient.changeWorkingDirectory("/home/ftpuser/www/images");
        //读取图片的文件   本地如果参数file 没有的话  自动创建
        FileInputStream inputStream=new FileInputStream(new File("D:\\pic.............................................常用\\maxresdefault.jpg"));
            //设置文件的格式（否则图片会花掉的）FTP.BINARY_FILE_TYPE  是个常亮  二进制
        ftpClient.setFileType(FTP.BINARY_FILE_TYPE);
        //上传文件   一个远程  一个本地的参数  远程的随便起
        ftpClient.storeFile("banner_demo.jpg", inputStream);
        
        //上面的IO流   就要释放资源   关闭资源
        
        inputStream.close();
        //退出登录
        ftpClient.logout();
        } catch (SocketException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    //第二种方法 调用 工具包FtpUtil
    @Test
   public void testFTPUtil() throws FileNotFoundException{
        FileInputStream inputStream=new FileInputStream(new File("D:\\pic.............................................常用\\maxresdefault.jpg"));
       FtpUtil.uploadFile("192.168.230.128", 21, "ftpuser", "sunyong0305", "/home/ftpuser/www/images", "/2019/1/1", "hello333.jpg", inputStream);
       
   }
}

其中第二种方法工具类在foreknow-common com.foreknow.common.util FtpUtil.java：

package com.foreknow.common.util;


import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import org.apache.commons.net.ftp.FTP;
import org.apache.commons.net.ftp.FTPClient;
import org.apache.commons.net.ftp.FTPFile;
import org.apache.commons.net.ftp.FTPReply;

/**
 * ftp上传下载工具类
 */
public class FtpUtil {

    /** 
     * Description: 向FTP服务器上传文件 
     * @param host FTP服务器hostname 
     * @param port FTP服务器端口 
     * @param username FTP登录账号 
     * @param password FTP登录密码 
     * @param basePath FTP服务器基础目录
     * @param filePath FTP服务器文件存放路径。例如分日期存放：/2015/01/01。文件的路径为basePath+filePath
     * @param filename 上传到FTP服务器上的文件名 
     * @param input 输入流 
     * @return 成功返回true，否则返回false 
     */  
    public static boolean uploadFile(String host, int port, String username, String password, String basePath,
            String filePath, String filename, InputStream input) {
        boolean result = false;
        FTPClient ftp = new FTPClient();
        try {
            int reply;
            ftp.connect(host, port);// 连接FTP服务器
            // 如果采用默认端口，可以使用ftp.connect(host)的方式直接连接FTP服务器
            ftp.login(username, password);// 登录
            reply = ftp.getReplyCode();
            if (!FTPReply.isPositiveCompletion(reply)) {
                ftp.disconnect();
                return result;
            }
            //切换到上传目录
            if (!ftp.changeWorkingDirectory(basePath+filePath)) {
                //如果目录不存在创建目录
                String[] dirs = filePath.split("/");
                String tempPath = basePath;
                for (String dir : dirs) {
                    if (null == dir || "".equals(dir)) continue;
                    tempPath += "/" + dir;
                    if (!ftp.changeWorkingDirectory(tempPath)) {
                        if (!ftp.makeDirectory(tempPath)) {
                            return result;
                        } else {
                            ftp.changeWorkingDirectory(tempPath);
                        }
                    }
                }
            }
            //设置上传文件的类型为二进制类型
            ftp.setFileType(FTP.BINARY_FILE_TYPE);
            //上传文件
            if (!ftp.storeFile(filename, input)) {
                return result;
            }
            input.close();
            ftp.logout();
            result = true;
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (ftp.isConnected()) {
                try {
                    ftp.disconnect();
                } catch (IOException ioe) {
                }
            }
        }
        return result;
    }
    
    /** 
     * Description: 从FTP服务器下载文件 
     * @param host FTP服务器hostname 
     * @param port FTP服务器端口 
     * @param username FTP登录账号 
     * @param password FTP登录密码 
     * @param remotePath FTP服务器上的相对路径 
     * @param fileName 要下载的文件名 
     * @param localPath 下载后保存到本地的路径 
     * @return 
     */  
    public static boolean downloadFile(String host, int port, String username, String password, String remotePath,
            String fileName, String localPath) {
        boolean result = false;
        FTPClient ftp = new FTPClient();
        try {
            int reply;
            ftp.connect(host, port);
            // 如果采用默认端口，可以使用ftp.connect(host)的方式直接连接FTP服务器
            ftp.login(username, password);// 登录
            reply = ftp.getReplyCode();
            if (!FTPReply.isPositiveCompletion(reply)) {
                ftp.disconnect();
                return result;
            }
            ftp.changeWorkingDirectory(remotePath);// 转移到FTP服务器目录
            FTPFile[] fs = ftp.listFiles();
            for (FTPFile ff : fs) {
                if (ff.getName().equals(fileName)) {
                    File localFile = new File(localPath + "/" + ff.getName());

                    OutputStream is = new FileOutputStream(localFile);
                    ftp.retrieveFile(ff.getName(), is);
                    is.close();
                }
            }

            ftp.logout();
            result = true;
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (ftp.isConnected()) {
                try {
                    ftp.disconnect();
                } catch (IOException ioe) {
                }
            }
        }
        return result;
    }
    

}

foreknow-manager-web common.js

var TT = TAOTAO = {
    // 编辑器参数
    kingEditorParams : {
        //指定上传文件参数名称
        filePostName  : "uploadFile",
        //指定上传文件请求的url。
        uploadJson : '/pic/upload',
        //上传类型，分别为image、flash、media、file
        dir : "image"
    },

写PictureService.java

package com.foreknow.service;

import java.util.Map;

import org.springframework.web.multipart.MultipartFile;

public interface PictureService {
/**
 * 文件上传的方法
 * MultipartFile uploadFile 要与common.js uploadFile的name 要一直
 * @return Map  在json中  是值的形式   所以传MAP
 * 
 */
    public Map uploadPicture(MultipartFile uploadFile);
    
}

PictureServiceImpl.java


package com.foreknow.service.impl;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import org.joda.time.DateTime;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import com.foreknow.common.util.FtpUtil;
import com.foreknow.common.util.IDUtils;
import com.foreknow.service.PictureService;


//对应虚拟机的配置
@Service
public class PictureServiceImpl implements PictureService{
    @Value("${FTP_ADDRESS}")
    private  String FTP_ADDRESS;
    
    @Value("${FTP_PORT}")
    private  Integer FTP_PORT;
    
    @Value("${FTP_USERNAME}")
    private  String FTP_USERNAME;
    
    @Value("${FTP_PASSWORD}")
    private  String FTP_PASSWORD;
    
    @Value("${FTP_BASE_PATH}")
    private  String FTP_BASE_PATH;
    
    @Value("${IMAGE_BASE_URL}")
    private  String IMAGE_BASE_URL;
@Override
    public Map uploadPicture(MultipartFile uploadFile)  {
        
            Map resultMap=new HashMap<>();
             try {
        

            //获取原文件名
        String oldName= uploadFile.getOriginalFilename();
        //创建一个新的文件名(工具包里的方法)     oldName.lastIndexOf(".")  在String里的方法
        String newName=IDUtils.genImageName();
            
        newName=newName+oldName.substring(oldName.lastIndexOf("."));
        //pom.xml  库里的方法DateTime    .toString()   是用它的方法
        //上传文件按照时间来创建文件夹
        String imagePath=new DateTime().toString("/yyyy/MM/dd");


    boolean result=FtpUtil.uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USERNAME, FTP_PASSWORD, FTP_BASE_PATH, imagePath, newName, uploadFile.getInputStream());
    if(!result){
        resultMap.put("error", 1);
        resultMap.put("message", "文件上传失败");
        return resultMap;   
    }
    resultMap.put("error", 0);
    resultMap.put("url",IMAGE_BASE_URL+imagePath+"/"+newName);
    return resultMap;
             } catch (IOException e) {
    resultMap.put("error", 1);
    resultMap.put("message", "文件上传发生异常");

    return resultMap;
        }
    
    }

    
}

配置在foreknow-manager-web src/main/resources resource.properties

#FTP\u76F8\u5173\u914D\u7F6E
#FTP\u7684ip\u5730\u5740
FTP_ADDRESS=192.168.230.128
FTP_PORT=21
FTP_USERNAME=ftpuser
FTP_PASSWORD=输入密码
FTP_BASE_PATH=/home/ftpuser/www/images

#\u56FE\u7247\u670D\u52A1\u5668\u7684\u76F8\u5173\u914D\u5236
#\u56FE\u7247\u670D\u52A1\u5668\u7684\u57FA\u7840\u8DEF\u5F84
#FILI_UPLOAD_PATH=D:/temp/imagestest/webapps/images
IMAGE_BASE_URL=http://192.168.230.128

最后写PictureController.java

package com.foreknow.controller;

import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.foreknow.common.util.JsonUtils;
import com.foreknow.service.PictureService;
/**
 * 1.要接收MultiPartFile 对象
 * 2.调用Service的方法
 * 3.返回Json数据
 * @author Administrator
 *
 */
@Controller
public class PictureController {
@Autowired
    private PictureService pictureService;
    @RequestMapping("/pic/upload")
    @ResponseBody
    public String pictureUpload(MultipartFile uploadFile){
    Map result= pictureService.uploadPicture(uploadFile);
    //然后把Map 类型的转成Json   在JsonUtils.java工具包
    String json=JsonUtils.objectToJson(result);
        
        return json;
        
        
    }
}

对应item-add.jsp 页面添加按钮不用写工具类里有提交

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<div style="padding:10px 10px 10px 10px">
    <form id="itemAddForm" class="itemForm" method="post">
        <table cellpadding="5">
            <tr>
                <td>商品类目:</td>
                <td>
                    <a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>
                    <input type="hidden" name="cid" style="width: 280px;"></input>
                </td>
            </tr>
            <tr>
                <td>商品标题:</td>
                <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td>
            </tr>
            <tr>
                <td>商品卖点:</td>
                <td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td>
            </tr>
            <tr>
                <td>商品价格:</td>
                <td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" />
                    <input type="hidden" name="price"/>
                </td>
            </tr>
            <tr>
                <td>库存数量:</td>
                <td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td>
            </tr>
            <tr>
                <td>条形码:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" />
                </td>
            </tr>
            <tr>
                <td>商品图片:</td>
                <td>
                     <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a>
                     <input type="hidden" name="image"/>
                </td>
            </tr>
            <tr>
                <td>商品描述:</td>
                <td>
                    <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
                </td>
            </tr>
            <tr class="params hide">
                <td>商品规格:</td>
                <td>
                    
                </td>
            </tr>
        </table>
        <input type="hidden" name="itemParams"/>
    </form>
    <div style="padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
    </div>
</div>
<script type="text/javascript">
    var itemAddEditor ;
    //页面初始化完毕后执行此方法
    $(function(){
        //创建富文本编辑器
        itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
        //初始化类目选择和图片上传器
        TAOTAO.init({fun:function(node){
            //根据商品的分类id取商品 的规格模板，生成规格信息。第四天内容。
            //TAOTAO.changeItemParam(node, "itemAddForm");
        }});
    });
    //提交表单
    function submitForm(){
        //有效性验证
        if(!$('#itemAddForm').form('validate')){
            $.messager.alert('提示','表单还未填写完成!');
            return ;
        }
        //取商品价格，单位为“分”
        $("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
        //同步文本框中的商品描述
        itemAddEditor.sync();
        //取商品的规格
        /*
        var paramJson = [];
        $("#itemAddForm .params li").each(function(i,e){
            var trs = $(e).find("tr");
            var group = trs.eq(0).text();
            var ps = [];
            for(var i = 1;i<trs.length;i++){
                var tr = trs.eq(i);
                ps.push({
                    "k" : $.trim(tr.find("td").eq(0).find("span").text()),
                    "v" : $.trim(tr.find("input").val())
                });
            }
            paramJson.push({
                "group" : group,
                "params": ps
            });
        });
        //把json对象转换成字符串
        paramJson = JSON.stringify(paramJson);
        $("#itemAddForm [name=itemParams]").val(paramJson);
        */
        //ajax的post方式提交表单
        //$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串
        $.post("/item/save",$("#itemAddForm").serialize(), function(data){
            if(data.status == 200){
                $.messager.alert('提示','新增商品成功!');
            }
        });
    }
    
    function clearForm(){
        $('#itemAddForm').form('reset');
        itemAddEditor.html('');
    }
</script>

javascript:void(0) 点击后隐藏信息功能

image.png

分布式-图片上传到Lgnix
配置完Lgnix后在foreknow-manager-web src/test/java 创建com...
分布式-图片上传到Lgnix
配置完Lgnix后在foreknow-manager-web src/test/java 创建com...
教你一个图片提取文字的方法，超级实用哦😄
首先，把图片传到QQ上其次，点击图片，并长按住图片最后，点击“提取图片文字”就好了是不是超级实用啊，喜欢就关...
Vue+ElementUI+NodeJs图片上传
一、将图片上传到服务器 1、添加图片上传框在Vue组件的表单中添加图片上传框其中： action：图片上传到服...
Typora+PicGo-core插入图片自动上传
最近在写技术文档，发现传到confluence里图片显示不出来，因为插入的图片是在本地，所以就想把图片传到云端，这...
iOS开发-共享上传大量图片到电脑
需求-抓包app抓取到大量图片，需要快速上传到电脑上，且不需要接口上传图片使用UIActivityViewCon...
ajax上传图片的本质
1.图片上传到服务器。 2.后台将图片地址传到html页面，以图片形式展现。 3.后天将图片地址加入到input表...
图片url转blob值
最近遇到图片上传问题，已知图片的url，然后把图片上传到自己的服务器。常规方案都会把图片下载到本地，然后上传到自己...
GCD调度组的业务场景使用探讨
场景一发帖流程：图片上传接口和发布接口。图片上传到服务器是比较耗时的操作需要异步处理，把图片上传到服务器后，服务...
php判断图片是否需要旋转
iPhone拍摄的图片上传到服务器上可能是翻转的，所以需要判断是否需要旋转