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

这个项目用的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. jlink的SWD与JTAG下载模式的对应接线方法

     参考博客:http://blog.csdn.net/qq_26093511/article/details/59484249 (1)如果用jtag模式下载的话需要接线:          jlink ...

  2. 【Hadoop 分布式部署 七: 使用ntp配置内网中集群机器时间同步 】

    集群的时间要同步,如果时间不同步,会出现很多问题. 找一台机器做时间服务器 所有的机器与这台机器的时间进行定时的同步 比如,每日十分钟同步一次 我们这里使用  hadoop-senior.zuoyan ...

  3. Javascript 高级程序设计(第3版) - 第02章

    2017-05-10 更新原文: http://www.cnblogs.com/daysme 在 html 中使用 js 把js代码写在 <script type="text/java ...

  4. _itemmod_enchant_groups

    随机附魔组 附魔组 `groupId` 分组编号,同一groupId的附魔效果被随机抽取 `enchantId` 附魔Id 对应SpellItemEnchantment.dbc `chance` 被抽 ...

  5. Python 注释,类,属性,方法,继承

    # coding=utf-8 支持中文 """ 多行注释 声明鸟类 """ class Bird(object): have_feather ...

  6. Linux下的压缩解压缩命令详解及实例

    实例:压缩服务器上当前目录的内容为xxx.zip文件 zip -r xxx.zip ./* 解压zip文件到当前目录 unzip filename.zip ====================== ...

  7. Ado.net之存储过程的使用【三】

    重点是红色标记区域的代码,设置本次执行的是存储过程,如果不设置,默认操作的是sql语句 private void LoadData() { string constr = @"databas ...

  8. [转][cesium]1.添加本地服务器

    转自:http://www.cnblogs.com/fuckgiser/p/5633748.html 此系列cesium总教程:  https://www.cnblogs.com/fuckgiser/ ...

  9. typeScript入门基础 (2): 数据 类型, 函数定义

    1.   number , boolean, string, null, undefind  枚举, any, array数组, 元祖, 2...枚举,需要的注意点,  下一个图,就是为什么yello ...

  10. Vscode中运行js文件或部分代码 ,在下面cmd输出中显示结果

    重启 vscode,  这个插件  真好用,, 赞个 ....