uniapp之上传图片组件封装(包含预览，删除，上传)事件

1. <template> 
2.     <view> 
3.         <view class="content_wrapper"> 
4.             <view class="image_wrapper" :key="indexs" v-for="(img, indexs) in showImageData"> 
5.                 <icon v-if="!disabled" @click.stop="deleteImage(indexs)" type="clear" size="18" class="deleteIcon"></icon> 
6.                 <image :style="style" @click="showImage(showImageData,indexs)" class="photo-img" :src="fileHeader+img[valueKey]"></image> 
7.             </view> 
8.             <view :style="style" v-if="!disabled " class="photo-img-wrapper" @click="handleselectFile"> 
9.                 <image class="add-img" src="#"></image> 
10.                 <view class="add-desc">上传图片</view> 
11.             </view> 
12.         </view> 
13.     </view> 
14. </template> 

js代码

1. <script> 
2.     export default {　　　　　//来自父组件的值 
3.         props: { 
4.             fileList:{ 
5.                 type: Array, 
6.                 default: () => [] 
7.             }, 
8.             value: { 
9.                 type: Array, 
10.                 default: () => [] 
11.             }, 
12.             style: { 
13.                 type: [Object, String], 
14.                 default: '' 
15.             }, 
16.             showAdd: { 
17.                 type: Boolean, 
18.                 default: () => true 
19.             }, 
20.             valueKey: { 
21.                 type: String, 
22.                 default: 'photo' 
23.             }, 
24.             disabled: { 
25.                 type: Boolean, 
26.                 default: false 
27.             } 
28.         }, 
29.         data() { 
30.             return { 
31.                 fileHeader: this.fileHeader, 
32.                 showImageData: JSON.parse(JSON.stringify(this.fileList)), 
33.             } 
34.         }, 
35.         watch: { 
36.             fileList: { 
37.                 handler() { 
38.                     this.showImageData = JSON.parse(JSON.stringify(this.fileList)) 
39.                 }, 
40.                 deep: true, 
41.                 immediate: true, 
42.  
43.             } 
44.         }, 
45.         methods: { 
46.             //选择图片 
47.             handleselectFile() { 
48.                 uni.hideKeyboard() 
49.                 this.choseImage(); 
50.             }, 
51.             choseImage() { 
52.                 // 任务详情上传图片 
53.                 uni.showActionSheet({ 
54.                     itemList: ['拍照', '相册'], 
55.                     success: res => { 
56.                         let index = res.tapIndex; 
57.                         if (index === 0) { 
58.                             //#ifdef MP-WEIXIN 
59.                             uni.authorize({ 
60.                                 scope: 'scope.camera', 
61.                                 success: () => { 
62.                                     uni.chooseImage({ 
63.                                         sourceType: ['camera'], 
64.                                         success: res => { 
65.                                             let tempFilePaths = res.tempFilePaths; 
66.                                             this.uploadFilesTask(tempFilePaths); 
67.  
68.                                         } 
69.                                     }); 
70.                                 } 
71.                             }); 
72.                             //#endif 
73.                             //#ifdef APP-PLUS || H5 
74.                             uni.chooseImage({ 
75.                                 sourceType: ['camera'], 
76.                                 success: res => { 
77.                                     let tempFilePaths = res.tempFilePaths; 
78.                                     this.uploadFilesTask(tempFilePaths); 
79.  
80.                                 } 
81.                             }); 
82.                             //#endif 
83.                         } else { 
84.                             uni.chooseImage({ 
85.                                 sourceType: ['album'], 
86.                                 success: res => { 
87.                                     let tempFilePaths = res.tempFilePaths; 
88.                                     this.uploadFilesTask(tempFilePaths); 
89.  
90.                                 } 
91.                             }); 
92.  
93.                         } 
94.                     } 
95.                 }); 
96.             }, 
97.             async uploadFilesTask(images) { 
98.                 uni.showLoading({ 
99.                     title: '上传中...' 
100.                 }) 
101.                 for (let i in images) { 
102.                     let uploadData = false; 
103.                     try { 
104.                         // 上传部分 
105.                         uploadData = await this.uploadImageReq(images[i]) 
106.                         if (uploadData !== false) { 
107.                             if (uploadData.code == this.ERR_CODE) { 
108.                                 let obj = {} 
109.                                 obj[this.valueKey] = uploadData.body 
110.                                 this.showImageData.push(obj)　　　　　　　　　　　　　　　　　　　 //子组件传递父组件，属性，值 
111.                                 this.$emit("imageChange", this.showImageData); 
112.                             } else { 
113.                                 uni.hideLoading() 
114.                                 break 
115.                                 uni.showToast({ 
116.                                     title: uploadData, 
117.                                     icon: 'none' 
118.                                 }) 
119.                             } 
120.  
121.                         } 
122.                     } catch (err) { 
123.                         console.log(err); 
124.                         return; 
125.                     } 
126.                 } 
127.                 uni.hideLoading(); 
128.  
129.             }, 
130.             uploadImageReq(file) { 
131.                 return new Promise((resolve, reject) => { 
132.                     uni.uploadFile({ 
133.                         url: '上传图片的服务器地址', 
134.                         filePath: file, 
135.                         name: 'file', 
136.                         formData: { 
137.                             Authorization: token信息 
138.                         }, 
139.                         success: result => { 
140.                             let res = JSON.parse(result.data) 
141.                             if (res.code == 200) { 
142.                                 resolve(res); 
143.                             } else { 
144.                                 reject('接口返回错误'); 
145.                             } 
146.                         }, 
147.                         fail: () => { 
148.                             reject('网络链接错误'); 
149.                         } 
150.                     }); 
151.                 }); 
152.             }, 
153.             //删除图片 
154.             deleteImage(index) { 
155.                 uni.showModal({ 
156.                     title: '提示', 
157.                     content: '确定删除?', 
158.                     success: (res) => { 
159.                         if (res.confirm) { 
160.                             this.showImageData.splice(index, 1); 
161.                             this.$emit('imageChange', this.showImageData) 
162.                         } else if (res.cancel) { 
163.                             console.log('用户点击取消'); 
164.                         } 
165.                     } 
166.                 }); 
167.  
168.             }, 
169.             // 预览 
170.             showImage(list, index) { 
171.                 const imageList = [] 
172.                 list.forEach(item => { 
173.                     imageList.push(item[this.valueKey]) 
174.                 }) 
175.                 uni.previewImage({ 
176.                     urls: imageList, 
177.                     current: index 
178.                 }) 
179.             }, 
180.         } 
181.  
182.  
183.     } 
184. </script> 

