基于Java后端图片上传代码编写以及前端uniapp图片上传页面编写（效果已实现）

springBoot图片上传代码如下：

 1 package com.example.xunfei.controller;
 2 
 3 
 4 import com.example.xunfei.config.uploadImgUtil;
 5 import org.springframework.web.bind.annotation.CrossOrigin;
 6 import org.springframework.web.bind.annotation.RequestMapping;
 7 import org.springframework.web.bind.annotation.RestController;
 8 import org.springframework.web.multipart.MultipartFile;
 9 import org.springframework.web.multipart.MultipartHttpServletRequest;
10 
11 import javax.servlet.http.HttpServletRequest;
12 
13 @RestController
14 @RequestMapping("applet/customer/img")
15 @CrossOrigin
16 public class CustomerImgController {
17 
18 
19     private HttpServletRequest request;
20 
21     @RequestMapping("upload")
22     public  Object tt(HttpServletRequest request){
23         MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;
24         MultipartFile file = req.getFile("upload-images");
25         if(file != null){
26             String fName = uploadImgUtil.upload_Img(file);
27             return   "http://8.140.176.58/img/"+fName;
28         }else{
29             return "error";
30         }
31     }
32 }

View Code

调用图片工具类，实现上传（自己编写）使用springframework.web.multipart中的MultipartFile

 1 package com.example.xunfei.config;
 2 
 3 
 4 import org.springframework.web.multipart.MultipartFile;
 5 
 6 import java.io.File;
 7 import java.util.ArrayList;
 8 import java.util.Calendar;
 9 import java.util.List;
10 
11 public  class uploadImgUtil {
12 
13 
14     //商品图片上传多图片
15 
16 
17     private static String uploadFolder="c://images/";
18 
19 
20     //商品图片
21     public  static String   upload_Img(MultipartFile file) {
22 
23         if (file!=null){
24             List<String> imageType =new ArrayList<>();
25             imageType.add("jpg");
26             imageType.add("png");
27             imageType.add("jpeg");
28             String itemHz= file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1).toLowerCase();
29             System.out.println("----------------------"+file.getOriginalFilename());
30             //开始操作上传
31             return getResponseData(file);
32         }
33         else return "";
34     }
35 
36 
37     private static String getResponseData(MultipartFile file) {
38         String fName = "";
39         if(file!=null){
40             try {
41                 String itemHz= file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1).toLowerCase();
42                 //获取文件名称
43                 fName =getTime()+"."+itemHz;
44 
45                 String path = "";
46                 path= uploadFolder + "/" + fName;
47                 file.transferTo(new File(path));
48             } catch (Exception e) {
49                 System.out.println(e.getMessage());
50 
51             }
52         }
53         return fName;
54     }
55 
56     public synchronized static String getTime(){
57         Calendar now = Calendar.getInstance();
58 
59         return  now.get(Calendar.YEAR)+""+(now.get(Calendar.MONTH) + 1) + ""+now.get(Calendar.DAY_OF_MONTH)+""+ now.get(Calendar.HOUR_OF_DAY)
60                 +""+now.get(Calendar.MINUTE)+""+now.get(Calendar.SECOND)+now.getTimeInMillis();
61 
62     }
63 
64 
65 }

View Code

