tui-upload.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. Component({
  2. /**
  3. * 组件的属性列表
  4. */
  5. properties: {
  6. //初始化图片路径
  7. value: {
  8. type: Array,
  9. value: []
  10. },
  11. //禁用删除
  12. forbidDel: {
  13. type: Boolean,
  14. value: false
  15. },
  16. //禁用添加
  17. forbidAdd: {
  18. type: Boolean,
  19. value: false
  20. },
  21. //服务器地址
  22. serverUrl: {
  23. type: String,
  24. value: ""
  25. },
  26. //限制数
  27. limit: {
  28. type: Number,
  29. value: 9
  30. },
  31. //项目名,默认为 file
  32. fileKeyName: {
  33. type: String,
  34. value: "file"
  35. }
  36. },
  37. lifetimes: {
  38. ready: function() {
  39. let imgArr = [...this.data.value]
  40. let status = []
  41. for (let item of imgArr) {
  42. status.push("1")
  43. }
  44. this.setData({
  45. imageList: [...imgArr],
  46. statusArr: status
  47. })
  48. }
  49. },
  50. data: {
  51. //图片地址
  52. imageList: [],
  53. //上传状态:1-上传成功 2-上传中 3-上传失败
  54. statusArr: []
  55. },
  56. /**
  57. * 组件的方法列表
  58. */
  59. methods: {
  60. // 重新上传
  61. reUpLoad(e) {
  62. let index = Number(e.currentTarget.dataset.index)
  63. let value = `statusArr[${index}]`
  64. this.setData({
  65. [value]: "2"
  66. })
  67. this.change()
  68. this.uploadImage(index, this.data.imageList[index]).then(() => {
  69. this.change()
  70. }).catch(() => {
  71. this.change()
  72. })
  73. },
  74. change() {
  75. let status = ~this.data.statusArr.indexOf("2") ? 2 : 1
  76. if (status != 2 && ~this.data.statusArr.indexOf("3")) {
  77. // 上传失败
  78. status = 3
  79. }
  80. this.triggerEvent('complete', {
  81. status: status,
  82. imgArr: this.data.imageList
  83. })
  84. },
  85. chooseImage: function() {
  86. let _this = this;
  87. wx.chooseImage({
  88. count: _this.data.limit - _this.data.imageList.length,
  89. success: function(e) {
  90. let imageArr = [];
  91. let status = []
  92. for (let i = 0; i < e.tempFilePaths.length; i++) {
  93. let len = _this.data.imageList.length;
  94. if (len >= _this.data.limit) {
  95. wx.showToast({
  96. title: `最多可上传${_this.data.limit}张图片`,
  97. icon: "none"
  98. });
  99. break;
  100. }
  101. let path = e.tempFilePaths[i]
  102. imageArr.push(path)
  103. status.push("2")
  104. }
  105. _this.setData({
  106. imageList: _this.data.imageList.concat(imageArr),
  107. statusArr: _this.data.statusArr.concat(status)
  108. })
  109. _this.change()
  110. let start = _this.data.imageList.length - imageArr.length
  111. for (let j = 0; j < imageArr.length; j++) {
  112. let index = start + j
  113. //服务器地址
  114. if (_this.data.serverUrl) {
  115. _this.uploadImage(index, imageArr[j]).then(() => {
  116. _this.change()
  117. }).catch(() => {
  118. _this.change()
  119. })
  120. } else {
  121. //无服务器地址则直接返回成功
  122. let value = `statusArr[${index}]`
  123. _this.setData({
  124. [value]: "1"
  125. })
  126. _this.change()
  127. }
  128. }
  129. }
  130. })
  131. },
  132. uploadImage: function(index, url) {
  133. let _this = this;
  134. let status = `statusArr[${index}]`;
  135. return new Promise((resolve, reject) => {
  136. wx.uploadFile({
  137. url: this.data.serverUrl,
  138. name: this.data.fileKeyName,
  139. header: {
  140. //设置请求头
  141. },
  142. formData: {},
  143. filePath: url,
  144. success: function(res) {
  145. console.log(res)
  146. if (res.statusCode == 200) {
  147. //返回结果 此处需要按接口实际返回进行修改
  148. let d = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
  149. //判断code,以实际接口规范判断
  150. if (d.code % 100 === 0) {
  151. // 上传成功 d.url 为上传后图片地址,以实际接口返回为准
  152. if (d.url) {
  153. let value = `imageList[${index}]`
  154. _this.setData({
  155. [value]: d.url
  156. })
  157. }
  158. _this.setData({
  159. [status]: d.url ? "1" : "3"
  160. })
  161. } else {
  162. // 上传失败
  163. _this.setData({
  164. [status]: "3"
  165. })
  166. }
  167. resolve(index)
  168. } else {
  169. _this.setData({
  170. [status]: "3"
  171. })
  172. reject(index)
  173. }
  174. },
  175. fail: function(res) {
  176. _this.setData({
  177. [status]: "3"
  178. })
  179. reject(index)
  180. }
  181. })
  182. })
  183. },
  184. delImage: function(e) {
  185. let index = Number(e.currentTarget.dataset.index)
  186. let imgList = [...this.data.imageList]
  187. let status = [...this.data.statusArr]
  188. imgList.splice(index, 1)
  189. status.splice(index, 1)
  190. this.setData({
  191. imageList: imgList,
  192. statusArr: status
  193. })
  194. this.triggerEvent("remove", {
  195. index: index
  196. })
  197. this.change()
  198. },
  199. previewImage: function(e) {
  200. let index = Number(e.currentTarget.dataset.index)
  201. if (!this.data.imageList.length) return;
  202. wx.previewImage({
  203. current: this.data.imageList[index],
  204. loop: true,
  205. urls: this.data.imageList
  206. })
  207. }
  208. }
  209. })