搭建一个服务器买域名做网站,申请邮箱免费注册,桂林商品房做民宿在哪个网站登记好,网站设置不拦截uniapp多格式文件选择#xff08;APP#xff0c;H5#xff09; 背景实现代码实现运行结果注意事项 尾巴 背景
从手机选择文件进行上传是移动端很常见的需求#xff0c;在原生开发时由于平台专一性很容易实现。但是用uniapp开发官方提供的API在APP平台只能选择图片和视频APPH5 背景实现代码实现运行结果注意事项 尾巴 背景
从手机选择文件进行上传是移动端很常见的需求在原生开发时由于平台专一性很容易实现。但是用uniapp开发官方提供的API在APP平台只能选择图片和视频选择其他格式的File也只有H5平台提供了相关API。虽然通过NativeJs也能实现选择多格式文件但是需要对原生开发有一定的了解而且不太稳定。所以本文提供一个能抹平平台差异并且通用的方式来选择手机端的多格式文件但是只限于APP和H5平台。先上个Android端的效果图 实现
思路是通过renderjs来实现通过在renderjs中创建一个input为file类型的dom元素然后手动触发dom的click方法则会弹出文件选择框如上。
代码实现
从上截图可以知道页面上就一个按钮通过点击按钮触发renderjs中的函数然后执行dom相关操作代码相对简单这里就直接上代码
templateview classcontentbutton clickfileChoose文件选择/buttonview :fileDatafileData :change:fileDatarenderJS.receiveFileData//view
/templatescriptexport default {data() {return {fileData: }},onLoad() {},methods: {fileChoose(){this.fileData test//这里将fileData定时置空否则下次点击不会触发renderjs函数setTimeout(() {this.fileData },1000)},//从renderjs中触发的函数回调receiveRenderFile(result){console.log(result)}}}
/script
script modulerenderJS langrenderjsexport default {data() {return {}},mounted() {console.log(1111111111mounted)},methods: {receiveFileData(newValue, oldValue, ownerVm, vm){if(!newValue){return}this.createFileInputDom(ownerVm)},//手动创建domcreateFileInputDom(ownerVm){let fileInput document.createElement(input)//设置input为file类型fileInput.setAttribute(type,file)//设置file格式为素有fileInput.setAttribute(accept,*)//手动触发dom点击事件fileInput.click()fileInput.addEventListener(change, e {//获取file对象let file e.target.files[0]//转化为URL路径const filePath URL.createObjectURL(file)//将文件名和文件路径回调到视图层ownerVm.callMethod(receiveRenderFile,{name: file.name,filePath: filePath})//事件回调之后销毁domfileInput null})}}}
/script
style
/style运行结果
我们这里选择手机一个为工作助手的apk文件
receiveRenderFile函数中打印如下
{name: 工作助手.apk,filePath: blob:file:///07f057dc-b51b-445c-9fb8-8ec9c64075c9
}拿到名字和路径之后我们就可以使用uni.uploadFile相关API进行上传。
注意事项
由于本人使用的是Android手机苹果手机上未尝试过这种方式iOS平台不能保证有用(理论上来说应该是支持的)。
尾巴
今天的文章就到这里了希望能给大家帮助如果喜欢我的文章欢迎给我点赞评论关注谢谢大家
