uploadResume.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <view class="upload-container">
  3. <!-- 顶部插图区域 -->
  4. <view class="header-notice">
  5. <image style="width: 30rpx;height: 30rpx;" src="https://data.qicai321.com/minlong/57d03f34-47de-43fe-8730-b764ed8bdda2.png" mode="aspectFit"></image>请上传简历文件,格式支持pdf及doc格式
  6. </view>
  7. <view class="illustration">
  8. <image class="img" src="https://data.qicai321.com/minlong/09d4daa6-6507-4133-81ff-68e47b0259e5.png" mode="aspectFit"></image>
  9. </view>
  10. <!-- 上传按钮 -->
  11. <button class="upload-btn" @click="chooseFile">
  12. 选择并上传文件
  13. </button>
  14. <!-- 使用说明区域 -->
  15. <view class="instructions">
  16. <view class="title">使用说明及注意事项</view>
  17. <view class="instruction-list">
  18. <view class="instruction-item">1. 点击【选择并上传文件】按钮,上传简历;</view>
  19. <view class="instruction-item">2. 请在本地选择简历文件,文件小于30mb;</view>
  20. <view class="instruction-item">3. 支持pdf及doc格式。</view>
  21. </view>
  22. <!-- 隐私提示 -->
  23. <view class="privacy-notice">
  24. * 我们将对您的隐私保护,所内容仅用于评估岗位的匹配度。
  25. </view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. export default {
  31. data() {
  32. return {
  33. fileType: ['pdf', 'doc', 'docx'],
  34. maxSize: 30 * 1024 * 1024 // 30MB in bytes
  35. }
  36. },
  37. methods: {
  38. chooseFile() {
  39. // #ifdef H5
  40. uni.chooseFile({
  41. count: 1,
  42. type: 'file',
  43. extension: this.fileType,
  44. success: (res) => {
  45. if (res.tempFiles[0].size > this.maxSize) {
  46. uni.showToast({
  47. title: '文件大小不能超过30MB',
  48. icon: 'none'
  49. })
  50. return
  51. }
  52. this.uploadFile(res.tempFiles[0])
  53. }
  54. })
  55. // #endif
  56. // #ifdef APP-PLUS || MP
  57. uni.chooseMessageFile({
  58. count: 1,
  59. type: 'file',
  60. extension: this.fileType,
  61. success: (res) => {
  62. if (res.tempFiles[0].size > this.maxSize) {
  63. uni.showToast({
  64. title: '文件大小不能超过30MB',
  65. icon: 'none'
  66. })
  67. return
  68. }
  69. this.uploadFile(res.tempFiles[0])
  70. }
  71. })
  72. // #endif
  73. },
  74. uploadFile(file) {
  75. uni.showLoading({
  76. title: '上传中...'
  77. })
  78. // 这里替换为实际的上传接口
  79. uni.uploadFile({
  80. url: 'YOUR_UPLOAD_API_URL',
  81. filePath: file.path,
  82. name: 'file',
  83. success: (res) => {
  84. uni.showToast({
  85. title: '上传成功',
  86. icon: 'success'
  87. })
  88. },
  89. fail: (err) => {
  90. uni.showToast({
  91. title: '上传失败',
  92. icon: 'none'
  93. })
  94. },
  95. complete: () => {
  96. uni.hideLoading()
  97. }
  98. })
  99. }
  100. }
  101. }
  102. </script>
  103. <style lang="scss">
  104. .upload-container {
  105. padding: 30rpx;
  106. background-color: #f5f6fa;
  107. min-height: 100vh;
  108. .header-notice{
  109. display: flex;
  110. align-items: center;
  111. justify-content: center;
  112. text-align: center;
  113. font-size: 24rpx;
  114. color: #999;
  115. line-height: 1.5;
  116. }
  117. .illustration {
  118. text-align: center;
  119. margin: 40rpx auto;
  120. padding: 20rpx;
  121. border-radius: 12rpx;
  122. image {
  123. width: 650rpx;
  124. height: 550rpx;
  125. }
  126. }
  127. .upload-btn {
  128. width: 90%;
  129. height: 88rpx;
  130. line-height: 88rpx;
  131. background-color: #2b4acb;
  132. color: #ffffff;
  133. border-radius: 8rpx;
  134. font-size: 32rpx;
  135. margin: 60rpx auto;
  136. text-align: center;
  137. &::after {
  138. border: none;
  139. }
  140. }
  141. .instructions {
  142. padding: 0 30rpx;
  143. .title {
  144. font-size: 28rpx;
  145. color: #333;
  146. margin-bottom: 30rpx;
  147. }
  148. .instruction-list {
  149. .instruction-item {
  150. font-size: 26rpx;
  151. color: #666;
  152. line-height: 44rpx;
  153. margin-bottom: 20rpx;
  154. }
  155. }
  156. .privacy-notice {
  157. margin-top: 40rpx;
  158. font-size: 24rpx;
  159. color: #999;
  160. line-height: 1.5;
  161. }
  162. }
  163. }
  164. </style>