uniapp前端代码如下：使用插件，支持App安卓打包，H5，微信小程序。其他需要测试。

  1 <template>
  2     <view style="background-color: #FFC878;  100%;">
  3         <view>
  4             <view class="content-base-info1" style="padding-top: 30rpx;">
  5                 <view class="conten-zhong1" >
  6                     <view style="margin-top: 12rpx;  margin-left: 50upx; color: #585EB4; font-weight: 600;  100%;font-size: 34upx;">
  7                         相册PHOTO</view>
  8                     <view style="margin-left: 40rpx;">
  9                         <robby-image-upload style="float: left;" :value="imageData" :server-url="serverUrl"
 10                             :showUploadProgress="true" :limit="limitNumber" @delete="deleteImage" @add="addImage"
 11                             :enable-drag="enableDrag" :enable-del="enableDel" :enable-add="enableAdd">
 12                         </robby-image-upload>
 13                     </view>
 14                     
 15                 </view>
 16                 <!-- <view style=" 98%;margin-left: 1%;">
 17                     <button class="topbuts" @click="saveBut">保存</button>
 18                 </view> -->
 19             </view>
 20         </view>
 21     </view>
 22 </template>
 23 
 24 <script>
 25     import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
 26     export default {
 27    
 28         data() {
 29             return { 
 30                 enableDel: true,
 31                 enableAdd: true,
 32                 enableDrag: true,
 33                 limitNumber: 1,
 34                 imageData: [], 
 35                 serverUrl: 'http://8.140.176.58:8081/applet/customer/img/upload', 
 36             }
 37         },
 38         components: {
 39             robbyImageUpload,
 40         },
 41         methods: {
 42             //保存陪玩信息
 43             saveBut() {
 44                 var _thst = this;
 45                 var strimg = _thst.imageData[0]
 46                 uni.request({
 47                     method: 'POST',
 48                     data: { 
 49                         "photoAlbum": strimg.toString(),
 50                     },
 51                     dataType: 'json',
 52                     url: 'https://www.kk520.ltd/applet/customer/playWith/add',
 53                     success: (res) => {
 54                          console.log(res)
 55                     },
 56                 });
 57             }, 
 58             deleteImage: function(e) {
 59                 console.log(e)
 60             },
 61             addImage: function(e) {
 62                 this.imageData = e.allImages;
 63             },
 64         }
 65     }
 66 </script>
 67 
 68 <style>
 69     .conten-zhong {
 70         width: 98%;
 71         height: 920upx;
 72         background-color: #fff;
 73         border-radius: 18upx;
 74         margin-left: 1%;
 75         margin-top: 20upx;
 76         padding-top: 40upx;
 77     }
 78     .baseinfo-font {
 79         width: 98%;
 80         height: 80upx;
 81         font-weight: 600;
 82         background-color: #FFFFFF;
 83         text-align: center;
 84         margin-left: 1%;
 85         line-height: 80upx;
 86         font-weight: 600upx;
 87         margin-top: 20upx;
 88         border-radius: 20upx;
 89     }
 90     .content-base-info {
 91         width: 98%;
 92         margin-left: 1%;
 93         height: 1000upx;
 94     }
 95     .topbuts {
 96         width: 48%;
 97         margin-top: 30upx;
 98         float: right;
 99         background-color: #fff;
100         color: #000;
101     }
102     .conten-zhong1 {
103         width: 98%;
104         height: 360upx;
105         background-color: #fff;
106         border-radius: 18upx;
107         margin-left: 1%;
108         margin-top: 20upx;
109         padding-top: 60upx;
110     }
111     .content-base-info1 {
112         width: 98%;
113         margin-left: 1%;
114         height: 1000upx;
115     }
116 </style>

View Code

