u-upload.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559
  1. <template>
  2. <view class="u-upload" :style="[$u.addStyle(customStyle)]">
  3. <view class="u-upload__wrap" >
  4. <template v-if="previewImage">
  5. <view
  6. class="u-upload__wrap__preview"
  7. v-for="(item, index) in lists"
  8. :key="index"
  9. >
  10. <image
  11. v-if="item.isImage || (item.type && item.type === 'image')"
  12. :src="item.thumb || item.url"
  13. :mode="imageMode"
  14. class="u-upload__wrap__preview__image"
  15. @tap="onPreviewImage(item)"
  16. :style="[{
  17. width: $u.addUnit(width),
  18. height: $u.addUnit(height)
  19. }]"
  20. />
  21. <view
  22. v-else
  23. class="u-upload__wrap__preview__other"
  24. >
  25. <u-icon
  26. color="#80CBF9"
  27. size="26"
  28. :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'folder'"
  29. ></u-icon>
  30. <text class="u-upload__wrap__preview__other__text">{{item.isVideo || (item.type && item.type === 'video') ? '视频' : '文件'}}</text>
  31. </view>
  32. <view
  33. class="u-upload__status"
  34. v-if="item.status === 'uploading' || item.status === 'failed'"
  35. >
  36. <view class="u-upload__status__icon">
  37. <u-icon
  38. v-if="item.status === 'failed'"
  39. name="close-circle"
  40. color="#ffffff"
  41. size="25"
  42. />
  43. <u-loading-icon
  44. size="22"
  45. mode="circle"
  46. color="#ffffff"
  47. v-else
  48. />
  49. </view>
  50. <text
  51. v-if="item.message"
  52. class="u-upload__status__message"
  53. >{{ item.message }}</text>
  54. </view>
  55. <view
  56. class="u-upload__deletable"
  57. v-if="item.status !== 'uploading' && (deletable || item.deletable)"
  58. @tap.stop="deleteItem(index)"
  59. >
  60. <view class="u-upload__deletable__icon">
  61. <u-icon
  62. name="close"
  63. color="#ffffff"
  64. size="10"
  65. ></u-icon>
  66. </view>
  67. </view>
  68. <view
  69. class="u-upload__success"
  70. v-if="item.status === 'success'"
  71. >
  72. <!-- #ifdef APP-NVUE -->
  73. <image
  74. :src="successIcon"
  75. class="u-upload__success__icon"
  76. ></image>
  77. <!-- #endif -->
  78. <!-- #ifndef APP-NVUE -->
  79. <view class="u-upload__success__icon">
  80. <u-icon
  81. name="checkmark"
  82. color="#ffffff"
  83. size="12"
  84. ></u-icon>
  85. </view>
  86. <!-- #endif -->
  87. </view>
  88. </view>
  89. </template>
  90. <template v-if="isInCount">
  91. <view
  92. v-if="$slots.default || $slots.$default"
  93. @tap="chooseFile"
  94. >
  95. <slot />
  96. </view>
  97. <view
  98. v-else
  99. class="u-upload__button"
  100. :hover-class="!disabled ? 'u-upload__button--hover' : ''"
  101. hover-stay-time="150"
  102. @tap="chooseFile"
  103. :class="[disabled && 'u-upload__button--disabled']"
  104. :style="[{
  105. width: $u.addUnit(width),
  106. height: $u.addUnit(height)
  107. }]"
  108. >
  109. <u-icon
  110. :name="uploadIcon"
  111. size="26"
  112. :color="uploadIconColor"
  113. ></u-icon>
  114. <text
  115. v-if="uploadText"
  116. class="u-upload__button__text"
  117. >{{ uploadText }}</text>
  118. </view>
  119. </template>
  120. </view>
  121. </view>
  122. </template>
  123. <script>
  124. import {
  125. chooseFile
  126. } from './utils';
  127. import mixin from './mixin.js';
  128. import props from './props.js';
  129. /**
  130. * upload 上传
  131. * @description 该组件用于上传图片场景
  132. * @tutorial https://uviewui.com/components/upload.html
  133. * @property {String} accept 接受的文件类型, 可选值为all media image file video (默认 'image' )
  134. * @property {String | Array} capture 图片或视频拾取模式,当accept为image类型时设置capture可选额外camera可以直接调起摄像头(默认 ['album', 'camera'] )
  135. * @property {Boolean} compressed 当accept为video时生效,是否压缩视频,默认为true(默认 true )
  136. * @property {String} camera 当accept为video时生效,可选值为back或front(默认 'back' )
  137. * @property {Number} maxDuration 当accept为video时生效,拍摄视频最长拍摄时间,单位秒(默认 60 )
  138. * @property {String} uploadIcon 上传区域的图标,只能内置图标(默认 'camera-fill' )
  139. * @property {String} uploadIconColor 上传区域的图标的字体颜色,只能内置图标(默认 #D3D4D6 )
  140. * @property {Boolean} useBeforeRead 是否开启文件读取前事件(默认 false )
  141. * @property {Boolean} previewFullImage 是否显示组件自带的图片预览功能(默认 true )
  142. * @property {String | Number} maxCount 最大上传数量(默认 52 )
  143. * @property {Boolean} disabled 是否启用(默认 false )
  144. * @property {String} imageMode 预览上传的图片时的裁剪模式,和image组件mode属性一致(默认 'aspectFill' )
  145. * @property {String} name 标识符,可以在回调函数的第二项参数中获取
  146. * @property {Array} sizeType 所选的图片的尺寸, 可选值为original compressed(默认 ['original', 'compressed'] )
  147. * @property {Boolean} multiple 是否开启图片多选,部分安卓机型不支持 (默认 false )
  148. * @property {Boolean} deletable 是否展示删除按钮(默认 true )
  149. * @property {String | Number} maxSize 文件大小限制,单位为byte (默认 Number.MAX_VALUE )
  150. * @property {Array} fileList 显示已上传的文件列表
  151. * @property {String} uploadText 上传区域的提示文字
  152. * @property {String | Number} width 内部预览图片区域和选择图片按钮的区域宽度(默认 80 )
  153. * @property {String | Number} height 内部预览图片区域和选择图片按钮的区域高度(默认 80 )
  154. * @property {Object} customStyle 组件的样式,对象形式
  155. * @event {Function} afterRead 读取后的处理函数
  156. * @event {Function} beforeRead 读取前的处理函数
  157. * @event {Function} oversize 文件超出大小限制
  158. * @event {Function} clickPreview 点击预览图片
  159. * @event {Function} delete 删除图片
  160. * @example <u-upload :action="action" :fileList="fileList" ></u-upload>
  161. */
  162. export default {
  163. name: "u-upload",
  164. mixins: [uni.$u.mpMixin, uni.$u.mixin, mixin,props],
  165. data() {
  166. return {
  167. // #ifdef APP-NVUE
  168. successIcon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAACP0lEQVRYCc3YXygsURwH8K/dpcWyG3LF5u/6/+dKVylSypuUl6uUPMifKMWL8oKEB1EUT1KeUPdR3uTNUsSLxb2udG/cbvInNuvf2rVnazZ/ZndmZ87snjM1Z+Z3zpzfp9+Z5mEAhlvjRtZgCKs+gnPAOcAkkMOR4jEHfItjDvgRxxSQD8cM0BuOCaAvXNCBQrigAsXgggYUiwsK0B9cwIH+4gIKlIILGFAqLiBAOTjFgXJxigJp4BQD0sIpAqSJow6kjSNAFTnRaHJwLenD6Mud52VQAcrBfTd2oyq+HtGaGGWAcnAVcXWoM3bCZrdi+ncPfaAcXE5UKVpdW/vitGPqqAtn98d0gXJwX7Qp6MmegUYVhvmTIezdmHlxJCjpHRTCFerLkRRu4k0aqdajN3sWOo0BK//msHa+xDuPC/oNFMKRhTtM4xjIX0SCNpXL4+7VIaHuyiWEp2L7ahWLf8fejfPdqPmC3mJicORZUp1CQzm+GiphvljGk+PBvWRbxii+xVTj5M6CiZ/tsDufvaXyxEUDxeLIyvu3m0iOyEFWVAkydcVYdyFrE9tQk9iMq6f/GNlvwt3LjQfh60LUrw9/cFyyMJUW/XkLSNMV4Mi6C5ML+ui4x5ClAX9sB9w0wV6wglJwJCv5fOxcr6EstgbGiEw4XcfUry4cWrcEUW8n+ARKxXEJHhw2WG43UKSvwI/TSZgvl7kh0b3XLZaLEy0QmMgLZAVH7J+ALOE+AVnDvQOyiPMAWcW5gSzjCPAV+78S5WE0GrQAAAAASUVORK5CYII=',
  169. // #endif
  170. lists: [],
  171. isInCount: true,
  172. }
  173. },
  174. watch: {
  175. // 监听文件列表的变化,重新整理内部数据
  176. fileList: {
  177. immediate: true,
  178. handler() {
  179. this.formatFileList()
  180. }
  181. },
  182. },
  183. methods: {
  184. formatFileList() {
  185. const {
  186. fileList = [], maxCount
  187. } = this;
  188. const lists = fileList.map((item) =>
  189. Object.assign(Object.assign({}, item), {
  190. // 如果item.url为本地选择的blob文件的话,无法判断其为video还是image,此处优先通过accept做判断处理
  191. isImage: this.accept === 'image' || uni.$u.test.image(item.url || item.thumb),
  192. isVideo: this.accept === 'video' || uni.$u.test.video(item.url || item.thumb),
  193. deletable: typeof(item.deletable) === 'boolean' ? item.deletable : this.deletable,
  194. })
  195. );
  196. this.lists = lists
  197. this.isInCount = lists.length < maxCount
  198. },
  199. chooseFile() {
  200. const {
  201. maxCount,
  202. multiple,
  203. lists,
  204. disabled
  205. } = this;
  206. if (disabled) return;
  207. // 如果用户传入的是字符串,需要格式化成数组
  208. let capture;
  209. try {
  210. capture = uni.$u.test.array(this.capture) ? this.capture : this.capture.split(',');
  211. }catch(e) {
  212. capture = [];
  213. }
  214. chooseFile(
  215. Object.assign({
  216. accept: this.accept,
  217. multiple: this.multiple,
  218. capture: capture,
  219. compressed: this.compressed,
  220. maxDuration: this.maxDuration,
  221. sizeType: this.sizeType,
  222. camera: this.camera,
  223. }, {
  224. maxCount: maxCount - lists.length,
  225. })
  226. )
  227. .then((res) => {
  228. this.onBeforeRead(multiple ? res : res[0]);
  229. })
  230. .catch((error) => {
  231. this.$emit('error', error);
  232. });
  233. },
  234. // 文件读取之前
  235. onBeforeRead(file) {
  236. const {
  237. beforeRead,
  238. useBeforeRead,
  239. } = this;
  240. let res = true
  241. // beforeRead是否为一个方法
  242. if (uni.$u.test.func(beforeRead)) {
  243. // 如果用户定义了此方法,则去执行此方法,并传入读取的文件回调
  244. res = beforeRead(file, this.getDetail());
  245. }
  246. if (useBeforeRead) {
  247. res = new Promise((resolve, reject) => {
  248. this.$emit(
  249. 'beforeRead',
  250. Object.assign(Object.assign({
  251. file
  252. }, this.getDetail()), {
  253. callback: (ok) => {
  254. ok ? resolve() : reject();
  255. },
  256. })
  257. );
  258. });
  259. }
  260. if (!res) {
  261. return;
  262. }
  263. if (uni.$u.test.promise(res)) {
  264. res.then((data) => this.onAfterRead(data || file));
  265. } else {
  266. this.onAfterRead(file);
  267. }
  268. },
  269. getDetail(index) {
  270. return {
  271. name: this.name,
  272. index: index == null ? this.fileList.length : index,
  273. };
  274. },
  275. onAfterRead(file) {
  276. const {
  277. maxSize,
  278. afterRead
  279. } = this;
  280. const oversize = Array.isArray(file) ?
  281. file.some((item) => item.size > maxSize) :
  282. file.size > maxSize;
  283. if (oversize) {
  284. this.$emit('oversize', Object.assign({
  285. file
  286. }, this.getDetail()));
  287. return;
  288. }
  289. if (typeof afterRead === 'function') {
  290. afterRead(file, this.getDetail());
  291. }
  292. this.$emit('afterRead', Object.assign({
  293. file
  294. }, this.getDetail()));
  295. },
  296. deleteItem(index) {
  297. this.$emit(
  298. 'delete',
  299. Object.assign(Object.assign({}, this.getDetail(index)), {
  300. file: this.fileList[index],
  301. })
  302. );
  303. },
  304. // 预览图片
  305. onPreviewImage(item) {
  306. if (!item.isImage || !this.previewFullImage) return
  307. uni.previewImage({
  308. // 先filter找出为图片的item,再返回filter结果中的图片url
  309. urls: this.lists.filter((item) => this.accept === 'image' || uni.$u.test.image(item.url || item.thumb)).map((item) => item.url || item.thumb),
  310. current: item.url || item.thumb,
  311. fail() {
  312. uni.$u.toast('预览图片失败')
  313. },
  314. });
  315. },
  316. onPreviewVideo(event) {
  317. if (!this.data.previewFullImage) return;
  318. const {
  319. index
  320. } = event.currentTarget.dataset;
  321. const {
  322. lists
  323. } = this.data;
  324. wx.previewMedia({
  325. sources: lists
  326. .filter((item) => isVideoFile(item))
  327. .map((item) =>
  328. Object.assign(Object.assign({}, item), {
  329. type: 'video'
  330. })
  331. ),
  332. current: index,
  333. fail() {
  334. uni.$u.toast('预览视频失败')
  335. },
  336. });
  337. },
  338. onClickPreview(event) {
  339. const {
  340. index
  341. } = event.currentTarget.dataset;
  342. const item = this.data.lists[index];
  343. this.$emit(
  344. 'clickPreview',
  345. Object.assign(Object.assign({}, item), this.getDetail(index))
  346. );
  347. }
  348. }
  349. }
  350. </script>
  351. <style lang="scss" scoped>
  352. @import '../../libs/css/components.scss';
  353. $u-upload-preview-border-radius: 2px !default;
  354. $u-upload-preview-margin: 0 8px 8px 0 !default;
  355. $u-upload-image-width:80px !default;
  356. $u-upload-image-height:$u-upload-image-width;
  357. $u-upload-other-bgColor: rgb(242, 242, 242) !default;
  358. $u-upload-other-flex:1 !default;
  359. $u-upload-text-font-size:11px !default;
  360. $u-upload-text-color:$u-tips-color !default;
  361. $u-upload-text-margin-top:2px !default;
  362. $u-upload-deletable-right:0 !default;
  363. $u-upload-deletable-top:0 !default;
  364. $u-upload-deletable-bgColor:rgb(55, 55, 55) !default;
  365. $u-upload-deletable-height:14px !default;
  366. $u-upload-deletable-width:$u-upload-deletable-height;
  367. $u-upload-deletable-boder-bottom-left-radius:100px !default;
  368. $u-upload-deletable-zIndex:3 !default;
  369. $u-upload-success-bottom:0 !default;
  370. $u-upload-success-right:0 !default;
  371. $u-upload-success-border-style:solid !default;
  372. $u-upload-success-border-top-color:transparent !default;
  373. $u-upload-success-border-left-color:transparent !default;
  374. $u-upload-success-border-bottom-color: $u-success !default;
  375. $u-upload-success-border-right-color:$u-upload-success-border-bottom-color;
  376. $u-upload-success-border-width:9px !default;
  377. $u-upload-icon-top:0px !default;
  378. $u-upload-icon-right:0px !default;
  379. $u-upload-icon-h5-top:1px !default;
  380. $u-upload-icon-h5-right:0 !default;
  381. $u-upload-icon-width:16px !default;
  382. $u-upload-icon-height:$u-upload-icon-width;
  383. $u-upload-success-icon-bottom:-10px !default;
  384. $u-upload-success-icon-right:-10px !default;
  385. $u-upload-status-right:0 !default;
  386. $u-upload-status-left:0 !default;
  387. $u-upload-status-bottom:0 !default;
  388. $u-upload-status-top:0 !default;
  389. $u-upload-status-bgColor:rgba(0, 0, 0, 0.5) !default;
  390. $u-upload-status-icon-Zindex:1 !default;
  391. $u-upload-message-font-size:12px !default;
  392. $u-upload-message-color:#FFFFFF !default;
  393. $u-upload-message-margin-top:5px !default;
  394. $u-upload-button-width:80px !default;
  395. $u-upload-button-height:$u-upload-button-width;
  396. $u-upload-button-bgColor:rgb(244, 245, 247) !default;
  397. $u-upload-button-border-radius:2px !default;
  398. $u-upload-botton-margin: 0 8px 8px 0 !default;
  399. $u-upload-text-font-size:11px !default;
  400. $u-upload-text-color:$u-tips-color !default;
  401. $u-upload-text-margin-top: 2px !default;
  402. $u-upload-hover-bgColor:rgb(230, 231, 233) !default;
  403. $u-upload-disabled-opacity:.5 !default;
  404. .u-upload {
  405. @include flex(column);
  406. flex: 1;
  407. &__wrap {
  408. @include flex;
  409. flex-wrap: wrap;
  410. flex: 1;
  411. &__preview {
  412. border-radius: $u-upload-preview-border-radius;
  413. margin: $u-upload-preview-margin;
  414. position: relative;
  415. overflow: hidden;
  416. @include flex;
  417. &__image {
  418. width: $u-upload-image-width;
  419. height: $u-upload-image-height;
  420. }
  421. &__other {
  422. width: $u-upload-image-width;
  423. height: $u-upload-image-height;
  424. background-color: $u-upload-other-bgColor;
  425. flex: $u-upload-other-flex;
  426. @include flex(column);
  427. justify-content: center;
  428. align-items: center;
  429. &__text {
  430. font-size: $u-upload-text-font-size;
  431. color: $u-upload-text-color;
  432. margin-top: $u-upload-text-margin-top;
  433. }
  434. }
  435. }
  436. }
  437. &__deletable {
  438. position: absolute;
  439. top: $u-upload-deletable-top;
  440. right: $u-upload-deletable-right;
  441. background-color: $u-upload-deletable-bgColor;
  442. height: $u-upload-deletable-height;
  443. width: $u-upload-deletable-width;
  444. @include flex;
  445. border-bottom-left-radius: $u-upload-deletable-boder-bottom-left-radius;
  446. align-items: center;
  447. justify-content: center;
  448. z-index: $u-upload-deletable-zIndex;
  449. &__icon {
  450. position: absolute;
  451. transform: scale(0.7);
  452. top: $u-upload-icon-top;
  453. right: $u-upload-icon-right;
  454. /* #ifdef H5 */
  455. top: $u-upload-icon-h5-top;
  456. right: $u-upload-icon-h5-right;
  457. /* #endif */
  458. }
  459. }
  460. &__success {
  461. position: absolute;
  462. bottom: $u-upload-success-bottom;
  463. right: $u-upload-success-right;
  464. @include flex;
  465. // 由于weex(nvue)为阿里巴巴的KPI(部门业绩考核)的laji产物,不支持css绘制三角形
  466. // 所以在nvue下使用图片,非nvue下使用css实现
  467. /* #ifndef APP-NVUE */
  468. border-style: $u-upload-success-border-style;
  469. border-top-color: $u-upload-success-border-top-color;
  470. border-left-color: $u-upload-success-border-left-color;
  471. border-bottom-color: $u-upload-success-border-bottom-color;
  472. border-right-color: $u-upload-success-border-right-color;
  473. border-width: $u-upload-success-border-width;
  474. align-items: center;
  475. justify-content: center;
  476. /* #endif */
  477. &__icon {
  478. /* #ifndef APP-NVUE */
  479. position: absolute;
  480. transform: scale(0.7);
  481. bottom: $u-upload-success-icon-bottom;
  482. right: $u-upload-success-icon-right;
  483. /* #endif */
  484. /* #ifdef APP-NVUE */
  485. width: $u-upload-icon-width;
  486. height: $u-upload-icon-height;
  487. /* #endif */
  488. }
  489. }
  490. &__status {
  491. position: absolute;
  492. top: $u-upload-status-top;
  493. bottom: $u-upload-status-bottom;
  494. left: $u-upload-status-left;
  495. right: $u-upload-status-right;
  496. background-color: $u-upload-status-bgColor;
  497. @include flex(column);
  498. align-items: center;
  499. justify-content: center;
  500. &__icon {
  501. position: relative;
  502. z-index: $u-upload-status-icon-Zindex;
  503. }
  504. &__message {
  505. font-size: $u-upload-message-font-size;
  506. color: $u-upload-message-color;
  507. margin-top: $u-upload-message-margin-top;
  508. }
  509. }
  510. &__button {
  511. @include flex(column);
  512. align-items: center;
  513. justify-content: center;
  514. width: $u-upload-button-width;
  515. height: $u-upload-button-height;
  516. background-color: $u-upload-button-bgColor;
  517. border-radius: $u-upload-button-border-radius;
  518. margin: $u-upload-botton-margin;
  519. /* #ifndef APP-NVUE */
  520. box-sizing: border-box;
  521. /* #endif */
  522. &__text {
  523. font-size: $u-upload-text-font-size;
  524. color: $u-upload-text-color;
  525. margin-top: $u-upload-text-margin-top;
  526. }
  527. &--hover {
  528. background-color: $u-upload-hover-bgColor;
  529. }
  530. &--disabled {
  531. opacity: $u-upload-disabled-opacity;
  532. }
  533. }
  534. }
  535. </style>