vant的Uploader 文件上传,图片数据回显问题
vant的Uploader文件上传,图片数据回显
需求
描述一下:点击上传证件照,选取需要的图片文件,然后图片在证件照栏展示
分析
看着挺简单的,用的是vant,里面有个文件上传的组件Uploader,它里面的文件预览模式是这样的
啊这。。。
指定不行,还好它还有自定义上传样式的,像这样
问题又来了:选取文件后没反应了!!!
其实也不是,没有反应就是没有对文件数据进行处理展示。
看一下Uploader的API:
参数file可以获取到一个文件对象
可以拿到文件名、文件类型、还有图片的base64格式的图片数据,那么我们只需要定义一个字段来接受这个图片数据,并绑定给展示证件照的图片框上就能实现图片回显了!
使用
结构部分
<van-field name="photo" label="证件照" colon class="tx"> <template #input> <van-image :src="staffPhoto ?staffPhoto : require('@/assets/icon/tx.png')" /> </template> </van-field> <van-uploader :before-read="beforeRead" :after-read="afterRead"> <van-button icon="add-o">上传证件照</van-button> </van-uploader>
方法部分
const afterRead = (file) => { state.staffPhoto = file.content; };
Uploader里面呢还有一个API:before-read
我们一般在这个里面对图片的格式进行控制
举个栗子:
// 返回布尔值 const beforeRead = (file) => { if (file.type !== "image/jpeg") { Toast("请上传 jpg 格式图片"); return false; } return true; };
当然,我们也可以对图片的大小进行控制
自带的事件oversize
const onOversize = () => { Toast("文件大小不能超过 500kb"); };
结构部分就是:
<van-uploader multiple :max-size="onOverSize" />
基本使用Uploader用到的功能就这些了,如果有其他的需求可以访问文档:
Uploader的基本使用
使用有赞Vant上传控件Uploader感悟
因为项目是公众号网页项目,公司前端推荐使用有赞Vant组件库,这让之前都是自己撸js,css的我仿佛打开了新世界的大门,废话不多说,上正文。
照着官方文档,我很快上手撸出了界面。
<van-uploader v-model="fileList" multiple :max-count="4"/>
因为需求说明最多只能上传4张图片,故使用了max-count来定义最大上传数量。
数据处理
我上传了一张照片,我们来看看fileList的数据是什么格式。
可以看到结果是一个数组array,每张图片都转为一个对象,对象下有两个键值分别是:content->图片base64编码(有赞这个Uploader很贴心的帮我们把图片转成base64格式流),file->一个文件对象,包含了文件名,上传路径,文件类型,文件大小等。
看完了数据,后端需要我们把文件传给他们,这里有一点需要注意,base64编码由于长度原因,请求方式必须用POST。
let photos = [] that.fileList.forEach(v=> { let o = { base64Str: v.content, filename: v.file.name } photos.push(o) })
通过axios请求后台
axios.request({ url: '/x/xxx/api', data: { photos: photos }, method: 'POST' })
后台处理
@RequestMapping(value = "/api", method = RequestMethod.POST) public JSONObject xxx(@RequestBody JSONObject jsonObject) { JSONArray photos = jsonObject.getJSONArray("photos"); if (photos.size() > 0) { for (int i = 0; i < photos.size(); i++) { JSONObject obj = photos.getJSONObject(i); String fileName = obj.getString("filename"); String base64Str = obj.getString("base64Str"); String directoryName = "xx/xx"; String extension = fileName.substring(fileName.lastIndexOf(".")).toLowerCase(); InputStream inputStream = new ByteArrayInputStream(Base64.decodeBase64(base64Str.substring(base64Str.indexOf(",") + 1))); OSSClient client = new OSSClient(endpoint, accessKeyId, accessKeySecret); client.putObject(bucketName, getRandomKey(directoryName, extension), inputStream); // extension指的是拓展名,例如".amr" } } } /** * 随机生成一个key * @return String 随机key */ public static String getRandomKey(String directoryName, String extension){ StringBuffer key = new StringBuffer(); if (StringUtils.isNotBlank(directoryName)) { key.append(directoryName); if (directoryName.charAt(directoryName.length() - 1) != '/') { key.append("/"); } } key.append(System.currentTimeMillis()); for (int i = 0; i < 10; i++) { key.append(randomStr.charAt(RandomUtils.nextInt(0, randomStr.length()))); } if (StringUtils.isNotBlank(extension)) { if (extension.indexOf(".") == -1) { key.append("."); } key.append(extension); } return key.toString(); }
后台处理需要注意下base64编码,我先把base64Str解码转为byte[]数组,因为项目使用阿里的OSSClient,上传过程还是比较简单。
整个流程做完了,感觉组件大大缩减了开发和调试时间。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/yolo_link/article/details/123328775
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 这篇文章主要介绍了C#从数据库读取图片并保存的方法,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下...2021-01-16
- 这篇文章主要介绍了Python 图片转数组,二进制互转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
- 今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程,各位想知道方法的使用者们,那么下面就快来跟着小编一...2016-09-14
- php如何实现抓取网页图片,相较于手动的粘贴复制,使用小程序要方便快捷多了,喜欢编程的人总会喜欢制作一些简单有用的小软件,最近就参考了网上一个php抓取图片代码,封装了一个php远程抓取图片的类,测试了一下,效果还不错分享...2015-10-30
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮...2013-10-13- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 这篇文章主要介绍了使用Vant完成通知栏Notify的提示操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-11
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
- Photoshop的这一款软件小编相信很多的人都已经是使用过了吧,那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程,想知道制作步骤的玩家们,那么下面...2016-09-14
- 图片剪裁是常用的方法,那么如何通过4坐标剪裁图片,本文就详细的来介绍一下,感兴趣的小伙伴们可以参考一下...2021-06-04
- 这篇文章主要介绍了解决vant-UI库修改样式无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03
- 共享一段使用PHP下载CSS文件中的图片的代码 复制代码 代码如下: <?php //note 设置PHP超时时间 set_time_limit(0); //note 取得样式文件内容 $styleFileContent = file_get_contents('images/style.css'); //not...2013-10-04
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
C#中图片旋转和翻转(RotateFlipType)用法分析
这篇文章主要介绍了C#中图片旋转和翻转(RotateFlipType)用法,实例分析了C#图片旋转及翻转Image.RotateFlip方法属性的常用设置技巧,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了OpenCV如何去除图片中的阴影的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-29
- 这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14