精华内容
下载资源
问答
  • 调用微信JS-SDK接口上传图片

    万次阅读 多人点赞 2016-05-21 12:50:35
    最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存,...

          最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存,等到最后的提交,在从微信提供的接口中下载图片到本地服务器中保存!

         微信JS-SDK说明文档

     

    概述

    微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

    通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

    此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。

    JSSDK使用步骤

    步骤一:绑定域名

    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

    备注:登录后可在“开发者中心”查看对应的接口权限。

    步骤二:引入JS文件

    在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js

    如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js

    备注:支持使用 AMD/CMD 标准模块加载方法加载

    步骤三:通过config接口注入权限验证配置

    所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

    wx.config({

        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

        appId: '', // 必填,公众号的唯一标识

        timestamp: , // 必填,生成签名的时间戳

        nonceStr: '', // 必填,生成签名的随机串

        signature: '',// 必填,签名,见附录1

        jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

    });

    步骤四:通过ready接口处理成功验证

    wx.ready(function(){

        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

    });

    步骤五:通过error接口处理失败验证

    wx.error(function(res){

        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。

    });

    接口调用说明

    所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:

    1.success:接口调用成功时执行的回调函数。

    2.fail:接口调用失败时执行的回调函数。

    3.complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。

    4.cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。

    5.trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。

    备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。

    以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:

    调用成功时:"xxx:ok" ,其中xxx为调用的接口名

    用户取消时:"xxx:cancel",其中xxx为调用的接口名

    调用失败时:其值为具体错误信息

     

    图像接口

    拍照或从手机相册中选图接口

    wx.chooseImage({

        count: 1, // 默认9

        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有

        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有

        success: function (res) {

            var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

        }

    });

    预览图片接口

    wx.previewImage({

        current: '', // 当前显示图片的http链接

        urls: [] // 需要预览的图片http链接列表

    });

    上传图片接口

    wx.uploadImage({

        localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得

        isShowProgressTips: 1, // 默认为1,显示进度提示

        success: function (res) {

            var serverId = res.serverId; // 返回图片的服务器端ID

        }

    });

    备注:上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 media_id。

    下载图片接口

    wx.downloadImage({

        serverId: '', // 需要下载的图片的服务器端ID,由uploadImage接口获得

        isShowProgressTips: 1, // 默认为1,显示进度提示

        success: function (res) {

            var localId = res.localId; // 返回图片下载后的本地ID

        }

    });

    根据接口文档的说明:

       引入JS后,进行权限验证配置,相关的参数值通过Ajax后台请求获取到

     

        $.ajax({
                    url: "test.ashx",
                    data: {
                        name: "GetWxJsApi",
                        curUrl: url
                    },
                    type: 'post',
                    dataType: "json",
                    success: function (data) {
                        if (data.success == "1") {
    
                            var timestamp = data.timestamp;
                            var noncestr = data.noncestr;
                            var signature = data.signature;
                            //通过config接口注入权限验证配置
                            wx.config({
                                debug: false,
                                appId: data.appId,
                                timestamp: timestamp.toString(),
                                nonceStr: noncestr,   //生成签名的随机串
                                signature: signature,  //签名
                                jsApiList: ['chooseImage', 'uploadImage', 'downloadImage']
                            });
    
                        } else {
                            alert(data.error);
                        }
                    }
                });

    验证通过后,可以调用手机选择图片接口

     

     

     //拍照或从手机相册中选图接口
            function wxChooseImage() {
                wx.chooseImage({
                    count: 1,
                    needResult: 1,
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
                    success: function (data) {
                        localIds = data.localIds[0].toString(); // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                        if (rh.tostr(localIds)) {
                            wxuploadImage(localIds);
                        }
                    },
                    fail: function (res) {
                        alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");
                    }
    
                });
            }

      选择图片成功后,同时调用上传图片接口,加载图片,主要要保存下mediaId字段

     

       备注:上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器!

     

    //上传图片接口
            function wxuploadImage(e) {
               
                wx.uploadImage({
                    localId: e, // 需要上传的图片的本地ID,由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1,显示进度提示
                    success: function (res) {
                        mediaId = res.serverId; // 返回图片的服务器端ID
                        if (rh.tostr(mediaId)) {
                            $(".myimg").attr("src", localIds);
                        }
    
                    },
                    fail: function (error) {
                        picPath = '';
                        localIds = '';
                        alert(Json.stringify(error));
    
                    }
    
                });
            }

     最后正式入库的时候,要通过mediaId从腾讯服务器中,下载到本地服务器:

    $.ajax({
                            url: "test.ashx",
                            data: {
                                name: "getPicInfo",
                                media: $.trim(mediaId)
                            },
                            type: "Get",
                            dataType: "text",
                            success: function (data) {
                                picPath = data;  //picPath 取得图片的路径
                              
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert("提交失败" + textStatus);
                            }
    
                        });

    通过访问后台接口,同时也通过微信接口
     

     

     

    var url = string.Format("https://api.weixin.qq.com/cgi-bin/media/get?access_token={0}&media_id={1}", token, media);
    var PicPath = Common.GetWxPic(url, "").ToString();
    <pre name="code" class="csharp">
    
        private static bool CheckValidationResult(object sender, X509Certificate certificate, X509Chain chain, SslPolicyErrors errors)
            {
                return true;
            }  
    
    
     public static string GetWxPic(string url,string data)
            {
                string path = "";
                try
                {
                    ServicePointManager.Expect100Continue = false;
                    ServicePointManager.ServerCertificateValidationCallback = new RemoteCertificateValidationCallback(CheckValidationResult);
    
                    HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url + (data == "" ? "" : "?" + data));
                    request.Method = "GET";
                    
                    using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)
                    {
                        if(response.StatusCode  == HttpStatusCode.OK)
                        {
                            string fileName = Common.RightStr(response.Headers["Content-disposition"],"filename=",false).Replace("\"","");
                            path = "/uploadfile/" + fileName;
                            
                            Stream responseStream = response.GetResponseStream();
                            BinaryReader br = new BinaryReader(responseStream);
                            
                            FileStream fs = new FileStream(HttpContext.Current.Server.MapPath(path), FileMode.Create, FileAccess.Write);
    
                            const int buffsize = 1024;
                            byte[] bytes = new byte[buffsize];
                            int totalread = 0;
    
                            int numread = buffsize;
                            while (numread != 0)
                            {
                                // read from source
                                numread = br.Read(bytes, 0, buffsize);
                                totalread += numread;
    
                                // write to disk
                                fs.Write(bytes, 0, numread);
                            }
    
                            br.Close();
                            fs.Close();
    
                            response.Close();
    
                        }
                        else
                        {
                            response.Close();
                            path = "";
                        }
                        
                    }
                }
                catch (Exception)
                {
                    path = "";
                }
                return path;
            }

     

     

     

     

     

    
     

    保存图片到本地服务器上,即可:

     

    完整代码下载

     

     


     

     

    展开全文
  • 上传图片到七牛云并返回图片URL

    万次阅读 多人点赞 2018-04-24 11:18:05
    在开发项目的时候,经常会用到上传图片的功能,如果把图片全都存放在项目路径下,会导致项目越来越臃肿,因此可以考虑把图片上传交给第三方处理,此处我们采用七牛云进行图片存储。 一.七牛云准备工作 1.七牛云...

    在开发项目的时候,经常会用到上传图片的功能,如果把图片全都存放在项目路径下,会导致项目越来越臃肿,因此可以考虑把图片上传交给第三方处理,此处我们采用七牛云进行图片存储。

    一.七牛云准备工作

    1.七牛云注册登录

    https://portal.qiniu.com/signup/choice
    这里写图片描述

    2.新建存储空间

    这里写图片描述

    进入对象存储菜单,点击“新建存储空间”,这里需要实名认证,上传身份证正反面之类的,大概一个小时左右就认证成功了,效率真是棒棒哒~

    这里写图片描述

    这里的存储空间名称要记住,之后在代码里面会用到。

    二.代码实现

    1.在pom.xml添加七牛云依赖

    我的项目使用了maven管理jar包,所以只需直接添加相应依赖即可:

    <dependency>
    	<groupId>com.qiniu</groupId>
    	<artifactId>qiniu-java-sdk</artifactId>
    	<version>7.1.1</version>
    </dependency>
    

    2.添加七牛云图片操作工具类

    package com.cn.netdisk.util;
    
    import java.io.IOException;
    import java.util.HashSet;
    import java.util.Set;
    import java.util.regex.Matcher;
    import java.util.regex.Pattern;
    
    import com.qiniu.common.QiniuException;
    import com.qiniu.http.Response;
    import com.qiniu.storage.BucketManager;
    import com.qiniu.storage.UploadManager;
    import com.qiniu.util.Auth;
    import com.qiniu.util.Base64;
    import com.qiniu.util.StringMap;
    import com.qiniu.util.UrlSafeBase64;
    
    import okhttp3.OkHttpClient;
    import okhttp3.Request;
    import okhttp3.RequestBody;
    
    public class QiniuCloudUtil {
    
    	// 设置需要操作的账号的AK和SK
    	private static final String ACCESS_KEY = "你的ACCESS_KEY";
    	private static final String SECRET_KEY = "你的SECRET_KEY";
    
    	// 要上传的空间
    	private static final String bucketname = "你的空间名称";
    
    	// 密钥
    	private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
    
    	private static final String DOMAIN = "你的图片上传路径";
    	
    	private static final String style = "自定义的图片样式";
    
    	public String getUpToken() {        
            return auth.uploadToken(bucketname, null, 3600, new StringMap().put("insertOnly", 1));
        }
    	// 普通上传
    	public String upload(String filePath, String fileName) throws IOException {
    		// 创建上传对象
    		UploadManager uploadManager = new UploadManager();
    		try {
    			// 调用put方法上传
    			String token = auth.uploadToken(bucketname);
    			if(UtilValidate.isEmpty(token)) {
    				System.out.println("未获取到token,请重试!");
    				return null;
    			}
    			Response res = uploadManager.put(filePath, fileName, token);
    			// 打印返回的信息
    			System.out.println(res.bodyString());
    			if (res.isOK()) {
    				Ret ret = res.jsonToObject(Ret.class);
    				//如果不需要对图片进行样式处理,则使用以下方式即可
    				//return DOMAIN + ret.key;
    				return DOMAIN + ret.key + "?" + style;
    			}
    		} catch (QiniuException e) {
    			Response r = e.response;
    			// 请求失败时打印的异常的信息
    			System.out.println(r.toString());
    			try {
    				// 响应的文本信息
    				System.out.println(r.bodyString());
    			} catch (QiniuException e1) {
    				// ignore
    			}
    		}
    		return null;
    	}
    
    	
    	//base64方式上传
    	public String put64image(byte[] base64, String key) throws Exception{
            String file64 = Base64.encodeToString(base64, 0);
            Integer l = base64.length;
            String url = "http://upload.qiniu.com/putb64/" + l + "/key/"+ UrlSafeBase64.encodeToString(key);      
            //非华东空间需要根据注意事项 1 修改上传域名
            RequestBody rb = RequestBody.create(null, file64);
            Request request = new Request.Builder().
                    url(url).
                    addHeader("Content-Type", "application/octet-stream")
                    .addHeader("Authorization", "UpToken " + getUpToken())
                    .post(rb).build();
            //System.out.println(request.headers());
            OkHttpClient client = new OkHttpClient();
            okhttp3.Response response = client.newCall(request).execute();
            System.out.println(response);
            //如果不需要添加图片样式,使用以下方式
            //return DOMAIN + key;
            return DOMAIN + key + "?" + style;
        }
    	
    	
    	// 普通删除(暂未使用以下方法,未测试)
    	public void delete(String key) throws IOException {
    		// 实例化一个BucketManager对象
    		BucketManager bucketManager = new BucketManager(auth);
    		// 此处的33是去掉:http://ongsua0j7.bkt.clouddn.com/,剩下的key就是图片在七牛云的名称
    		key = key.substring(33);
    		try {
    			// 调用delete方法移动文件
    			bucketManager.delete(bucketname, key);
    		} catch (QiniuException e) {
    			// 捕获异常信息
    			Response r = e.response;
    			System.out.println(r.toString());
    		}
    	}
    
    	class Ret {
    		public long fsize;
    		public String key;
    		public String hash;
    		public int width;
    		public int height;
    	}
    }
    

    (1).获取需要操作的账号的AK和SK

    private static final String ACCESS_KEY = "你的ACCESS_KEY";
    private static final String SECRET_KEY = "你的SECRET_KEY";
    

    进入个人中心-密钥管理
    这里写图片描述

    (2).获取要上传的空间

    private static final String bucketname = "你的空间名称";
    

    这里写图片描述

    (3).获取图片上传URL路径

    private static final String DOMAIN = "你的图片上传路径";
    

    这里写图片描述
    (4).获取自定义的图片样式

    private static final String style = "自定义的图片样式";
    

    我这里是需要给图片添加水印,所以自定义了图片样式,如果对于上传图片没有格式要求,则可以跳过此步骤。

    这里写图片描述

    将imagestyle的处理接口作为style的值即可。

    3.后端代码调用

    @ResponseBody
    	@RequestMapping(value="/uploadImg", method=RequestMethod.POST)
    	public ResultInfo uploadImg(@RequestParam MultipartFile image, HttpServletRequest request) {
    		ResultInfo result = new ResultInfo();
    		if (image.isEmpty()) {
    			result.setCode(400);
    			result.setMsg("文件为空,请重新上传");
    			return result;
    		}
    
    		try {
    			byte[] bytes = image.getBytes();
    			String imageName = UUID.randomUUID().toString();
    			
    			QiniuCloudUtil qiniuUtil = new QiniuCloudUtil();
                try {
                    //使用base64方式上传到七牛云
                    String url = qiniuUtil.put64image(bytes, imageName);
                    result.setCode(200);
        			result.setMsg("文件上传成功");
        			result.setInfo(url);
                } catch (Exception e) {
                    e.printStackTrace();
                }
                return result;
    		} catch (IOException e) {
    			result.setCode(500);
    			result.setMsg("文件上传发生异常!");
    			return result;
    		}
    	}
    

    4.前端代码调用

    我使用的是vue,这里是使用了quillEditor富文本编辑器组件进行图片上传,uploadImg是上传图片调用的方法:

    uploadImg: async function(id) {  
        var vm = this;
        var fileInput = document.getElementById("uniqueId");  
        var formData = new FormData();
        formData.append("image", fileInput.files[0]);
        this.$axios({
            method: "post",
            url: '/api/article/uploadImg',
            data: formData
        }).then((response) = >{
            if (response.data.code == 200) {
    	        //后端返回的url地址
                var url = response.data.info;
                if (url != null && url.length > 0) {   
    	            vm.addImgRange = vm.$refs.myQuillEditor.quill.getSelection();
                    var index = vm.addImgRange != null ? vm.addImgRange.index: 0;   vm.$refs.myQuillEditor.quill.insertEmbed(index, 'image', url);  
                } else {
                  this.$Message.error("图片添加失败!");  
                }
            } else {
                this.$Message.error(response.data.msg);
            }
        });   
    }
    

    欢迎关注我的公众号,用讲故事的方式学技术。

    这里有脑洞大开的奇葩故事,也有温暖文艺的心灵感悟。

    技术知识,也可以很有趣。
    在这里插入图片描述

    展开全文
  • SSM上传图片并保存图片地址到数据库

    万次阅读 多人点赞 2018-11-06 22:06:50
    说出来有点不好意思,还没写过上传图片的功能。最近接的一个外包项目因为有要用到这个功能,所以打算使用SSM实现图片上传的功能,上传好后把图片地址保存到数据库,同时在前端显示图片。 使用maven构建项目,首先...

    说出来有点不好意思,还没写过上传图片的功能。最近接的一个外包项目因为有要用到这个功能,所以打算使用SSM实现图片上传的功能,上传好后把图片地址保存到数据库,同时在前端显示图片。

    使用maven构建项目,首先导入相关的jar,这里就放上传文件的jar配置,不然篇幅太长了,其他的还有spring相关的,mybatis,日志的,数据库的,包括servlet和jstl相关的。

          <!-- 文件上传的jar包 -->
    	  <dependency>
    	    <groupId>commons-io</groupId>
    	    <artifactId>commons-io</artifactId>
    	    <version>2.4</version>
    	  </dependency>
    	  <dependency>
    	    <groupId>commons-fileupload</groupId>
    	    <artifactId>commons-fileupload</artifactId>
    	    <version>1.3.1</version>
    	  </dependency>
    

    配置好pom.xml后,接下来就是web.xml,只需要配置dispatcherServlet就行。

    项目目录结构

    接下来就是新建数据表

    DROP TABLE IF EXISTS `product`;
    CREATE TABLE `product`  (
      `pid` int(11) NOT NULL AUTO_INCREMENT,
      `pimage` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
      PRIMARY KEY (`pid`) USING BTREE
    ) ENGINE = InnoDB AUTO_INCREMENT = 8 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
    

    然后就是那一大堆配置文件,我就不写了,要注意的是在spring-web.xml中配置文件上传解析器

            <!-- 文件上传的解析器 -->
            <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            	<!-- 上传图片的最大尺寸 10M-->
            	<property name="maxUploadSize" value="10485760"></property>
            	<!-- 默认编码 -->
            	<property name="defaultEncoding" value="utf-8"></property>
            </bean>
    

    紧接着是mapper文件的编写,主要有两个sql,一个是图片上传,另一个是选择所有图片

        <mapper namespace="com.codeliu.dao.ProductDao">
        	<!-- 查询所有图片 -->
        	<select id="list" resultType="product">
        		select pid, pimage from product
        	</select>
        	
        	<insert id="save" parameterType="product">
        		insert into product(pimage) values(#{pimage})
        	</insert>
        </mapper>
    

    接下来就是pojo,dao,service,controller类的编写

    首先pojo

    public class Product implements Serializable {
    
    	private Integer pid;
    	
    	private String pimage;
    
        // set、get方法
    }
    

    其次dao

    ublic interface ProductDao {
    	
    	/**
    	 * 查询所有的图片
    	 * @return
    	 */
    	List<Product> list();
    	
    	/**
    	 * 上传一张图片
    	 * @param product
    	 * @return
    	 */
    	Integer save(Product product);
    }
    

    接着是service

    @Service
    public class ProductServiceImpl implements ProductService {
    	
    	@Autowired
    	private ProductDao productDao;
    
    	@Override
    	public List<Product> list() {
    		return productDao.list();
    	}
    
    	@Override
    	@Transactional
    	public String save(MultipartFile file, Product product, ModelMap map) throws IOException {
    		
    		// 保存图片的路径,图片上传成功后,将路径保存到数据库
    		String filePath = "F:\\upload";
    		// 获取原始图片的扩展名
    		String originalFilename = file.getOriginalFilename();
    		// 生成文件新的名字
    		String newFileName = UUID.randomUUID() + originalFilename;
    		// 封装上传文件位置的全路径
    		File targetFile = new File(filePath, newFileName);
    		file.transferTo(targetFile);	
    		
    		// 保存到数据库
    		product.setPimage(newFileName);
    		productDao.save(product);
    		return "redirect:/listImages";
    	}
    
    }
    

    最后是controller

    @Controller
    public class ProductController {
    
    	@Autowired
    	private ProductService productService;
    	
    	@RequestMapping("/listImages")
    	public ModelAndView list(Model model) {
    		List<Product> lists = productService.list();
    		ModelAndView mav = new ModelAndView();
    		mav.addObject("lists", lists);
    		mav.setViewName("list");
    		System.out.println(lists);
    		return mav;
    	}
    	
    	/**
    	 * 保存图片
    	 * @param file
    	 * @param product
    	 * @param map
    	 * @return
    	 */
    	@RequestMapping("/save")
    	public String save(MultipartFile file, Product product, ModelMap map) {
    		try {
    			return productService.save(file, product, map);
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    }
    

    上传图片的逻辑在service里面,注释很清楚,相信一看就能明白,接着写两个jsp页面,一个用于上传,一个用于显示。

    <body>
    	<form action="save" method="post" enctype="multipart/form-data">
    		图片:<input type="file" name="file"><br>
    		<input type="submit" value="提交">
    	</form>
    </body>
    
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>list</title>
    <style type="text/css">
    	#images{
    		width: 150px;
    		height: 250px;
    	}
    </style>
    </head>
    <body>
    	
    	<table class="table table-bordered table-hover">
    		<tr>
    			<th>序号</th>
    			<th>图片</th>
    		</tr>
    		<c:forEach items="${lists}" var="product">
    			<tr>
    				<td>${product.pid}</td>
    				<td>
    					<c:if test="${product.pimage != null}">
    						<img alt="" src="/image/${product.pimage}" id="images">
    					</c:if>
    				</td>
    			</tr>
    		</c:forEach>
    	</table>
    </body>
    </html>
    

    做好了上面的这些,还需要指定图片上传的位置,直接在tomcat中指定

    万事俱备,只欠东风了。接下来就启动项目,输入localhost:8080/SSM_uploadImage/index.jsp,就可以选择图片进行上传,上传之后,可以看到数据库已经插入了一条记录,同时指定的目录下已经有图片了。

    4.png

    跳转到list.jsp,显示图片

    5.png

    关注微信公众号:秃头哥编程(ID:xp_1311664842),领取编程大礼包。
    在这里插入图片描述

    展开全文
  • Vue实现上传图片

    万次阅读 2019-04-02 15:50:05
    因公司项目需求,在原有的项目基础页面添加一个上传图片的功能。随时百度一波但是实现的功能却状况百出,上传图片前需对图片进行截取和压缩,转换为二进制等一系列操作 1、未上传图片时显示的内容 2、上传完成现实...

    因公司项目需求,在原有的项目基础页面添加一个上传图片的功能。随时百度一波但是实现的功能却状况百出,上传图片前需对图片进行截取和压缩,转换为二进制等一系列操作
    1、未上传图片时显示的内容
    未上传图片时显示的内容
    2、上传完成现实的图片内容(可左右滑动)
    在这里插入图片描述
    一、页面显示代码

    <div class="img-uploader" @drop="handleDrop" ref="uploader" v-if="!showImg">
               //提示语句
                <p class="img-uploader-placeholder" v-if="!hasImages">{{placeholder}}</p>
                <div v-if="hasImages" class="img-uploader-preview-list">
                  <div v-for="(data,index) in imageDataList" class="img-uploader-preview" :key="index">
                  //预览图片
                    <div class="preview-img">
                      <img :src="data">
                    </div>
                    //删除图片的按钮
                    <img
                      src="@/assets/round_close.svg"
                      class="img-uploader-delete-btn"
                      @click="deleteImg(index)"
                    >
                  </div>
                </div>
                <label :for="inputId" class="img-uploader-label" v-if="!hasImages"></label>
                <input
                  style="display: none"
                  :id="inputId"
                  ref="input"
                  type="file"
                  accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
                  multiple="multiple"
                  @change="handleFileChange"
                >
              </div>
    

    二、js方法(方法不完整此仅参考)
    在这里插入图片描述
    三、后台要求穿过去的图片格式为:base64格式编码转换为二进制且以数组的形式传递给后台。代码如下:

    //图片的base64格式编码转换为二进制,baseurl:图片base64的格式编码
        binarySystem (baseurl) {
          let arr = baseurl.split(',')
          baseurl = arr[0].match(/:(.*?);/)[1]
          let bstr = atob(arr[1])
          let n = bstr.length
          let u8arr = new Uint8Array(n)
          let nameImg = []
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
            nameImg.push(bstr.charCodeAt(n))
          }
          return nameImg
        }
    

    四、图片上传成功即可查看传进接口的数据
    若数据传进后台接口即表示图片上传成功(如上图显示图片)!
    在这里插入图片描述

    大致思路即为如此,可百度自行下载相关代码!
    此文仅供参考,不喜勿喷!谢谢

    展开全文
  • Ajax实现异步上传图片

    万次阅读 多人点赞 2017-02-14 00:29:08
    目标:Ajax实现异步上传图片 要求:点击页面浏览按钮后,选择需要上传的图片,页面无刷新,将上传的图片展示出来 开发流程 一:在页面编写表单代码和js代码 <%@ page language="java" import="java.util.*...
  • typora上传图片

    千次阅读 2020-04-21 05:18:56
    typora写的文档上传图片的路径是本地磁盘的路径,放到csdn博客上图片就失效了 二、结合图床使用,下载地址 https://www.onlinedown.net/soft/1224381.htm 三、设置typora和图床结合 文件---->偏好设置 ----...
  • uniapp实现上传图片并显示

    万次阅读 2020-08-25 13:54:04
    uniapp实现上传图片并显示 uniapp为我们提供了非常多的api接口,当然包括上传图片的接口,可以直接使用 文章目录uniapp实现上传图片并显示uniapp图片上传接口 - uni.chooseImage(OBJECT)success 返回参数说明File ...
  • springmvc上传图片并显示图片--支持多图片上传

    万次阅读 多人点赞 2015-07-13 21:44:23
    springmvc上传图片并显示图片(也能上传文件),多图片上传并显示图片,采用commons-fileupload,commons-io
  • 在使用PS或者其他软件旋转图片时,图片旋转了,但Orientation不会改变,由于我们使用的图片预览器能够预处理图片,使其看起来与旋转后一致,但上传图片时,浏览器并不会预处理。所以导致图片旋转。 EXIF中,包含一...
  • Dio上传图片

    千次阅读 2020-03-02 11:54:15
    使用Dio上传图片: FormData formdata = FormData.fromMap({ "fileUpload": await MultipartFile.fromFile( imagePath, //图片路径 filename: 'data/file/...
  • jandroid选择图片或拍照上传图片

    千次下载 热门讨论 2012-11-22 20:20:17
    相关文章说明: http://blog.csdn.net/vipa1888/article/details/8213898
  • html上传图片后,在页面显示上传的图片1、html &lt;form class="container" enctype="multipart/form-data" method="post" id='formBox' name="form"&gt; &...
  • tp 上传图片 规定图片格式大小

    千次阅读 2019-03-05 18:44:42
    1、上传图片 规定大小 结合form 上传图片 html页面 注意 form上传图片要规定enctype=“multipart/form-data” 2、接受图片 控制器 3、设置储存图片位置 同时规定上传图片的规格 4、获取图片路径新名字存到数据库...
  • 一、上传图片到七牛云 1.安装图片上传以及图片批量上传插件 import "tinymce/plugins/image"; import "tinymce/plugins/axupimgs"; 2.在toolbar和plugins中使用这两个插件,使用自定义图片上传方法 plug...
  • vue实现上传图片和显示图片

    千次阅读 2020-08-21 19:27:24
    上传图片并显示 点击上传文件的input的时候,将图片上传到页面上,并且显示已经上传的图片,同时也可以保存到后台 // 因为input的上传按钮,会显示的比较突兀,所以在点击div的时候判断是否存在了上传文件的input...
  • 上传图片测试点

    万次阅读 多人点赞 2018-05-31 10:38:21
    ---------显示正常(根据需求)(3)查看,下载上传成功的图片--------上传的图片可查看或下载(4)删除上传成功的图片-------------可删除(5)替换上传成功的图片-------------可替换(6)上传图片是否支持中文...
  • 在项目中使用了element的el-upload上传图片组件,需求是上传一张图片而已,但是发现上传完以后一张图片后在旁边再生成一个上传图片的按钮 就像这样,实在是接受不了,并且需求是上传之后没有这个上传按钮,删除图片...
  • 如果一个程序里有多处地方用到用户上传图片等功能的话,建议还是放到阿里云或者千牛云等其他平台上来存储我们的图片,可以给公司的服务器减少很多压力,磁盘存储也就不会太大 2、提升用户体验感 我们开发的产品...
  • SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片   在上一篇文章中,我们介绍了《 SpringMVC上传图片的常规上传方法 》。本文接着第一篇,将继续介绍SpringMVC的上传图片,其中在页面...
  • iOS上传文件(图片)之AFNetworking 3.0上传文件上传图片本人最近做了一个上传头像的功能,找了许多iOS上传图片的资料,特意整理了下,希望对大家有帮助! 上传图片其实也是一个post请求,但你需要在请求头中告诉...
  • 微擎上传图片

    千次阅读 2017-08-30 11:25:05
    微擎上传图片的demo,想要的朋友加Q1193855371
  • 上代码: ...上传: <el-form-item label="图片" prop="HFname"> <el-upload class="upload-demo" :action="' '"//手动上传 置空 accept=".png"// 限制上传图片类型 :auto-upload="fal
  • Typora 设置上传图片功能

    千次阅读 2020-03-19 19:51:16
    Typora 设置上传图片功能 准备工作 安装 Picgo 安装 Typora 配置好自己的图床 以上步骤可参考我以前的文章 如何使用 picgo 搭建个人图床 Typora 设置自动上传插入图片功能,实现==截屏,粘贴和上传==这三个步骤...
  • typora自动上传图片

    千次阅读 2020-03-07 17:38:29
    typora最新版有了自动上传图片的插件,比以前那个插件好用。在本地插入图片后,虽然显示的相对路径(我设置的),但是在博文发到博客时,就把我的图片上传到github。 github访问速度不稳定,哎原因不需要我BB了,...
  • 如何实现上传图片并显示图片?

    千次阅读 2019-05-16 17:46:13
    如何实现上传图片并显示图片? 平时在注册或者填写完整个人信息的时候都会遇见上传个人图片的情况,那么你有没有想过这个该如何实现的呢?在以前还没有学到这个知识之前,就觉得好神奇,在网上居然能做到上传图片的...
  • Android 选择图片、上传图片之ImagePicker

    万次阅读 热门讨论 2017-04-28 18:12:46
    效果图:后来又出了两篇,也可以看一下Android 选择图片、上传图片之PictureSelectorAndroid 选择图片、上传图片之Matisse添加依赖:选择图片:compile 'com.lzy.widget:imagepicker:0.5.4'github地址:...
  • RestTemplate上传图片

    千次阅读 2017-06-27 21:45:12
    今天用RestTemplate上传图片,在这里分享下。同事定义的接收类型为MultipartFile,这是spring的对文件上传的一个组件。 我现在做的是跟以前的系统对接,图片上传之后使用BASE64处理的,所以我这里是使用BASE64对...
  • Android okHttp上传图片

    千次阅读 2019-03-05 11:14:10
    今天,简单讲讲Android 使用OK HTTP... * 上传图片 * @param url * @param imagePath 图片路径 * @return 新图片的路径 * @throws IOException * @throws JSONException */ public static String uploadIma...
  • Java MultipartFile 上传文件/上传图片1. 判断允许上传文件的 后缀/图片后缀工具类2. 上传接口3. 上传成功 1. 判断允许上传文件的 后缀/图片后缀工具类 import org.springframework.stereotype.Component; import ...
  • summernote 上传图片、删除图片

    千次阅读 2018-09-26 15:02:41
    summernote 上传图片 summernote官网的API和函数说明: https://summernote.org/deep-dive/ summernote 默认插入图片为base64数据 重写onImageUpload函数 在复制图片和插入图片时,函数生效。 $('....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 151,991
精华内容 60,796
关键字:

上传图片