photo.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template>
  2. <view>
  3. <view class="desc container">
  4. <uni-section :title="label" type="line">
  5. <view class="example-body">
  6. <uni-file-picker :auto-upload="false" :value="fileList" :limit="limit" :title="'最多选择'+ limit +'张图片'"
  7. @select="select" @delete="deletePhoto" :readonly="readonly"></uni-file-picker>
  8. </view>
  9. </uni-section>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. props: {
  16. value: [String, Object, Array],
  17. // 图片数量限制
  18. limit: {
  19. type: Number,
  20. default: 1,
  21. },
  22. label: {
  23. Type: String,
  24. default: ''
  25. },
  26. readonly: false
  27. },
  28. data() {
  29. return {
  30. fileList: []
  31. }
  32. },
  33. mounted() {
  34. if (this.value) {
  35. this.fileList = this.value
  36. }
  37. },
  38. methods: {
  39. // 获取上传状态
  40. select(e) {
  41. this.uploadFilePromise(e['tempFilePaths'][0]).then(res => {
  42. if (res.code === 200) {
  43. this.fileList.push({
  44. url: this.$BASE_URL + res.url,
  45. extname: res.extname,
  46. name: res.fileName
  47. })
  48. this.$emit("input", JSON.stringify(this.fileList))
  49. }
  50. })
  51. },
  52. deletePhoto(e) {
  53. const findex = this.fileList.map(f => f.url).indexOf(e.tempFilePath);
  54. if (findex > -1) {
  55. this.fileList.splice(findex, 1);
  56. this.$emit("input", JSON.stringify(this.fileList));
  57. }
  58. },
  59. uploadFilePromise(url) {
  60. return new Promise((resolve, reject) => {
  61. let a = uni.uploadFile({
  62. url: this.$BASE_URL + '/common/upload',
  63. filePath: url,
  64. name: 'file',
  65. header: {
  66. "Authorization": "Bearer " + uni.getStorageSync('token')
  67. },
  68. success: (res) => {
  69. // console.log(JSON.parse(res.data).url);
  70. setTimeout(() => {
  71. resolve(JSON.parse(res.data))
  72. }, 50)
  73. }
  74. });
  75. })
  76. }
  77. }
  78. }
  79. </script>
  80. <style>
  81. .desc {
  82. padding: 10rpx 15rpx 0 15rpx;
  83. color: #818181;
  84. font-size: 20rpx;
  85. }
  86. .example-body {
  87. padding: 10px;
  88. padding-top: 0;
  89. }
  90. .custom-image-box {
  91. /* #ifndef APP-NVUE */
  92. display: flex;
  93. /* #endif */
  94. flex-direction: row;
  95. justify-content: space-between;
  96. align-items: center;
  97. }
  98. .text {
  99. font-size: 14px;
  100. color: #333;
  101. }
  102. </style>