这篇文章主要是记录一下在开发钉钉微应用时,实现图片上传及显示功能的过程。

这个项目用的dingyou-dingtalk-mobile这个脚手架,可直接在NowaGui上创建。这是一个关于钉钉微应用的脚手架,关于它的介绍以及更详细的内容,可以参考https://caohaijiang.github.io/2017/04/17/dingtalk-start/,对于刚入门使用react开发移动前端的同学还是很有帮助的。

该项目使用的前端UI是antd-mobile,其用户手册可以参看https://mobile.ant.design/docs/react/introduce-cn,里面提供了比较丰富的ui组件,基本上可以满足前端的开发。

转到重点,说一下其ImagePicker组件的实际应用。

前端的使用可以参考其用户手册,有比较详尽的实例说明,之前在开发时候也比较顺利的使用了这个组件,但是在将这个上传的图片,如何保存到后台服务器上,纠结了不少时间。网上看了不少相关文章,但是貌似都没什么帮助。

这边后端是通过springmvc来处理的,

    @CrossOrigin( maxAge = 3600)
@RequestMapping("/upload")
@ResponseBody
public String upload(HttpServletRequest request,@RequestParam("file") MultipartFile file) throws IOException

其中MultipartFIle file用来接收前端传过来的文件,前端应该如何传递过来,需要使用FormDate传递参数。如下

                  for(let key in this.state.files){

                        let formData = new FormData();
formData.append("file", this.state.files[key].file);
formData.append("dateId", dateId);
formData.append("flag", "1"); fetch(AUTH_URL + "ddoa/upload" , {
method: 'POST',
headers: {
},
body: formData,
}).then((response) => response.json())
.then((responseData)=> { console.log('uploadImage', responseData); Control.go("/leavedetail/"+dateId, ); }).catch((err)=> {
this.showToast();
const msg = response.msg;
Toast.info(msg, 2);
});
}

如上,获取file将其设置到file中,在后台即可接收到。后端通过

 FileUtils.copyInputStreamToFile(file.getInputStream(),new File(imagePath, imageName));

即可将文件上传到imagePath指定的目录中。完成图片的上传。此处需要将上传图片的相关的信息保存的至一张数据库表中,该表应该包括图片名称、图片实际路径、关联的主表Id等,根据业务进行拓展。

之后是将上传的图片在页面中显示了。

由于后端是springBoot项目,可以使用其提供的图片服务器来显示图片。可参考https://www.cnblogs.com/bestxyl/p/7403297.html来实现。

再需要后端写一个通过主键ID值获取相应图片名称的接口,搭配图片服务器即可显示出来了。

前端具体可如下实现

render() {

        const listForImage = (imagesList) => {
let images = [];
for(let i = 0; i < imagesList.length; i++) { let m = {url : AUTH_URL + 'images/' + imagesList[i].imageName,id : imagesList[i].id}; images.push( m );
} return images;
} const files = listForImage(this.state.imagesList) ; return (
<div>
<div style={{display: this.state.imagesList.length == 0 ? 'none' : ''}}>
<WhiteSpace size="lg" /> <Card>
<Card.Header
title={<span><font color="gray"> * </font>图片</span>}
/>
<Card.Body style={{width : '90%'}}>
<ImagePicker
files={files}
onImageClick={(index, fs) => console.log(index, fs)}
selectable={false}
multiple={false} />
</Card.Body> </Card>
</div>
   </div>
);
}
 componentDidMount() {

    fetch( AUTH_URL + "ddoa/getImages" , {
method: 'POST',
headers: {
},
body: formData,
}).then((response) => { if (response.ok) { return response.json();
}
}).then((json) => { const imagesList = json.images; this.setState({imagesList:imagesList}); }).catch((error) => {
console.error(error);
}); }

使用antd-mobile的ImagePicker组件实现图片的上传的更多相关文章

  1. yii2组件之多图上传插件FileInput的详细使用

    作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...

  2. ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结

    相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...

  3. iOS实现视频和图片的上传

    关于iOS如何实现视频和图片的上传, 我们先理清下思路 思路: #1. 如何获取图片? #2. 如何获取视频? #3. 如何把图片存到缓存路径中? #4. 如何把视频存到缓存路径中? #5. 如何上传 ...

  4. [转]Kindeditor图片粘贴上传(chrome)

    原文地址:https://www.cnblogs.com/jsper/p/7608004.html 首先要赞一下kindeditor,一个十分强大的国产开源web-editor组件. kindedit ...

  5. Vue项目图片剪切上传——vue-cropper的使用

    最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求.上网百度了一番,发现好多用的都是vue-cropper.我也就用了,个人感觉还是挺好用的.现 ...

  6. 基于vue + axios + lrz.js 微信端图片压缩上传

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...

  7. common-fileupload组件实现java文件上传和下载

    简介:文件上传和下载是java web中常见的操作,文件上传主要是将文件通过IO流传放到服务器的某一个特定的文件夹下,而文件下载则是与文件上传相反,将文件从服务器的特定的文件夹下的文件通过IO流下载到 ...

  8. 利用WebUploader进行图片批量上传,在页面显示后选择多张图片压缩至指定路径【java】

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...

  9. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

随机推荐

  1. 2. mysql 语句

    基础语句 创建表 DROP TABLE IF EXISTS student;CREATE TABLE student ( id ) NOT NULL AUTO_INCREMENT, sname ) N ...

  2. 在GeoServer里设置图层的默认自定义样式,出现不显示预览图的情况(不起作用)

    在GeoServer里设置图层的默认自定义样式 点击"Layers-->world:country"图层,点击"Publishing"标签,在下面的&qu ...

  3. Python深入:Distutils发布Python模块--转载

    https://blog.csdn.net/gqtcgq/article/details/49255995 Distutils可以用来在Python环境中构建和安装额外的模块.新的模块可以是纯Pyth ...

  4. 【Java】【异常】

    java中2种方法处理异常:1.在发⽣异常的地方直接处理:2.将异常抛给调用者,让调⽤者处理.异常分类1.检查性异常: java.lang.Exception2.运⾏期异常: java.lang.Ru ...

  5. Intellij idea创建maven项目并配置tomcat

    今天刷知乎的时候刷到这么一句话 我觉得还是蛮有趣的,形容的也比较到位,正好最近新建maven项目进行了thrift数据的传输,在此做一个记录 首先idea整合了maven,不需要单独下载 新建一个Pr ...

  6. 遍历一个可迭代对象中的所有元素,但是却不想使用for循环

    def manual_iter(): with open('/etc/passwd') as f: try: while True: line = next(f) print(line, end='' ...

  7. Jmeter干货 不常用却极其有用的几个地方

    1. Jmeter测试计划下Run Thread Groups consecutively 表示序列化执行测试计划下所有线程组中的各个请求 如下图配置,新建的测试计划中,不默认勾选此项, 而享用Jme ...

  8. scala函数式编程(一)

    scala函数编程特点: 1.Scala函数使用命名参数: 即函数参数传递的实参与函数名相对应,与函数位置不对应. object Test { def main(args: Array[String] ...

  9. 力扣(LeetCode)125. 验证回文串

    给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, a plan, a c ...

  10. Spark多种运行模式

    1.测试或实验性质的本地运行模式(单机) 该模式被称为Local[N]模式,是用单机的多个线程来模拟Spark分布式计算,通常用来验证开发出来的应用程序逻辑上是否有问题. 其中N代表可以使用N个线程, ...