index.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. <template>
  2. <view>
  3. <u-upload
  4. ref="uploadRef"
  5. name="Img"
  6. :multiple="true"
  7. :previewFullImage="true"
  8. :maxCount="maxCount"
  9. :fileList="fileListImg"
  10. :sizeType="['compressed']"
  11. :width="width"
  12. :height="height"
  13. :capture="capture"
  14. :uploadText="uploadText"
  15. @beforeRead="beforeRead"
  16. @afterRead="afterRead"
  17. @delete="deletePic"></u-upload>
  18. </view>
  19. </template>
  20. <script>
  21. /* https://uviewui.com/components/upload.html */
  22. import { isEmpty,isArray,isString } from 'lodash';
  23. import * as imageConversion from 'image-conversion'
  24. import { getToken } from '@/utils/auth'
  25. import { uploadUrl } from '@/api/common/system.js'
  26. import {server_url} from '@/utils/config.js'
  27. import {createWaterMark} from '@/utils/watermark'
  28. /**
  29. * blob转url临时访问地址
  30. * @param String blob 对象
  31. */
  32. function createObjectURL(blob){
  33. return URL.createObjectURL(blob);
  34. }
  35. export default {
  36. props: {
  37. value: {
  38. type: String,
  39. default: ''
  40. },
  41. maxCount: {
  42. type: String | Number,
  43. default: 6
  44. },
  45. sizeType: { //original 原图,compressed 压缩图,H5无效
  46. type: Array,
  47. default: () => ['compressed'],
  48. },
  49. //开启h5压缩
  50. h5Compressed: {
  51. type: Boolean,
  52. default: true
  53. },
  54. //0.01-1压缩质量 1-N 压缩大小
  55. h5CompressedSize: {
  56. type: Number,
  57. default: 0.8
  58. },
  59. width: {
  60. type: String | Number,
  61. default: 68,
  62. },
  63. height: {
  64. type: String | Number,
  65. default: 68,
  66. },
  67. capture: {
  68. type: String | Array,
  69. default: () => ['album', 'camera'],
  70. },
  71. uploadText: {
  72. type: String,
  73. default: '请上传图片'
  74. },
  75. querParams: {
  76. type: Object,
  77. default: () => {
  78. return {}
  79. }
  80. },
  81. //开启用户信息水印
  82. userInfoWaterMark: {
  83. type: Boolean,
  84. default: false
  85. },
  86. },
  87. data() {
  88. return {
  89. fileListImg: [],
  90. }
  91. },
  92. computed: {
  93. userName: function() {
  94. return this.$store.getters.name
  95. }
  96. },
  97. watch: {
  98. value: {
  99. immediate: true,
  100. deep: true,
  101. handler(newVal) {
  102. console.log(newVal,'newVal')
  103. let list = []
  104. if (isString(newVal) && !isEmpty(newVal)) {
  105. list = newVal.split(',').map((url) => {
  106. let thumb = this.$getImages(url)
  107. // console.log(thumb,'thumb--url')
  108. return {
  109. status: 'success',
  110. message: '上传成功',
  111. url: thumb,
  112. thumb: thumb,
  113. value: url,
  114. }
  115. })
  116. }
  117. this.fileListImg = list
  118. },
  119. },
  120. fileListImg: {
  121. immediate: false,
  122. deep: true,
  123. handler(newVal) {
  124. // console.log(newVal,'newVal-fileListImg')
  125. let newUrl = newVal.map(e => e.value).join(',')
  126. this.$emit('input',newUrl)
  127. this.$emit('confirm',newUrl)
  128. }
  129. }
  130. },
  131. methods: {
  132. // 删除图片
  133. deletePic(event) {
  134. this[`fileList${event.name}`].splice(event.index, 1)
  135. },
  136. // 读取后的处理函数
  137. async afterRead(event) {
  138. let time = this.dayjs().format('YYYY-MM-DD HH:mm:ss')
  139. let watermarks = [time,this.userName]
  140. // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
  141. let lists = [].concat(event.file)
  142. let fileListLen = this[`fileList${event.name}`].length
  143. lists.map((item) => {
  144. this[`fileList${event.name}`].push({
  145. ...item,
  146. status: 'uploading',
  147. message: '上传中'
  148. })
  149. })
  150. for (let i = 0; i < lists.length; i++) {
  151. // #ifdef H5
  152. if(this.h5Compressed) {
  153. //图片压缩
  154. if(lists[i].type == 'image') {
  155. let blob = await imageConversion.urltoBlob(lists[i].url)
  156. console.log(blob,'压缩前blobd对象')
  157. if(blob) {
  158. let res
  159. //压缩大小
  160. if (this.h5CompressedSize>1) {
  161. res = await imageConversion.compressAccurately(blob,this.h5CompressedSize)
  162. } else { //压缩质量
  163. res = await imageConversion.compress(blob,this.h5CompressedSize)
  164. }
  165. if(res) {
  166. console.log(res,'压缩后blob对象')
  167. let newBlobUrl = createObjectURL(res)
  168. lists[i].thumb = lists[i].url = newBlobUrl
  169. lists[i].size = res.size
  170. }
  171. }
  172. }
  173. }
  174. // #endif
  175. if(lists[i].type == 'image') {
  176. if(this.userInfoWaterMark) {
  177. lists[i].thumb = lists[i].url = await createWaterMark(lists[i].url,watermarks)
  178. }
  179. }
  180. const res = await this.uploadFilePromise(lists[i].url)
  181. let item = this[`fileList${event.name}`][fileListLen]
  182. if (res.code == 0) {
  183. this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
  184. status: 'success',
  185. message: '上传成功',
  186. value: res.fileName,
  187. }))
  188. fileListLen++
  189. } else {
  190. this[`fileList${event.name}`].splice(fileListLen, 1,)
  191. }
  192. }
  193. },
  194. uploadFilePromise(url) {
  195. return new Promise((resolve, reject) => {
  196. // console.log(url,'urlurl')
  197. let a = uni.uploadFile({
  198. url: uploadUrl, // 仅为示例,非真实的接口地址
  199. header: {
  200. 'Authorization': 'Bearer ' + getToken()
  201. },
  202. filePath: url,
  203. name: 'file',
  204. formData: {
  205. ...this.querParams,
  206. },
  207. success: (res) => {
  208. let data = JSON.parse(res.data)
  209. resolve(data)
  210. },
  211. fail: (err) => {
  212. resolve({
  213. code: -1,
  214. msg: '上传失败'
  215. })
  216. }
  217. });
  218. })
  219. },
  220. }
  221. }
  222. </script>
  223. <style lang="scss" scoped>
  224. </style>