背景
公司需求要求在自用的pda上开发一款硬件测试的app。平时都是直接写H5页面的，但是考虑到定制pda的特殊性，居然无法通过网页端唤起摄像头进行拍照以及拍摄视频。所有采用app的方式来实现。uni-app看着功能很强大，用起来也碰到了许多问题。
一：无法使用formdata数据格式进行提交
在这指的是无法通过自定义header的content-type的方式来实现multipart/form-data的数据传输，uni.request({})方法无法处理multipart/form-data需要其他方式来封装处理。
需求场景：在app中对驳回操作，可以添加多张图片（也可不传），以及驳回理由。刚开始直接使用：uni.uploadFile(OBJECT)用的美滋滋。部分api参数截图如下：
需求是多张图片和其他数据，一起提交。所以我用的是files数据来包装数据。files参数如下：
在这要注意uri不是url。好景不长在网页测试，一切都ok。但是到了模拟器和真机测试发现报错了。一直报indexof ***错误。仔细一看代码哪里都不想是出了问题。最后发现是因为没传文件导致的。因为文件可传可不传这么一个举动，在网页h5上一切都ok。但是在模拟器和真机上报错了。因为files为必填项，改为[]数组还是报错。最后是判定要是图片内容为空直接使用filepath的方式来传输，有图片则用files的方式来完成。
uni.uploadFile({
url: this.$url + '/v2/factory/process_status',
filePath:'',
name:'',
formData: {
shelf_sn: orderObj.shelf_sn,
reset_flag: 1,
test_id: orderObj.test_id,
category_one: this.category_one,
category_two: this.category_two,
reason：this.reason
},
success: (uploadFileRes) => {
this.getTestInfo()
},
fail: (res) => {
this.$refs.mypopup.open('error', res.data.msg)
}
})
此方法还顺带解决uni.request({})方法无法处理multipart/form-data的问题，一举两得。网友在uniapp中处理multipart/form-data的解决方法如下：
看了下别人写的文档吓得我瑟瑟发抖，为了处理这个兼容问题也是引入一堆插件。不知道我这么暴力的方法其他人看到了会不会说我是框架漏洞。但是内心还是得瑟一下。毕竟我这简单粗暴的解决了问题。
一：img标签和image标签问题造成的图片无法展示
习惯了快捷方式的我img一下tab直接创建一个图片标签。网页端和模拟器上选择相册中的文件上传一切都ok，用摄像头拍照的图片为啥只有一个占位，却看不到图片内容。提交都后端又正常收到了图片。欺负我前端？莫名奇妙的错误，检查上传的图片输出，发现选择相册图片返回是：blob:http://***一串内容，拍照是file:///***一串内容。于是有一堆的拼接改造发现还是无果。最后审查元素发现是 自己用的是img标签，而不是image标签。于是改成image标签，至此成功。
