upload.nvue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础用法</text>
  5. <view class="u-demo-block__content">
  6. <view class="u-page__upload-item">
  7. <u-upload
  8. :fileList="fileList1"
  9. @afterRead="afterRead"
  10. @delete="deletePic"
  11. name="1"
  12. multiple
  13. :maxCount="10"
  14. ></u-upload>
  15. </view>
  16. </view>
  17. </view>
  18. <view class="u-demo-block">
  19. <text class="u-demo-block__title">上传视频</text>
  20. <view class="u-demo-block__content">
  21. <view class="u-page__upload-item">
  22. <u-upload
  23. :fileList="fileList2"
  24. @afterRead="afterRead"
  25. @delete="deletePic"
  26. name="2"
  27. multiple
  28. :maxCount="10"
  29. accept="video"
  30. ></u-upload>
  31. </view>
  32. </view>
  33. </view>
  34. <view class="u-demo-block">
  35. <text class="u-demo-block__title">文件预览</text>
  36. <view class="u-demo-block__content">
  37. <view class="u-page__upload-item">
  38. <u-upload
  39. :fileList="fileList3"
  40. @afterRead="afterRead"
  41. @delete="deletePic"
  42. name="3"
  43. multiple
  44. :maxCount="10"
  45. :previewFullImage="true"
  46. ></u-upload>
  47. </view>
  48. </view>
  49. </view>
  50. <view class="u-demo-block">
  51. <text class="u-demo-block__title">隐藏上传按钮</text>
  52. <view class="u-demo-block__content">
  53. <view class="u-page__upload-item">
  54. <u-upload
  55. :fileList="fileList4"
  56. @afterRead="afterRead"
  57. @delete="deletePic"
  58. name="4"
  59. multiple
  60. :maxCount="2"
  61. ></u-upload>
  62. </view>
  63. </view>
  64. </view>
  65. <view class="u-demo-block">
  66. <text class="u-demo-block__title">限制上传数量</text>
  67. <view class="u-demo-block__content">
  68. <view class="u-page__upload-item">
  69. <u-upload
  70. :fileList="fileList5"
  71. @afterRead="afterRead"
  72. @delete="deletePic"
  73. name="5"
  74. multiple
  75. :maxCount="3"
  76. ></u-upload>
  77. </view>
  78. </view>
  79. </view>
  80. <view class="u-demo-block">
  81. <text class="u-demo-block__title">自定义上传样式</text>
  82. <view class="u-demo-block__content">
  83. <view class="u-page__upload-item">
  84. <u-upload
  85. :fileList="fileList6"
  86. @afterRead="afterRead"
  87. @delete="deletePic"
  88. name="6"
  89. multiple
  90. :maxCount="1"
  91. width="250"
  92. height="150"
  93. >
  94. <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix" style="width: 250px;height: 150px;"></image>
  95. </u-upload>
  96. </view>
  97. </view>
  98. </view>
  99. </view>
  100. </template>
  101. <script>
  102. export default {
  103. data() {
  104. return {
  105. fileList1: [],
  106. fileList2: [],
  107. fileList3: [{
  108. url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
  109. }],
  110. fileList4: [{
  111. url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
  112. },
  113. {
  114. url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
  115. }
  116. ],
  117. fileList5: [],
  118. fileList6: [],
  119. fileList7: []
  120. }
  121. },
  122. onLoad() {
  123. },
  124. methods: {
  125. // 删除图片
  126. deletePic(event) {
  127. this[`fileList${event.name}`].splice(event.index, 1)
  128. },
  129. // 新增图片
  130. async afterRead(event) {
  131. // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
  132. let lists = [].concat(event.file)
  133. let fileListLen = this[`fileList${event.name}`].length
  134. lists.map((item) => {
  135. this[`fileList${event.name}`].push({
  136. ...item,
  137. status: 'uploading',
  138. message: '上传中'
  139. })
  140. })
  141. for (let i = 0; i < lists.length; i++) {
  142. const result = await this.uploadFilePromise(lists[i].url)
  143. let item = this[`fileList${event.name}`][fileListLen]
  144. this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
  145. status: 'success',
  146. message: '',
  147. url: result
  148. }))
  149. fileListLen++
  150. }
  151. },
  152. uploadFilePromise(url) {
  153. return new Promise((resolve, reject) => {
  154. let a = uni.uploadFile({
  155. url: 'http://www.example.com/upload', // 仅为示例,非真实的接口地址
  156. filePath: url,
  157. name: 'file',
  158. formData: {
  159. user: 'test'
  160. },
  161. success: (res) => {
  162. setTimeout(() => {
  163. resolve(res.data.data)
  164. }, 1000)
  165. }
  166. });
  167. })
  168. },
  169. },
  170. }
  171. </script>
  172. <style lang="scss">
  173. .u-page {
  174. &__upload-item{
  175. margin-top:5px;
  176. }
  177. }
  178. </style>