| 提交 | 用户 | age | ||
| 3dd7c0 | 1 | type file = { |
| S | 2 | file: string, |
| 3 | url: string | |
| 4 | } | |
| 5 | type Images = 'coverImage'|'images'; | |
| 6 | // const app = getApp<IAppOption>(); | |
| 7 | Component({ | |
| 8 | /** | |
| 9 | * 组件的属性列表 | |
| 10 | */ | |
| 11 | options: { | |
| 12 | addGlobalClass:true, | |
| 13 | multipleSlots: true // 在组件定义时的选项中启用多slot支持 | |
| 14 | }, | |
| 15 | properties: { | |
| 16 | url:{ | |
| 17 | type: String, | |
| 18 | value: "" | |
| 19 | }, | |
| 282d69 | 20 | fileDeleteUrl:{ |
| S | 21 | type: String, |
| 22 | value: "" | |
| 23 | }, | |
| 24 | description:{ | |
| 25 | type: String, | |
| 26 | value: "建议尺寸:500x500像素，72分辨率" | |
| 27 | }, | |
| d38be7 | 28 | hasSlot:{ |
| S | 29 | type:Boolean, |
| 30 | value: false | |
| 31 | }, | |
| 3dd7c0 | 32 | multiple:{ |
| S | 33 | type:Boolean, |
| 34 | value: false | |
| 27d5ae | 35 | }, |
| S | 36 | imgList:{ |
| 37 | type:Array, | |
| 38 | value: [] | |
| f9ad6c | 39 | }, |
| S | 40 | isMustUpload:{ |
| 41 | type:Boolean, | |
| 42 | value: true | |
| 3dd7c0 | 43 | } |
| S | 44 | }, |
| 45 | ||
| 46 | /** | |
| 47 | * 组件的初始数据 | |
| 48 | */ | |
| 49 | data: { | |
| 50 | imgList: <any>[], | |
| 51 | coverImage:'', | |
| 52 | images:'' | |
| 53 | }, | |
| 54 | lifetimes:{ | |
| 27d5ae | 55 | ready(){ |
| S | 56 | console.log(this.data.imgList); |
| 57 | ||
| 58 | } | |
| 59 | }, | |
| 60 | observers: { | |
| 61 | 'imgList': function(val) { | |
| 62 | console.log('监听图片列表imgList',val,this.data.imgList) | |
| 63 | if (val.length>0) { | |
| 64 | if (this.data.multiple){ | |
| 65 | this.getImgUnid('images'); | |
| 66 | } else { | |
| 67 | this.getImgUnid('coverImage'); | |
| 68 | } | |
| 69 | } | |
| 70 | ||
| 71 | } | |
| 3dd7c0 | 72 | }, |
| S | 73 | /** |
| 74 | * 组件的方法列表 | |
| 75 | */ | |
| 76 | methods: { | |
| 77 | async uploadSingleFile(event:any) { | |
| 78 | const { file } = event.detail; | |
| 79 | console.log(event,file); | |
| 80 | // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式 | |
| 81 | let [err,result] = await this.uploadFile({ | |
| 82 | file, | |
| 83 | url: this.data.url, | |
| 84 | formData:{ | |
| 85 | // isCoverImage:true, | |
| 86 | // formid:710802 | |
| 87 | } | |
| 88 | }); | |
| 89 | if (err){ | |
| 90 | console.log(err); | |
| 91 | return; | |
| 92 | } | |
| 93 | console.log(result); | |
| 94 | let imgList = this.data.imgList; | |
| 95 | imgList.push({ ...result }); | |
| 96 | this.setData({ imgList }); | |
| 97 | console.log('单张上传后imgList。。。',imgList); | |
| 98 | this.getImgUnid('coverImage'); | |
| 99 | // this.triggerEvent('getCoverImage',{ | |
| 100 | // imgList | |
| 101 | // }) | |
| 102 | ||
| 103 | }, | |
| 104 | async uploadMultipleFile(event:any) { | |
| 105 | const { file } = event.detail; | |
| 106 | console.log(event,file); | |
| 107 | let imgList = this.data.imgList; | |
| 108 | let unid = this.data.imgList[0]&&this.data.imgList[0].unid||''; | |
| 109 | let url = this.data.url; | |
| 110 | for (let i = 0; i < file.length; i++) { | |
| 111 | if (unid){ | |
| 112 | url+=`&unid=${unid}`; | |
| 113 | } | |
| 114 | console.log(url); | |
| 115 | // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式 | |
| 116 | let [err,result] = await this.uploadFile({ | |
| 117 | file:file[i], | |
| 118 | url, | |
| 119 | formData:{ | |
| 120 | // isCoverImage:true, | |
| 121 | // formid:710802 | |
| 122 | } | |
| 123 | }); | |
| 124 | if (err){ | |
| 125 | console.log(err); | |
| 126 | return; | |
| 127 | } | |
| 128 | console.log(result); | |
| 129 | imgList.push({ ...result }); | |
| 130 | unid = result.unid; | |
| 131 | } | |
| 132 | ||
| 133 | this.setData({ imgList }); | |
| 134 | console.log('多张上传后imgList。。。',imgList); | |
| 135 | this.getImgUnid('images'); | |
| f9ad6c | 136 | if (this.data.isMustUpload){ |
| S | 137 | this.checkImages("images", "请至少上传一张图片") |
| 138 | } | |
| 139 | ||
| 3dd7c0 | 140 | // this.triggerEvent('getCoverImage',{ |
| S | 141 | // imgList |
| 142 | // }) | |
| 143 | ||
| 144 | }, | |
| 145 | async deleteFile(event:any){ | |
| 282d69 | 146 | let {imgList,fileDeleteUrl} = this.data; |
| 3dd7c0 | 147 | let {index} = event.detail; |
| S | 148 | console.log(index,'dd'); |
| 149 | let [err,result] = await wx.$utils.to( | |
| 150 | wx.$http.request({ | |
| 282d69 | 151 | url: fileDeleteUrl, |
| 3dd7c0 | 152 | data:{ |
| S | 153 | unid:imgList[index].unid, |
| 154 | seq:imgList[index].seq, | |
| 155 | } | |
| 156 | }) | |
| 157 | ); | |
| 158 | if (err){ | |
| 159 | console.log(err); | |
| 160 | return; | |
| 161 | } | |
| 162 | console.log(result); | |
| 163 | if (result.state === "success"){ | |
| 164 | imgList.splice(index, 1); | |
| 165 | this.setData({ | |
| 166 | imgList | |
| 167 | }) | |
| 168 | } | |
| 169 | console.log('删除后imgList。。。',imgList); | |
| 27d5ae | 170 | if (this.data.multiple){ |
| S | 171 | this.getImgUnid('images'); |
| 172 | } else { | |
| 173 | this.getImgUnid('coverImage'); | |
| 174 | } | |
| 3dd7c0 | 175 | }, |
| S | 176 | async uploadFile(param:any){ |
| 177 | let [err,result] = await wx.$utils.to( | |
| 178 | wx.$http.uploadFile({ | |
| 179 | url:param.url, | |
| 180 | formData:param.formData, | |
| 181 | filePath:param.file.url | |
| 182 | }) | |
| 183 | ) | |
| 184 | return [err,result]; | |
| 185 | }, | |
| 186 | ||
| 187 | getImgList(){ | |
| 188 | return this.data.imgList; | |
| 189 | }, | |
| 190 | // getSingleImgUnid(){ | |
| 191 | // let unid:string|boolean|undefined; | |
| 192 | // if (this.data.imgList[0]){ | |
| 193 | // unid = this.data.imgList[0].unid+';'+this.data.imgList[0].seq; | |
| 194 | // } else { | |
| 195 | // unid = undefined; | |
| 196 | // } | |
| 197 | // this.setData({ | |
| 198 | // coverImg:unid | |
| 199 | // }); | |
| 200 | // console.log('封面图unid',unid); | |
| 201 | // return unid; | |
| 202 | // }, | |
| 203 | getImgUnid(type:string){ | |
| 204 | let unid:string|boolean|undefined; | |
| 205 | if (!this.data.imgList[0]){ | |
| 206 | unid = undefined; | |
| 207 | this.setData({ | |
| 208 | [type]:unid | |
| 209 | }); | |
| 210 | console.log(type,'图unid',unid); | |
| 211 | return unid; | |
| 212 | } | |
| 213 | unid = this.data.imgList[0].unid+';'; | |
| 214 | let seq = this.data.imgList.reduce((total:string,current:any)=>{ | |
| 27d5ae | 215 | console.log('total:',total,'current.seq:',current.seq); |
| 3dd7c0 | 216 | return total+';'+current.seq |
| S | 217 | },' ') |
| 27d5ae | 218 | let res = unid+seq.replace(' ;','').replace(new RegExp(' ', 'gm'), '') |
| 3dd7c0 | 219 | this.setData({ |
| 27d5ae | 220 | [type]:res |
| 3dd7c0 | 221 | }); |
| 27d5ae | 222 | console.log(type,'图unid+seq',res); |
| S | 223 | return res; |
| 3dd7c0 | 224 | }, |
| S | 225 | checkImages(images:Images, msg:string) { |
| 226 | if (!this.data[images]) { | |
| 227 | this.setData({ | |
| 228 | [images + "Error"]: msg, | |
| 229 | }); | |
| 230 | return false; | |
| 231 | } | |
| 232 | this.setData({ | |
| 233 | [images + "Error"]: "", | |
| 234 | }); | |
| 235 | return true; | |
| 236 | // this.handleLiveTime() | |
| 237 | }, | |
| 238 | getCoverImageUnid(){ | |
| 239 | return this.data.coverImage; | |
| 240 | }, | |
| 241 | getImagesUnid(){ | |
| 242 | return this.data.images; | |
| f9ad6c | 243 | }, |
| S | 244 | clearImagesData(){ |
| 245 | this.setData({ | |
| 246 | imgList:[], | |
| 247 | images:'', | |
| 248 | coverImage:'' | |
| 249 | }) | |
| 3dd7c0 | 250 | } |
| S | 251 | // async deleteFile(param:any){ |
| 252 | // let [err,result] = await wx.$utils.to( | |
| 253 | // wx.$http.uploadFile({ | |
| 254 | // url:param.url, | |
| 255 | // formData:param.formData, | |
| 256 | // filePath:param.file.url | |
| 257 | // }) | |
| 258 | // ) | |
| 259 | // return [err,result]; | |
| 260 | // } | |
| 261 | } | |
| 262 | }) | |
