jiazhengUpload.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template>
  2. <view v-if="changjingType =='shenfenzheng'" class="admin-upload-btn-box" @click="showActionSheet">
  3. <text>+</text>
  4. </view>
  5. <view v-else class="upload-btn" @click="showActionSheet">
  6. <text>+</text>
  7. </view>
  8. <view v-if="bottomText" class="bottom-text">
  9. {{bottomText}}
  10. </view>
  11. </template>
  12. <script>
  13. import {
  14. getAliyunPolicy
  15. } from "@/api/jiazheng.js"
  16. export default {
  17. props: {
  18. bottomText: { // 试题序号
  19. type: String
  20. },
  21. changjingType:{
  22. type: String,
  23. default: ''
  24. }
  25. },
  26. methods: {
  27. showActionSheet() {
  28. uni.showActionSheet({
  29. itemList: ['拍照', '从相册选择'],
  30. success: (res) => {
  31. if (res.tapIndex === 0) {
  32. this.chooseImage('camera');
  33. } else if (res.tapIndex === 1) {
  34. this.chooseImage('album');
  35. }
  36. }
  37. });
  38. },
  39. chooseImage(sourceType) {
  40. uni.chooseImage({
  41. count: 1, // 只能选择一张图片
  42. sourceType: [sourceType], // 'camera' 或 'album'
  43. success: (res) => {
  44. const filePath = res.tempFilePaths[0];
  45. this.uploadFileToAliyun(filePath);
  46. }
  47. });
  48. },
  49. uploadFileToAliyun(filePath) {
  50. console.log('filePath', filePath);
  51. const loading = uni.showLoading({
  52. title: '上传中...',
  53. mask: true
  54. });
  55. try {
  56. const suffix = filePath.split('.').pop();
  57. let req = {
  58. prefix: 'resource/',
  59. suffix: suffix
  60. }
  61. getAliyunPolicy(req).then(res => {
  62. if (res.code == 0) {
  63. const policyData = res.data;
  64. console.log('policyData', policyData);
  65. const formData = {
  66. key: policyData.key,
  67. policy: policyData.policy,
  68. OSSAccessKeyId: policyData.accessid,
  69. signature: policyData.signature,
  70. success_action_status: '200',
  71. file: {
  72. name: policyData.key,
  73. uri: filePath
  74. }
  75. };
  76. uni.uploadFile({
  77. url: policyData.uploadUrl,
  78. filePath: filePath,
  79. name: 'file',
  80. formData: formData,
  81. header: {
  82. 'Content-Type': 'multipart/form-data'
  83. },
  84. success(uploadRes) {
  85. console.log('uploadRes', uploadRes);
  86. if (uploadRes.statusCode === 200) {
  87. const imageUrl = `${policyData.downloadUrl}/${policyData.key}`;
  88. uni.showToast({
  89. title: '上传成功',
  90. icon: 'success'
  91. });
  92. console.log('imageUrl', imageUrl);
  93. //this.$emit('getFileUrl', imageUrl);
  94. } else {
  95. uni.showToast({
  96. title: '上传失败',
  97. });
  98. return false
  99. }
  100. },
  101. fail(err) {
  102. console.log('err', err);
  103. }
  104. });
  105. } else {
  106. uni.showToast({
  107. title: '获取凭证失败',
  108. });
  109. return false
  110. }
  111. })
  112. } catch (error) {
  113. uni.showToast({
  114. title: '上传失败',
  115. icon: 'none'
  116. });
  117. console.error('上传失败:', error);
  118. } finally {
  119. uni.hideLoading();
  120. }
  121. },
  122. }
  123. };
  124. </script>