upload.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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. console.log("H5 平台文件上传")
  22. // 根据fileType参数决定文件选择类型
  23. const chooseType = this.fileType || 'all';
  24. uni.chooseFile({
  25. count: 100, // 最多可以选择100个文件
  26. type: chooseType, // 根据fileType选择文件类型:all, image, video, audio, document
  27. success: async (res) => {
  28. const { tempFilePaths, tempFiles } = res;
  29. if (!tempFiles || tempFiles.length === 0) {
  30. return;
  31. }
  32. // 验证文件大小和类型
  33. const validFiles = [];
  34. for (let i = 0; i < tempFiles.length; i++) {
  35. const filePath = tempFilePaths[i];
  36. validFiles.push(filePath);
  37. }
  38. if (validFiles.length === 0) {
  39. return;
  40. }
  41. try {
  42. console.log("上传文件成功:1", validFiles)
  43. await Promise.all(validFiles.map(filePath => this.uploadFile(filePath)));
  44. this.handleUploadSuccess();
  45. } catch (error) {
  46. console.error('上传失败:', error);
  47. uni.$u.toast('上传失败');
  48. }
  49. },
  50. fail: (err) => {
  51. console.error('选择文件失败:', err);
  52. uni.$u.toast('选择文件失败');
  53. }
  54. });
  55. },
  56. // 上传文件
  57. async uploadFile(fileUrl) {
  58. try {
  59. uni.showLoading({
  60. title: '上传中...',
  61. mask: true
  62. });
  63. // 调用统一的上传接口
  64. const {
  65. data
  66. } = await uni.$u.api.uploadFile(fileUrl);
  67. const fileObj = {
  68. fileSize: data.fileSize,
  69. fileSuffix: data.fileSuffix,
  70. fileName: data.name,
  71. fileUrl: data.url,
  72. orderFileType: this.orderFileType
  73. };
  74. this.uploadList.push(fileObj);
  75. this.$emit('update:fileList', this.uploadList);
  76. this.$emit('change', this.uploadList);
  77. uni.hideLoading();
  78. } catch (error) {
  79. uni.hideLoading();
  80. console.error('文件上传失败:', error);
  81. uni.$u.toast('上传失败,请重试');
  82. }
  83. },
  84. // App 平台文件上传
  85. handleAppUpload() {
  86. const lemonjkFileSelect = uni.requireNativePlugin('lemonjk-FileSelect');
  87. // 根据fileType参数设置文件选择类型
  88. let mimeType = "*/*";
  89. let utisType = "public.data";
  90. switch (this.fileType) {
  91. case 'image':
  92. mimeType = "image/*";
  93. utisType = "public.image";
  94. break;
  95. case 'video':
  96. mimeType = "video/*";
  97. utisType = "public.movie";
  98. break;
  99. case 'audio':
  100. mimeType = "audio/*";
  101. utisType = "public.audio";
  102. break;
  103. case 'document':
  104. mimeType = "application/*";
  105. utisType = "public.data";
  106. break;
  107. default:
  108. // 'all' 或其他未识别的类型
  109. mimeType = "*/*";
  110. utisType = "public.data";
  111. }
  112. //4.0.0+ 使用示例及高级筛选器配置示例
  113. lemonjkFileSelect.showNativePicker({
  114. pathScope: "/DCIM/Camera",
  115. mimeType: mimeType,
  116. utisType: utisType,
  117. multi: 'yes'
  118. }, async result => {
  119. const {
  120. code,
  121. files
  122. } = result;
  123. if (code == 0) {
  124. // 选择的是否全部为图片
  125. const tempFilePaths = files.map(v => "file://" + v.filePath);
  126. Promise.all(tempFilePaths.map(v => this.uploadFile(v))).then(() => {
  127. this.handleUploadSuccess();
  128. }).catch(() => {
  129. uni.$u.toast("上传失败");
  130. })
  131. } else if (result.code == 1001) {
  132. uni.showModal({
  133. title: "需要文件访问权限",
  134. content: "您还未授权本应用读取文件。为保证您可以正常上传文件,请在权限设置页面打开文件访问权限(不同手机厂商表述可能略有差异)请根据自己手机品牌设置",
  135. confirmText: "去授权",
  136. cancelText: "算了",
  137. success(e) {
  138. if (e.confirm) {
  139. // 跳转到应用设置页
  140. lemonjkFileSelect.gotoSetting();
  141. }
  142. }
  143. })
  144. }
  145. })
  146. },
  147. },
  148. }