uniapp多图片上传、预览,java后台接收

UniApp前台页面:

<template>
	<view class="feedback-title"><text>选择图片text>view>
		<view class="feedback-body feedback-uploader">
			<view class="uni-uploader">
				<view class="uni-uploader-head">
					<view class="uni-uploader-title">点击预览图片view>
					<view class="uni-uploader-info">{
    { imageList.length }}/5view>
				view>
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image, index) in imageList" :key="index">
							<view class="uni-uploader__file" style="position: relative;">
								<image class="uni-uploader__img" :src="image" @tap="previewImage(index)">image>
								<view class="close-view" @click="close(index)">xview>
							view>
						block>
						<view class="uni-uploader__input-box" v-show="imageList.length < 5">
							<view class="uni-uploader__input" @tap="chooseImg">view>
						view>
					view>
				view>
			view>
		view>
		<button type="default" class="feedback-submit" @tap="send">提交button>
	view>
template>

<script>
	export default {
      
		data() {
      
			return {
      
				imageList: [],
				sendDate: {
      
					score: 0,
					content: '',
					concat: '',
					num: 0
				},
				imgurl: [],
			};
		},
		onLoad() {
      
		},
		methods: {
      
			/**
			 * 关闭图片
			 * @param {Object} e
			 */
			close(e) {
      
				this.imageList.splice(e, 1);
			},
			/**
			 * 选择图片
			 */
			chooseImg() {
      
				//选择图片
				uni.chooseImage({
      
					sourceType: ['camera', 'album'],
					sizeType: 'compressed',
					count: 5 - this.imageList.length,
					success: res => {
      
						// console.log(res.tempFilePaths)
						// this.imageList = this.imageList.concat(res.tempFilePaths[0]);
						this.imageList = res.tempFilePaths;
						this.imgurl = this.imageList.map((value, index) => {
      
							return {
      
								name: 'images' + index,
								uri: value
							};
						});
						console.log(this.imgurl)
					}
				});
			},
			
			/**
			 * 预览图片
			 * @param {Object} index
			 */
			previewImage(index) {
      
				uni.previewImage({
      
					urls: this.imageList,
					current: this.imageList[index]
				});
			},

			/**
			 * 提交
			 */
			send() {
      
				this.sendDate.num = this.imgurl.length
				uni.uploadFile({
      
					url: 'http://localhost:8080/app/back/addBack', //仅为示例,非真实的接口地址
					files: this.imgurl,
					formData: this.sendDate,
					success: (res) => {
      
						if (typeof res.data === 'string') {
      
							res.data = JSON.parse(res.data);
						}
						if (res.data.code === 200) {
      
							uni.showModal({
      
								content: '提交成功',
								showCancel: false
							});
							this.imageList = [];
						} else {
      
							uni.showModal({
      
								content: '提交失败',
								showCancel: false
							});
						}
					}
				});
			}
		}
	};
script>

java后台Controller:

  @RequestMapping("/addBack")
    public FebsResponse addBack( MultipartRequest request, Integer num) {
     
      
        String url= "";
        //获取上传的图片
        List<MultipartFile> files = new ArrayList<>();
        if (num > 0) {
     
            for (int i = 0; i < num; i++) {
     
                files.add(request.getFile("images" + i));
            }
            for (MultipartFile file : files) {
     
                if (file != null && file.getSize() > 0) {
     
                    String basePath = "picture";
                    try {
     
                        url += aliOSSUpload(file, basePath)+"@";
                        System.out.println("url:" + url);
                    } catch (IOException e) {
     
                        e.printStackTrace();
                        return new FebsResponse().fail().message("图片上传失败!");
                    }
                }
            }
        }
        if (StringUtils.isNotBlank(url)){
     
            url = url.substring(0, url.length() -1);
        }
        
        return new R().success();
    }

你可能感兴趣的:(前端技术,vue,java,图片上传,uniapp)