03-12 09:58 阅读 303

UniApp+uView实现表单中的图片批量上传

技术概述

团队项目的需求是：用户在投诉的时候可以拍摄、多选上传最多5张的照片，达到上限时，隐藏上传按钮；用户可以预览、删除所选图片，添加或删除后的图片数和预览小图要及时、正确地反映到界面上；最终图片与投诉文字一起提交。
难点：在已有组件的基础上改进为自己想要的样子。

技术详述

我在团队开发中是否担任了小程序的前端开发，因此以下叙述没有涉及到图片上传的后端处理。
使用的是uView前端框架中的u-upload组件,使用方法可以参考uView的官方文档：。在uni-app插件市场可以下载到uview-ui安装包，具体配置方法不作赘述。解压后在components下可以找到组件源码，注释里给出了更详细的参数配置方法以供参考，也可以阅读其实现代码加深理解。

界面代码

直接引用组件，参照官方文档，结合自己的需求修改各种参数。这里我们将自动上传打开（auto-upload="true"），这样用户选择完图片后系统即返回一个url。

数据存储与部分参数配置

如图所示，action为服务器地址，form为表单上传的数据结构（是一个model），其中携带两个参数，反馈文本与图片url。fileList是组件自带的图片存放列表，imageList则是我们额外使用的。

处理函数

on-list-change:当内部文件列表被加入文件、移除文件，或手动调用clear方法时触发.返回(lists, name)，lists为内部文件变化之后的列表，name为通过props传递的index参数。这里我们直接获取lists的长度得到实时选择图片数。

on-success：图片上传成功时触发，data为服务器返回的数据。

on-remove：移除图片时触发，name为通过props传递的index参数。

上传组件请求后端服务器后接收返回的图片url，组件会自动更新预览列表，我们则将url以字符串的形式存入到表单的提交参数中，剩下的切割等工作交给后端或者需要显示反馈图片的Web端处理。
具体的说明都在注释中给出。

流程图
在画了。

问题和解决过程

坑1：开发过程中会出现如下情况：在小程序开发版与体验版的调试过程中，图片上传没有问题；但发布后的线上版本，图片上传请求后端接口失败。
原因：微信小程序里如果涉及到文件上传、下载等，发布上线版本时，需要到微信公众号官网，小程序开发管理里面，配置服务器域名，才能使相关功能的正常运行。就比如图片上传。
坑2：允许的图片后缀可以主动配置，默认为[‘png‘, ‘jpg‘, ‘jpeg‘, ‘webp‘, ‘gif‘]，但部分手机型号会出现图片后缀为大写的情况，因此需要主动加上，否则可能也会导致上传失败。
limitType: [‘png‘, ‘jpg‘, ‘jpeg‘, ‘webp‘, ‘gif‘, ‘JPG‘, ‘PNG‘, ‘JPEG‘, ‘GIF‘, ‘WEBP‘],
坑3：清空表单内容时最好将下面几句一并写上，不然可能会出现部分数据没有重置的情况。
坑4：记得使用并且善用JSON.stringify，否则常常会得到一个空串。遇到时就可以检查是否忘记了这一步。还有可能是服务器返回的数据结构与你写的获取代码不一致，比如服务器返回的是data.data.pictureUrl，包了两层data，只写data.pictureUrl的话就漏了一层。
坑5：处理添加与删除图片逻辑的时候一定要小心，参照上图代码，善用控制台测试。否则该组件会出现添加或删除图片后多出一张空白预览图的情况。

总结

uView是一个基于UniApp的开源前端模板，其存在本身较“新”,因此肯定存在着bug与设计上的不足。在使用其中的组件时势必会遇到不少问题，可能百度都难以找到与自己的情况完全相符的解决方法，这时候就可以多多仔细阅读官方文档与源代码，了解其内部逻辑；如果实在无法解决就先跳脱出去，想想是不是前端代码以外的问题，或者是否有替代方案。

参考

原文：https://www.cnblogs.com/railgunSE/p/14929087.html