upload.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. export default {
  2. data() {
  3. return {
  4. uploadList: []
  5. }
  6. },
  7. computed: {
  8. },
  9. methods: {
  10. // 处理文件上传
  11. handleUpload() {
  12. // #ifdef H5
  13. this.handleH5Upload();
  14. // #endif
  15. // #ifdef APP-PLUS
  16. this.handleAppUpload();
  17. // #endif
  18. },
  19. // H5 平台文件上传
  20. handleH5Upload() {
  21. uni.chooseFile({
  22. count: 100, // 最多可以选择100个文件
  23. type: 'all', // 选择所有类型文件
  24. success: async (res) => {
  25. const { tempFilePaths, tempFiles } = res;
  26. if (!tempFiles || tempFiles.length === 0) {
  27. return;
  28. }
  29. // 验证文件大小和类型
  30. const validFiles = [];
  31. for (let i = 0; i < tempFiles.length; i++) {
  32. const filePath = tempFilePaths[i];
  33. validFiles.push(filePath);
  34. }
  35. if (validFiles.length === 0) {
  36. return;
  37. }
  38. try {
  39. await Promise.all(validFiles.map(filePath => this.uploadFile(filePath)));
  40. this.handleUploadSuccess();
  41. } catch (error) {
  42. console.error('上传失败:', error);
  43. uni.$u.toast('上传失败');
  44. }
  45. },
  46. fail: (err) => {
  47. console.error('选择文件失败:', err);
  48. uni.$u.toast('选择文件失败');
  49. }
  50. });
  51. },
  52. // 上传文件
  53. async uploadFile(fileUrl) {
  54. try {
  55. uni.showLoading({
  56. title: '上传中...',
  57. mask: true
  58. });
  59. // 调用统一的上传接口
  60. const {
  61. data
  62. } = await uni.$u.api.uploadFile(fileUrl);
  63. const fileObj = {
  64. fileSize: data.fileSize,
  65. fileSuffix: data.fileSuffix,
  66. fileName: data.name,
  67. fileUrl: data.url,
  68. orderFileType: this.orderFileType
  69. };
  70. this.uploadList.push(fileObj);
  71. this.$emit('update:fileList', this.uploadList);
  72. this.$emit('change', this.uploadList);
  73. uni.hideLoading();
  74. } catch (error) {
  75. uni.hideLoading();
  76. console.error('文件上传失败:', error);
  77. uni.$u.toast('上传失败,请重试');
  78. }
  79. },
  80. // App 平台文件上传
  81. handleAppUpload() {
  82. const lemonjkFileSelect = uni.requireNativePlugin('lemonjk-FileSelect');
  83. //4.0.0+ 使用示例及高级筛选器配置示例
  84. lemonjkFileSelect.showNativePicker({
  85. pathScope: "/DCIM/Camera",
  86. mimeType: "*/*",
  87. utisType: "public.data",
  88. multi: 'yes'
  89. }, async result => {
  90. const {
  91. code,
  92. files
  93. } = result;
  94. if (code == 0) {
  95. // 选择的是否全部为图片
  96. const tempFilePaths = files.map(v => "file://" + v.filePath);
  97. Promise.all(tempFilePaths.map(v => this.uploadFile(v))).then(() => {
  98. this.handleUploadSuccess();
  99. }).catch(() => {
  100. uni.$u.toast("上传失败");
  101. })
  102. } else if (result.code == 1001) {
  103. uni.showModal({
  104. title: "需要文件访问权限",
  105. content: "您还未授权本应用读取文件。为保证您可以正常上传文件,请在权限设置页面打开文件访问权限(不同手机厂商表述可能略有差异)请根据自己手机品牌设置",
  106. confirmText: "去授权",
  107. cancelText: "算了",
  108. success(e) {
  109. if (e.confirm) {
  110. // 跳转到应用设置页
  111. lemonjkFileSelect.gotoSetting();
  112. }
  113. }
  114. })
  115. }
  116. })
  117. },
  118. },
  119. }