app 端文件上传 lsj-upload

# lsj-upload ### 插件地址：https://ext.dcloud.net.cn/plugin?id=5459 ### 不清楚使用方式可点击右侧导入示例项目运行完整示例 ### 此次更新2.0与1.0使用方式略有差异，已使用1.0的同学自行斟酌是否更新到2.0版本！！！ 使用插件有任何问题欢迎加入QQ讨论群： ### 插件交流群4：413918560 ------ - 以下群如无空位会被拒绝 - 群3：667530868（已满） - 群2：469580165（已满） - 群1：701468256（已满） 若能帮到你请高抬贵手点亮5颗星~ ------ ## 重要提示 ### 组件如果在scroll-view内使用需要自己监听scroll事件，并在滚动结束的时候调用一次show（查看下方scroll示例）！！ ### 控件的height、width应与slot自定义内容宽高度保持一致。 ### nvue窗口只能使用固定模式position=absolute 。 ### show() 当DOM重排后在this.$nextTick内调用show()，控件定位会更加准确。 ### hide() APP端webview层级比view高，如不希望触发点击时，应调用hide隐藏控件，反之调用show。 ### APP端请优先联调Android,上传成功后再运行iOS端。 ### 若iOS端跨域服务端同学实在配置不好，可把hybrid下html目录放到服务器去，同源则不存在跨域问题。 ### 小程序端因hybrid不能使用本地HTML，所以插件提供的是从微信消息列表拉取文件并选择，请知悉。 ### 关于很多问file对象打印出来是{}的问题，你可以打印file.name和file.size。 ### 因为跨浏览器，file不能完整返回到vue，返回的path是个blobURL，仅供用于图片类文件回显，插件已内置好上传函数，调用上传会自动提交待上传文件，若非要自己拿path去搞上传那你自己处理。 ### 不要再问关于返回的path怎么上传失败的问题，path只供用于image标签src属性回显图片，上传文件请使用组件内置上传函数。 ------ ## 上传报status：0 问题排查 ### App如果上传报status: 0，调试方法：关闭manifest.json>h5的代理(若有配置代理)，并运行项目至Chrome浏览器，按F12查看接口详细报错信息（重点：是Chrome,不是HX内置浏览器） ### Android端不存在跨域问题，如上传报status: 0时 #### 1、如果能进入接口，但收不到任何参数，检查是否在option>header里传入了Content-Type属性（默认不需要传，会自动匹配，若接口要求必须传则需要与接口匹配） #### 2、如果未能进入接口，检查nginx网关配置，不清楚可加群查看群相册资料。 ### iOS端若出现status：0，排除上面两个问题后只会是跨域问题 #### 1、后端处理允许上传接口跨域。（前端无需修改） #### 2、若后端不放开跨域，可将hybrid>html文件夹放入与接口同源的服务器，同源访问则不存在跨域问题。（可加群查看群相册资料） ------ ## 使用说明 | 属性 | 是否必填 | 值类型 | 默认值 | 说明 | | --------- | -------- | -----: | --: | :------------ | | permission| 否 | String |组件内查看 | 需要校验的系统权限集合 | | isPermissionInToast| 否 | Boolean |true | 未授权时是否显示内置Toast提示权限permission[].message,建议传true | | isPermissionInModal| 否 | Boolean |true | 用户拒绝授权时是否显示内置弹框引导用户开启权限 | | width | 否 | String |100% | 容器宽度（App必填且与slot内容宽度一致） | | height | 是 | String |80rpx | 容器高度（App必填且与slot内容高度一致） | | debug | 否 | Boolean |false | 打印调试日志 | | option | 是 | Object |- | [文件上传接口相关参数](#p1)| | toBase | 否 | Boolean |false | 【2.3.8新增】选择的文件是否转base64返回，APP端使用前请先查看下方js注释说明| | instantly | 否 | Boolean |true | instantly=true:选择文件后自动上传,instantly=false不自动上传，可通过调用upload()函数上传所有待上传的文件| | distinct | 否 | Boolean |false | 【2.3.0新增】是否去重同名文件（提示：不去重复时前端展示同名文件名称后面+(N)，后端接收到的file.name还是为原名）| | count | 否 | Number |10 | 文件选择上限(个)| | size | 否 | Number |10 | 文件大小上限(M) | | multiple | 否 | Boolean |true | 是否允许多选 | | wxFileType| 否 | String |all | 微信小程序文件选择器格式限制(all=从所有文件选择，video=只能选择视频文件，image=只能选择图片文件，file=可以选择除了图片和视频之外的其它的文件)| | accept | 否 | String |- | 文件选择器input file格式限制(有效值自行百度查accept)| | formats | 否 | String |- | 限制允许上传的格式，空串=不限制，默认为空，多个格式以逗号隔开，例如png,jpg,pdf| | childId | 否 | String |lsjUpload| 自定义组件id，在回调函数第二个参数返回（若页面有多个组件可用于区分是哪个组件回调）| | position | 否 | String |static | 控件的定位模式(static=控件随页面滚动;absolute=控件在页面中绝对定位，不随窗口内容滚动)| | top,left,right,bottom | 否 | [Number,String] |0 | 设置控件绝对位置，position=absolute时有效| | @change | 否 | Function |Map | 选择文件后触发，返回所有已选择文件Map集合| | @progress | 否 | Function |Object | 上传中持续触发，返回正在上传的文件对象，可通过set更新至页面显示上传进度| | @uploadEnd| 否 | Function |Object | 上传结束回调，返回当前上传的文件对象，type等于success（上传成功）返回responseText属性（服务端返回数据）| | @permissionBefore| 否 | Function |Object | 某项权限未授权时触发回调，返回{permission,message},仅isPermissionInToast传false时生效 | | @permissionFail| 否 | Function |Object | 用户拒绝授权时触发回调，返回{permission,message,result} | ## 【2.3.0】新增uni.$emit事件监听 | 方法名 | 说明 | |---- | ---- | | $upload-show | 调用当前页面所有上传组件的show() | | $upload-hide | 调用当前页面所有上传组件的hide() | 使用示例 ``` javascript this.$nextTick(()=>{ // 更新当前页所有上传组件在页面中的位置 uni.$emit('$upload-show',{}); }) ``` ## $Refs |作用 | 方法名| 传入参数| 说明| |---- | --------- | -------- | :--: | |显示和定位控件点击层| show|-| 控件显示状态下可触发点击| |隐藏控件点击层| hide|-| 控件隐藏状态下不触发点击| |动态设置文件列表| setFiles|[Array,Map] files| 传入格式请与组件选择返回格式保持一致，且name为必须属性，可查看下方演示| |动态更新参数| setData|[String] name,[any] value| name支持a.b 和 a[b]，可查看下方演示| |移除选择的文件| clear|[String] name| 不传参数清空所有文件，传入文件name时删除该name的文件| |手动上传| upload|[String] name| 不传参数默认依次上传所有type=waiting的文件，传入文件name时不关心type是否为waiting，单独上传指定name的文件| ## <a id="p1">option说明</a> |参数 | 是否必填 | 说明| |---- | ---- | :--: | |url | 是 | 上传接口地址| |name| 否 |上传接口文件key，默认为file| |header| 否 |上传接口请求头| |formData| 否 |上传接口额外参数| ## progress返回对象字段说明 |字段 | 说明| |---- | :--: | |file | 文件对象| |name |文件名称| |size |文件大小| |path |用于image标签src属性回显图片| |type |文件上传状态：waiting（等待上传）、loading（上传中）、success（成功） 、fail（失败）| |responseText|上传成功后服务端返回数据(仅type为success时存在)| ## 以下演示为vue窗口使用方式，nvue使