当前位置:   article > 正文

uniapp之app开发选择本地文件上传至服务器_uniapp开发android使用plus选择文件

uniapp开发android使用plus选择文件

我们知道uniapp在针对图片、视频这类文件有专门的API提供,这只是对于H5、小程序,而对于app而言,当选择文件特别是非图片等文件时似乎是力不从心。

最近的项目也是争对app android端关于文件上传时做了一下记录,希望对大家有所帮助

代码仍结合uniapp提供的uni.uploadFile()以及HTML5+开发者联盟所提供的技术实现,现记录一下实现过程中遇到的坑:

1、使用uni.request(),由于android端选择的文件通过不断的解析后是:/storage/emulated/0/Download/jiuguan0001.mp3 这种路径,因此uni.request()在解析时出错,不知道后端是如何处理这样的文件的

2、使用 new XMLHttpRequest() 测试发现文件存在跨域问题,找了很多方法仍然无果,决定放弃

3、使用uniapp插件市场提供的插件web-view,发现不够理想,修改后虽然可以用但达不到想要的效果

本文只是针对android 端其它端未测试,如有帮助可以参考

具体实现如下:

一、选择本地文件:(注意有的android机权限没有打开,需要打开权限,否则上传失败)

  1. let that = this;
  2. let filePath = ''
  3. let url = uni.$u.http.config.baseURL // 根域名地址
  4. let main = plus.android.runtimeMainActivity();
  5. let Intent = plus.android.importClass('android.content.Intent');
  6. let intent = new Intent(Intent.ACTION_GET_CONTENT);
  7. intent.setType('*/*');
  8. intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true); //关键!多选参数
  9. intent.addCategory(Intent.CATEGORY_OPENABLE);
  10. main.startActivityForResult(intent, 200);
  11. // 获取回调
  12. main.onActivityResult = function(requestCode, resultCode, data) {
  13. let Activity = plus.android.importClass('android.app.Activity');
  14. let ContentUris = plus.android.importClass('android.content.ContentUris');
  15. let Cursor = plus.android.importClass('android.database.Cursor');
  16. let Uri = plus.android.importClass('android.net.Uri');
  17. let Build = plus.android.importClass('android.os.Build');
  18. let Environment = plus.android.importClass('android.os.Environment');
  19. let DocumentsContract =
  20. plus.android.importClass('android.provider.DocumentsContract');
  21. // 给系统导入 contentResolver
  22. let contentResolver = main.getContentResolver();
  23. plus.android.importClass(contentResolver);
  24. // 返回路径
  25. let path = '';
  26. if(resultCode == Activity.RESULT_OK){
  27. // 解析路径
  28. if(data.getData() != null){
  29. let uri = data.getData()
  30. //this 当前mainClass实例
  31. path = getPath(this, uri)
  32. that.filePath = path
  33. }
  34. }
  35. }

二、使用uni.uploadFile(),经过测试可以上传

  1. uni.uploadFile({
  2. url: url + '/index/uploadFile', // 上传地址
  3. methods: "POST",
  4. name: 'file',
  5. filePath:that.filePath, // 本地路径
  6. // formData: formdata,
  7. header: {
  8. 'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
  9. },
  10. success: res => {
  11. // console.log("res--->",res)
  12. uni.hideLoading()
  13. let result = JSON.parse(res.data).data // 上传成功后的地址链接
  14. uni.showLoading({
  15. title:'开始AI合成'
  16. })
  17. // 根据项目需求,自行删除
  18. //拿到链接进行下一步处理
  19. uni.$u.http.post('/index/sync_audio',{
  20. id:id,
  21. url:result.url
  22. }).then(res => {
  23. // console.log("upload--->",res)
  24. if (res.data.code == 1) {
  25. uni.hideLoading()
  26. uni.$u.toast("上传成功")
  27. setTimeout(function() {
  28. let pages = getCurrentPages()
  29. let currentPage = pages[pages.length-1]
  30. // console.log("currentPage---->",currentPage)
  31. currentPage.$vm.$refs.paging.reload() // 刷新当前 列表
  32. }, 1200)
  33. } else {
  34. uni.hideLoading()
  35. uni.$u.toast(res.data.msg)
  36. }
  37. }).catch( err =>{
  38. uni.hideLoading()
  39. uni.$u.toast('生成失败')
  40. })
  41. },
  42. fail: res => {
  43. uni.hideLoading()
  44. uni.showToast({
  45. title: "文件上传失败"
  46. })
  47. },
  48. complete: res => {}
  49. })

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/190280
推荐阅读
相关标签
  

闽ICP备14008679号