css样式

 

1. <style lang="scss" scoped> 
2.     .content_wrapper { 
3.  
4.         display: flex; 
5.         flex-wrap: wrap; 
6.         justify-content: flex-start; 
7.         align-items: center; 
8.  
9.  
10.         .image_wrapper { 
11.             margin-right: 20rpx; 
12.             position: relative; 
13.  
14.             .photo-img { 
15.                 // padding: 10upx; 
16.                 width: 150upx; 
17.                 height: 150upx; 
18.             } 
19.  
20.             .deleteIcon { 
21.                 position: absolute; 
22.                 z-index: 99; 
23.                 overflow: hidden; 
24.                 top: -10rpx; 
25.                 right: -10rpx; 
26.             } 
27.         } 
28.  
29.         .photo-img-wrapper { 
30.  
31.             width: 150upx; 
32.             height: 150upx; 
33.             background: rgba(0, 0, 0, 0.02); 
34.             border: 1upx solid rgba(0, 0, 0, 0.15); 
35.             box-sizing: border-box; 
36.             border-radius: 5px 5px 5px 5px; 
37.             display: flex; 
38.             justify-content: center; 
39.             align-items: center; 
40.             flex-wrap: wrap; 
41.             flex-direction: column; 
42.  
43.             .add-img { 
44.                 width: 68upx; 
45.                 height: 68upx; 
46.                 color: #0081ff; 
47.             } 
48.  
49.             .add-desc { 
50.  
51.                 color: rgba(0, 0, 0, 0.65); 
52.                 font-size: 28upx; 
53.                 font-family: PingFangSC-regular; 
54.             } 
55.  
56.         } 
57.  
58.     } 
59. </style>