No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

u-upload.vue 16 KiB

hace 2 años
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565
  1. <template>
  2. <view class="u-upload" v-if="!disabled">
  3. <view
  4. v-if="showUploadList"
  5. class="u-list-item u-preview-wrap"
  6. v-for="(item, index) in lists"
  7. :key="index"
  8. :style="{
  9. width: width + 'rpx',
  10. height: width + 'rpx'
  11. }"
  12. >
  13. <view
  14. v-if="deletable"
  15. class="u-delete-icon"
  16. @tap.stop="deleteItem(index)"
  17. :style="{
  18. background: delBgColor
  19. }"
  20. >
  21. <u-icon class="u-icon" :name="delIcon" size="20" :color="delColor"></u-icon>
  22. </view>
  23. <u-line-progress
  24. v-if="showProgress && item.progress > 0 && !item.error"
  25. :show-percent="false"
  26. height="16"
  27. class="u-progress"
  28. :percent="item.progress"
  29. ></u-line-progress>
  30. <view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
  31. <image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image" v-if="!item.isImage" :src="item.url || item.path" :mode="imageMode"></image>
  32. </view>
  33. <slot name="file" :file="lists"></slot>
  34. <view style="display: inline-block;" @tap="selectFile" v-if="maxCount > lists.length">
  35. <slot name="addBtn"></slot>
  36. <view
  37. v-if="!customBtn"
  38. class="u-list-item u-add-wrap"
  39. hover-class="u-add-wrap__hover"
  40. hover-stay-time="150"
  41. :style="{
  42. width: width + 'rpx',
  43. height: width + 'rpx'
  44. }"
  45. >
  46. <u-icon name="plus" class="u-add-btn" size="40"></u-icon>
  47. <view class="u-add-tips">{{ uploadText }}</view>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. /**
  54. * upload 图片上传
  55. * @description 该组件用于上传图片场景
  56. * @tutorial https://www.uviewui.com/components/upload.html
  57. * @property {String} action 服务器上传地址
  58. * @property {String Number} max-count 最大选择图片的数量(默认99)
  59. * @property {Boolean} custom-btn 如果需要自定义选择图片的按钮,设置为true(默认false)
  60. * @property {Boolean} show-progress 是否显示进度条(默认true)
  61. * @property {Boolean} disabled 是否启用(显示/移仓)组件(默认false)
  62. * @property {String} image-mode 预览图片等显示模式,可选值为uni的image的mode属性值(默认aspectFill)
  63. * @property {String} del-icon 右上角删除图标名称,只能为uView内置图标
  64. * @property {String} del-bg-color 右上角关闭按钮的背景颜色
  65. * @property {String} del-color 右上角关闭按钮图标的颜色
  66. * @property {Object} header 上传携带的头信息,对象形式
  67. * @property {Object} form-data 上传额外携带的参数
  68. * @property {String} name 上传文件的字段名,供后端获取使用(默认file)
  69. * @property {Array<String>} size-type original 原图,compressed 压缩图,默认二者都有(默认['original', 'compressed'])
  70. * @property {Array<String>} source-type 选择图片的来源,album-从相册选图,camera-使用相机,默认二者都有(默认['album', 'camera'])
  71. * @property {Boolean} preview-full-image 是否可以通过uni.previewImage预览已选择的图片(默认true)
  72. * @property {Boolean} multiple 是否开启图片多选,部分安卓机型不支持(默认true)
  73. * @property {Boolean} deletable 是否显示删除图片的按钮(默认true)
  74. * @property {String Number} max-size 选择单个文件的最大大小,单位B(byte),默认不限制(默认Number.MAX_VALUE)
  75. * @property {Array<Object>} file-list 默认显示的图片列表,数组元素为对象,必须提供url属性
  76. * @property {Boolean} upload-text 选择图片按钮的提示文字(默认“选择图片”)
  77. * @property {Boolean} auto-upload 选择完图片是否自动上传,见上方说明(默认true)
  78. * @property {Boolean} show-tips 特殊情况下是否自动提示toast,见上方说明(默认true)
  79. * @property {Boolean} show-upload-list 是否显示组件内部的图片预览(默认true)
  80. * @event {Function} on-oversize 图片大小超出最大允许大小
  81. * @event {Function} on-preview 全屏预览图片时触发
  82. * @event {Function} on-remove 移除图片时触发
  83. * @event {Function} on-success 图片上传成功时触发
  84. * @event {Function} on-change 图片上传后,无论成功或者失败都会触发
  85. * @event {Function} on-error 图片上传失败时触发
  86. * @event {Function} on-progress 图片上传过程中的进度变化过程触发
  87. * @event {Function} on-uploaded 所有图片上传完毕触发
  88. * @event {Function} on-choose-complete 每次选择图片后触发,只是让外部可以得知每次选择后,内部的文件列表
  89. * @example <u-upload :action="action" :file-list="fileList" ></u-upload>
  90. */
  91. export default {
  92. name: 'u-upload',
  93. props: {
  94. //是否显示组件自带的图片预览功能
  95. showUploadList: {
  96. type: Boolean,
  97. default: true
  98. },
  99. // 后端地址
  100. action: {
  101. type: String,
  102. default: ''
  103. },
  104. // 最大上传数量
  105. maxCount: {
  106. type: [String, Number],
  107. default: 52
  108. },
  109. // 是否显示进度条
  110. showProgress: {
  111. type: Boolean,
  112. default: true
  113. },
  114. // 是否启用
  115. disabled: {
  116. type: Boolean,
  117. default: false
  118. },
  119. // 预览上传的图片时的裁剪模式,和image组件mode属性一致
  120. imageMode: {
  121. type: String,
  122. default: 'aspectFill'
  123. },
  124. // 头部信息
  125. header: {
  126. type: Object,
  127. default() {
  128. return {};
  129. }
  130. },
  131. // 额外携带的参数
  132. formData: {
  133. type: Object,
  134. default() {
  135. return {};
  136. }
  137. },
  138. // 上传的文件字段名
  139. name: {
  140. type: String,
  141. default: 'file'
  142. },
  143. // 所选的图片的尺寸, 可选值为original compressed
  144. sizeType: {
  145. type: Array,
  146. default() {
  147. return ['original', 'compressed'];
  148. }
  149. },
  150. sourceType: {
  151. type: Array,
  152. default() {
  153. return ['album', 'camera'];
  154. }
  155. },
  156. // 是否在点击预览图后展示全屏图片预览
  157. previewFullImage: {
  158. type: Boolean,
  159. default: true
  160. },
  161. // 是否开启图片多选,部分安卓机型不支持
  162. multiple: {
  163. type: Boolean,
  164. default: true
  165. },
  166. // 是否展示删除按钮
  167. deletable: {
  168. type: Boolean,
  169. default: true
  170. },
  171. // 文件大小限制,单位为byte
  172. maxSize: {
  173. type: [String, Number],
  174. default: Number.MAX_VALUE
  175. },
  176. // 显示已上传的文件列表
  177. fileList: {
  178. type: Array,
  179. default() {
  180. return [];
  181. }
  182. },
  183. // 上传区域的提示文字
  184. uploadText: {
  185. type: String,
  186. default: '选择图片'
  187. },
  188. // 是否自动上传
  189. autoUpload: {
  190. type: Boolean,
  191. default: true
  192. },
  193. // 是否显示toast消息提示
  194. showTips: {
  195. type: Boolean,
  196. default: true
  197. },
  198. // 是否通过slot自定义传入选择图标的按钮
  199. customBtn: {
  200. type: Boolean,
  201. default: false
  202. },
  203. // 内部预览图片区域和选择图片按钮的区域宽度,高等于宽
  204. width: {
  205. type: [String, Number],
  206. default: 200
  207. },
  208. // 右上角关闭按钮的背景颜色
  209. delBgColor: {
  210. type: String,
  211. default: '#fa3534'
  212. },
  213. // 右上角关闭按钮的叉号图标的颜色
  214. delColor: {
  215. type: String,
  216. default: '#ffffff'
  217. },
  218. // 右上角删除图标名称,只能为uView内置图标
  219. delIcon: {
  220. type: String,
  221. default: 'close'
  222. },
  223. // 如果上传后的返回值为json字符串,是否自动转json
  224. toJson: {
  225. type: Boolean,
  226. default: true
  227. },
  228. // 上传前的钩子,每个文件上传前都会执行
  229. beforeUpload: {
  230. type: Function,
  231. default: null
  232. }
  233. },
  234. mounted() {},
  235. data() {
  236. return {
  237. lists: [],
  238. isInCount: true,
  239. uploading: false
  240. };
  241. },
  242. watch: {
  243. fileList: {
  244. immediate: true,
  245. handler(val) {
  246. val.map(value => {
  247. // 首先检查内部是否已经添加过这张图片,因为外部绑定了一个对象给fileList的话(对象引用),进行修改外部fileList
  248. // 时,会触发watch,导致重新把原来的图片再次添加到this.lists
  249. // 数组的some方法意思是,只要数组元素有任意一个元素条件符合,就返回true,而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
  250. let tmp = this.lists.some(val => {
  251. return val.url == value.url;
  252. })
  253. // 如果内部没有这个图片(tmp为false),则添加到内部
  254. !tmp && this.lists.push({ url: value.url, error: false, progress: 100 });
  255. });
  256. }
  257. },
  258. // 监听lists的变化,发出事件
  259. lists(n) {
  260. this.$emit('on-list-change', n);
  261. }
  262. },
  263. methods: {
  264. // 清除列表
  265. clear() {
  266. this.lists = [];
  267. },
  268. // 重新上传队列中上传失败的所有文件
  269. reUpload() {
  270. this.uploadFile();
  271. },
  272. // 选择图片
  273. selectFile() {
  274. if (this.disabled) return;
  275. const { name = '', maxCount, multiple, maxSize, sizeType, lists, camera, compressed, maxDuration, sourceType } = this;
  276. let chooseFile = null;
  277. const newMaxCount = maxCount - lists.length;
  278. // 设置为只选择图片的时候使用 chooseImage 来实现
  279. chooseFile = new Promise((resolve, reject) => {
  280. uni.chooseImage({
  281. count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
  282. sourceType: sourceType,
  283. sizeType,
  284. success: resolve,
  285. fail: reject
  286. });
  287. });
  288. chooseFile
  289. .then(res => {
  290. let file = null;
  291. let listOldLength = this.lists.length;
  292. res.tempFiles.map((val, index) => {
  293. // 如果是非多选,index大于等于1或者超出最大限制数量时,不处理
  294. if (!multiple && index >= 1) return;
  295. if (val.size > maxSize) {
  296. this.$emit('on-oversize', val, this.lists);
  297. this.showToast('超出允许的文件大小');
  298. } else {
  299. if (maxCount <= lists.length) {
  300. this.$emit('on-exceed', val, this.lists);
  301. this.showToast('超出最大允许的文件个数');
  302. return;
  303. }
  304. lists.push({
  305. url: val.path,
  306. progress: 0,
  307. error: false
  308. });
  309. }
  310. });
  311. // 每次图片选择完,抛出一个事件,并将当前内部选择的图片数组抛出去
  312. this.$emit('on-choose-complete', this.lists);
  313. if (this.autoUpload) this.uploadFile(listOldLength);
  314. })
  315. .catch(error => {
  316. // this.$emit('on-error', error);
  317. });
  318. },
  319. // 提示用户消息
  320. showToast(message, force = false) {
  321. if (this.showTips || force) {
  322. uni.showToast({
  323. title: message,
  324. icon: 'none'
  325. });
  326. }
  327. },
  328. // 该方法供用户通过ref调用,手动上传
  329. upload() {
  330. this.uploadFile();
  331. },
  332. // 对失败的图片重新上传
  333. retry(index) {
  334. this.lists[index].progress = 0;
  335. this.lists[index].error = false;
  336. this.lists[index].response = null;
  337. uni.showLoading({
  338. title: '重新上传'
  339. });
  340. this.uploadFile(index);
  341. },
  342. // 上传图片
  343. async uploadFile(index = 0) {
  344. if (this.disabled) return;
  345. if (this.uploading) return;
  346. // 全部上传完成
  347. if (index >= this.lists.length) {
  348. this.$emit('on-uploaded', this.lists);
  349. return;
  350. }
  351. // 检查上传地址
  352. if (!this.action) {
  353. this.showToast('请配置上传地址', true);
  354. return;
  355. }
  356. // 检查是否是已上传或者正在上传中
  357. if (this.lists[index].progress == 100) {
  358. if (this.autoUpload == false) this.uploadFile(index + 1);
  359. return;
  360. }
  361. // 执行before-upload钩子
  362. if(this.beforeUpload && typeof(this.beforeUpload) === 'function') {
  363. // 执行回调,同时传入索引和文件列表当作参数
  364. let beforeResponse = this.beforeUpload(index, this.lists);
  365. // 判断是否返回了promise
  366. if (!!beforeResponse && typeof beforeResponse.then === 'function') {
  367. await beforeResponse.then(res => {
  368. // promise返回成功,不进行动作,继续上传
  369. }).catch(err => {
  370. // 进入catch回调的话,继续下一张
  371. return this.uploadFile(index + 1);
  372. })
  373. } else if(beforeResponse === false) {
  374. // 如果返回false,继续下一张图片的上传
  375. return this.uploadFile(index + 1);
  376. }
  377. }
  378. this.lists[index].error = false;
  379. this.uploading = true;
  380. // 创建上传对象
  381. const task = uni.uploadFile({
  382. url: this.action,
  383. filePath: this.lists[index].url,
  384. name: this.name,
  385. formData: this.formData,
  386. header: this.header,
  387. success: res => {
  388. // 判断是否json字符串,将其转为json格式
  389. let data = this.toJson && this.$u.test.jsonString(res.data) ? JSON.parse(res.data) : res.data;
  390. if (![200, 201].includes(res.statusCode)) {
  391. this.uploadError(index, data);
  392. } else {
  393. // 上传成功
  394. this.lists[index].response = data;
  395. this.lists[index].progress = 100;
  396. this.lists[index].error = false;
  397. this.$emit('on-success', data, index, this.lists);
  398. }
  399. },
  400. fail: e => {
  401. this.uploadError(index, e);
  402. },
  403. complete: res => {
  404. uni.hideLoading();
  405. this.uploading = false;
  406. this.uploadFile(index + 1);
  407. this.$emit('on-change', res, index, this.lists);
  408. }
  409. });
  410. task.onProgressUpdate(res => {
  411. if (res.progress > 0) {
  412. this.lists[index].progress = res.progress;
  413. this.$emit('on-progress', res, index, this.lists);
  414. }
  415. });
  416. },
  417. // 上传失败
  418. uploadError(index, err) {
  419. this.lists[index].progress = 0;
  420. this.lists[index].error = true;
  421. this.lists[index].response = null;
  422. this.$emit('on-error', err, index, this.lists);
  423. this.showToast('上传失败,请重试');
  424. },
  425. // 删除一个图片
  426. deleteItem(index) {
  427. uni.showModal({
  428. title: '提示',
  429. content: '您确定要删除此项吗?',
  430. cancelColor:"#999999",
  431. success: res => {
  432. if (res.confirm) {
  433. if (this.lists[index].process < 100 && this.lists[index].process > 0) {
  434. typeof this.lists[index].uploadTask != 'undefined' && this.lists[index].uploadTask.abort();
  435. }
  436. this.lists.splice(index, 1);
  437. this.$forceUpdate();
  438. this.$emit('on-remove', index, this.lists);
  439. this.showToast('移除成功');
  440. }
  441. }
  442. });
  443. },
  444. // 用户通过ref手动的形式,移除一张图片
  445. remove(index) {
  446. // 判断索引的合法范围
  447. if (index >= 0 && index < this.lists.length) {
  448. this.lists.splice(index, 1);
  449. this.$emit('on-list-change', this.lists);
  450. }
  451. },
  452. // 预览图片
  453. doPreviewImage(url, index) {
  454. if (!this.previewFullImage) return;
  455. const images = this.lists.map(item => item.url || item.path);
  456. uni.previewImage({
  457. urls: images,
  458. current: url,
  459. success: () => {
  460. this.$emit('on-preview', url, this.lists);
  461. },
  462. fail: () => {
  463. uni.showToast({
  464. title: '预览图片失败',
  465. icon: 'none'
  466. });
  467. }
  468. });
  469. }
  470. }
  471. };
  472. </script>
  473. <style lang="scss" scoped>
  474. @import '../../libs/css/style.components.scss';
  475. .u-upload {
  476. display: flex;
  477. flex-wrap: wrap;
  478. align-items: center;
  479. }
  480. .u-list-item {
  481. width: 200rpx;
  482. height: 200rpx;
  483. overflow: hidden;
  484. margin: 10rpx;
  485. background: rgb(244, 245, 246);
  486. position: relative;
  487. border-radius: 10rpx;
  488. display: inline-flex;
  489. align-items: center;
  490. justify-content: center;
  491. }
  492. .u-preview-wrap {
  493. border: 1px solid rgb(235, 236, 238);
  494. }
  495. .u-add-wrap {
  496. flex-direction: column;
  497. color: $u-content-color;
  498. font-size: 28rpx;
  499. }
  500. .u-add-tips {
  501. margin-top: 20rpx;
  502. line-height: 40rpx;
  503. }
  504. .u-add-wrap__hover {
  505. background-color: rgb(235, 236, 238);
  506. }
  507. .u-preview-image {
  508. display: block;
  509. width: 100%;
  510. height: 100%;
  511. border-radius: 10rpx;
  512. }
  513. .u-delete-icon {
  514. position: absolute;
  515. top: 10rpx;
  516. right: 10rpx;
  517. z-index: 10;
  518. background-color: $u-type-error;
  519. border-radius: 100rpx;
  520. width: 44rpx;
  521. height: 44rpx;
  522. display: flex;
  523. align-items: center;
  524. justify-content: center;
  525. }
  526. .u-icon {
  527. display: flex;
  528. align-items: center;
  529. justify-content: center;
  530. }
  531. .u-progress {
  532. position: absolute;
  533. bottom: 10rpx;
  534. left: 8rpx;
  535. right: 8rpx;
  536. z-index: 9;
  537. width: auto;
  538. }
  539. .u-error-btn {
  540. color: #ffffff;
  541. background-color: $u-type-error;
  542. font-size: 20rpx;
  543. padding: 4px 0;
  544. text-align: center;
  545. position: absolute;
  546. bottom: 0;
  547. left: 0;
  548. right: 0;
  549. z-index: 9;
  550. line-height: 1;
  551. }
  552. </style>