图片上传插件（使用的uniapp插件库，感谢该插件作者）

  1 <template>
  2     <view class="imageUploadContainer">
  3         <view class="imageUploadList">
  4             <view class="imageItem" v-bind:key="index" v-for="(path,index) in imageListData">
  5                 <image :src="path" :class="{'dragging':isDragging(index)}" draggable="true" @tap="previewImage" :data-index="index" @touchstart="start" @touchmove.stop.prevent="move" @touchend="stop"></image>
  6                 <view v-if="isShowDel" class="imageDel" @tap="deleteImage" :data-index="index">x</view>
  7             </view>
  8             <view v-if="isShowAdd" class="imageUpload" @tap="selectImage">+</view>
  9         </view>
 10         <image v-if="showMoveImage" class="moveImage" :style="{left:posMoveImageLeft, top:posMoveImageTop}" :src="moveImagePath"></image>
 11     </view>
 12 </template>
 13 
 14 <script>
 15     export default {
 16         name:'robby-image-upload',
 17         props: ['value','enableDel','enableAdd','enableDrag','serverUrl','formData','header', 'limit','fileKeyName','showUploadProgress','serverUrlDeleteImage'],
 18         data() {
 19             return {
 20                 imageBasePos:{
 21                     x0: -1,
 22                     y0: -1,
 23                     w:-1,
 24                     h:-1,
 25                 },
 26                 showMoveImage: false,
 27                 moveImagePath: '',
 28                 moveLeft: 0,
 29                 moveTop: 0,
 30                 deltaLeft: 0,
 31                 deltaTop: 0,
 32                 dragIndex: null,
 33                 targetImageIndex: null,
 34                 imageList: [],
 35                 isDestroyed: false
 36             }
 37         }, 
 38         mounted: function(){
 39             this.imageList = this.value
 40             
 41             if(this.showUploadProgress === false){
 42                 this.showUploadProgress = false
 43             }else{
 44                 this.showUploadProgress = true
 45             }
 46         },
 47         destroyed: function(){
 48             this.isDestroyed = true
 49         },
 50         computed:{
 51             imageListData: function(){
 52                 if(this.value){
 53                     return this.value
 54                 }
 55             },
 56             posMoveImageLeft: function(){ 
 57                 return this.moveLeft + 'px'
 58             },
 59             posMoveImageTop: function(){
 60                 return this.moveTop + 'px'
 61             },
 62             isShowDel: function(){
 63                 if(this.enableDel === false){
 64                     return false
 65                 }else{
 66                     return true
 67                 }
 68             },
 69             isShowAdd: function(){
 70                 if(this.enableAdd === false){
 71                     return false
 72                 }
 73                 
 74                 if(this.limit && this.imageList.length >= this.limit){
 75                     return false
 76                 }
 77                 
 78                 return true
 79             },
 80             isDragable: function(){
 81                 if(this.enableDrag === false){
 82                     return false
 83                 }else{
 84                     return true
 85                 }
 86             }
 87         },
 88         methods:{
 89             selectImage: function(){
 90                 var _self = this
 91                 if(!_self.imageList){
 92                     _self.imageList = []
 93                 } 
 94                 
 95                 uni.chooseImage({
 96                     count: _self.limit ? (_self.limit - _self.imageList.length) : 999,
 97                     success: function(e){
 98                         var imagePathArr = e.tempFilePaths
 99                         
100                         //如果设置了limit限制，在web上count参数无效，这里做判断控制选择的数量是否合要求
101                         //在非微信小程序里，虽然可以选多张，但选择的结果会被截掉
102                         //在app里，会自动做选择数量的限制
103                         if(_self.limit){
104                             var availableImageNumber = _self.limit - _self.imageList.length
105                             if(availableImageNumber < imagePathArr.length){
106                                 uni.showToast({
107                                     title: '图片总数限制为'+_self.limit+'张，当前还可以选'+availableImageNumber+'张',
108                                     icon:'none',
109                                     mask: false,
110                                     duration: 2000
111                                 });
112                                 return
113                             }
114                         }
115                         
116                         //检查服务器地址是否设置，设置即表示图片要上传到服务器
117                         if(_self.serverUrl){
118                             uni.showToast({
119                                 title: '上传进度：0/' + imagePathArr.length,
120                                 icon: 'none',
121                                 mask: false
122                             });
123                             
124                             var remoteIndexStart = _self.imageList.length - imagePathArr.length
125                             var promiseWorkList = []
126                             var keyname = (_self.fileKeyName ? _self.fileKeyName : 'upload-images')
127                             var completeImages = 0
128                             
129                             for(let i=0; i<imagePathArr.length;i++){
130                                 promiseWorkList.push(new Promise((resolve, reject)=>{
131                                     let remoteUrlIndex = remoteIndexStart + i
132                                     uni.uploadFile({
133                                         url:_self.serverUrl,
134                                         fileType: 'image',
135                                         header: _self.header,
136                                         formData:_self.formData,
137                                         filePath: imagePathArr[i], 
138                                         name: keyname,
139                                         success: function(res){
140                                             if(res.statusCode === 200){
141                                                 if(_self.isDestroyed){
142                                                     return
143                                                 }
144                                                 
145                                                 completeImages ++
146                                                 
147                                                 if(_self.showUploadProgress){
148                                                     uni.showToast({
149                                                         title: '上传进度：' + completeImages + '/' + imagePathArr.length,
150                                                         icon: 'none',
151                                                         mask: false,
152                                                         duration: 500
153                                                     });
154                                                 }
155                                                 console.log('success to upload image: ' + res.data)
156                                                 resolve(res.data)
157                                             }else{
158                                                 console.log('fail to upload image:'+res.data)
159                                                 reject('fail to upload image:' + remoteUrlIndex)
160                                             }
161                                         },
162                                         fail: function(res){
163                                             console.log('fail to upload image:'+res)
164                                             reject('fail to upload image:' + remoteUrlIndex)
165                                         }
166                                     })
167                                 }))
168                             }
169                             Promise.all(promiseWorkList).then((result)=>{
170                                 if(_self.isDestroyed){
171                                     return
172                                 }
173                                 
174                                 for(let i=0; i<result.length;i++){
175                                     _self.imageList.push(result[i])
176                                 }
177                                 
178                                 _self.$emit('add', {
179                                     currentImages: imagePathArr,
180                                     allImages: _self.imageList
181                                 })
182                                 _self.$emit('input', _self.imageList)
183                             })
184                         }else{
185                             for(let i=0; i<imagePathArr.length;i++){
186                                 _self.imageList.push(imagePathArr[i])
187                             }
188                             
189                             _self.$emit('add', {
190                                 currentImages: imagePathArr,
191                                 allImages: _self.imageList
192                             })
193                             _self.$emit('input', _self.imageList)
194                         }
195                     }
196                 })
197             },
198             deleteImage: function(e){
199                 var imageIndex = e.currentTarget.dataset.index
200                 var deletedImagePath = this.imageList[imageIndex]
201                 this.imageList.splice(imageIndex, 1) 
202                 
203                 //检查删除图片的服务器地址是否设置，如果设置则调用API，在服务器端删除该图片
204                 if(this.serverUrlDeleteImage){
205                     uni.request({
206                         url: this.serverUrlDeleteImage,
207                         method: 'GET',
208                         data: {
209                             imagePath: deletedImagePath
210                         },
211                         success: res => {
212                             console.log(res.data)
213                         }
214                     });
215                 }
216                 
217                 this.$emit('delete',{
218                     currentImage: deletedImagePath,
219                     allImages: this.imageList
220                 })
221                 this.$emit('input', this.imageList)
222             },
223             previewImage: function(e){
224                 var imageIndex = e.currentTarget.dataset.index
225                 uni.previewImage({
226                     current: this.imageList[imageIndex],
227                     indicator: "number",
228                     loop: "true",
229                     urls:this.imageList
230                 })
231             },
232             initImageBasePos: function(){
233                 let paddingRate = 0.024
234                 var _self = this
235                 //计算图片基准位置
236                 uni.getSystemInfo({
237                     success: function(obj) {
238                         let screenWidth = obj.screenWidth
239                         let leftPadding = Math.ceil(paddingRate * screenWidth)
240                         let imageWidth = Math.ceil((screenWidth - 2*leftPadding)/4)
241                         
242                         _self.imageBasePos.x0 = leftPadding
243                         _self.imageBasePos.w = imageWidth
244                         _self.imageBasePos.h = imageWidth
245                     }
246                 })
247             },
248             findOverlapImage: function(posX, posY){
249                 let rows = Math.floor((posX-this.imageBasePos.x0)/this.imageBasePos.w)
250                 let cols = Math.floor((posY-this.imageBasePos.y0)/this.imageBasePos.h)
251                 let indx = cols*4 + rows
252                 return indx
253             },
254             isDragging: function(indx){
255                 return this.dragIndex === indx
256             },
257             start: function(e){
258                 console.log(this.isDragable)
259                 if(!this.isDragable){
260                     return
261                 }
262                 this.dragIndex = e.currentTarget.dataset.index
263                 this.moveImagePath = this.imageList[this.dragIndex]
264                 this.showMoveImage = true
265                 
266                 //计算纵向图片基准位置
267                 if(this.imageBasePos.y0 === -1){
268                     this.initImageBasePos()
269                     
270                     let basePosY = Math.floor(this.dragIndex / 4) * this.imageBasePos.h
271                     let currentImageOffsetTop = e.currentTarget.offsetTop
272                     this.imageBasePos.y0 = currentImageOffsetTop - basePosY
273                 }
274                 
275                 //设置选中图片当前左上角的坐标
276                 this.moveLeft = e.target.offsetLeft
277                 this.moveTop = e.target.offsetTop
278             },
279             move: function(e){
280                 if(!this.isDragable){
281                     return
282                 }
283                 const touch = e.touches[0]
284                 this.targetImageIndex = this.findOverlapImage(touch.clientX, touch.clientY)
285                 
286                 //初始化deltaLeft/deltaTop
287                 if(this.deltaLeft === 0){
288                     this.deltaLeft = touch.clientX - this.moveLeft
289                     this.deltaTop = touch.clientY - this.moveTop 
290                 }
291                 
292                 //设置移动图片位置
293                 this.moveLeft = touch.clientX - this.deltaLeft
294                 this.moveTop = touch.clientY - this.deltaTop
295             },
296             stop: function(e){
297                 if(!this.isDragable){
298                     return
299                 }
300                 if(this.dragIndex !== null && this.targetImageIndex !== null){
301                     if(this.targetImageIndex<0){
302                         this.targetImageIndex = 0
303                     }
304                 
305                     if(this.targetImageIndex>=this.imageList.length){
306                         this.targetImageIndex = this.imageList.length-1
307                     }
308                     //交换图片
309                     if(this.dragIndex !== this.targetImageIndex){
310                         this.imageList[this.dragIndex] = this.imageList[this.targetImageIndex]
311                         this.imageList[this.targetImageIndex] = this.moveImagePath
312                     }
313                 }
314                 
315                 this.dragIndex = null
316                 this.targetImageIndex = null
317                 this.deltaLeft = 0
318                 this.deltaTop = 0
319                 this.showMoveImage = false
320                 
321                 this.$emit('input', this.imageList)
322             }
323         }
324     }
325 </script>
326 
327 <style>
328     .imageUploadContainer{
329         padding: 10upx 5upx;
330         margin: 10upx 5upx;
331     }
332     
333     .dragging{
334         transform: scale(1.2)
335     }
336     
337     .imageUploadList{
338         display: flex;
339         flex-wrap: wrap;
340     }
341     
342     .imageItem, .imageUpload{
343         width: 160upx;
344         height: 160upx;
345         margin: 10upx;
346     }
347     
348     .imageDel{
349         position: relative;
350         left: 120upx;
351         bottom: 165upx;
352         background-color: rgba(0,0,0,0.5);
353         width: 36upx;
354         text-align: center;
355         line-height: 35upx;
356         border-radius: 17upx;
357         color: white;
358         font-size: 30upx;
359         padding-bottom: 2upx;
360     }
361     
362     .imageItem image, .moveImage{
363         width: 160upx;
364         height: 160upx;
365         border-radius: 8upx;
366     }
367     
368     .imageUpload{
369         line-height: 130upx;
370         text-align: center;
371         font-size: 150upx;
372         color: #D9D9D9;
373         border: 1px solid #D9D9D9;
374         border-radius: 8upx;
375     }
376     
377     .moveImage{
378         position: absolute;
379     }
380 </style>

View Code

实现效果，如图：

上传成功如图：