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

简介: 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 }}/5</view>
        </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)">x</view>
              </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();
    }
目录
相关文章
|
2月前
|
Java
Java开发实现图片URL地址检验,如何编码?
【10月更文挑战第14天】Java开发实现图片URL地址检验,如何编码?
93 4
|
2月前
|
关系型数据库 MySQL Java
【IDEA】java后台操作mysql数据库驱动常见错误解决方案
【IDEA】java后台操作mysql数据库驱动常见错误解决方案
102 0
|
2月前
|
Java
Java开发实现图片地址检验,如果无法找到资源则使用默认图片,如何编码?
【10月更文挑战第14天】Java开发实现图片地址检验,如果无法找到资源则使用默认图片,如何编码?
69 2
|
2月前
|
算法 Java Linux
java制作海报二:java使用Graphics2D 在图片上合成另一个照片,并将照片切割成头像,头像切割成圆形方法详解
这篇文章介绍了如何使用Java的Graphics2D类在图片上合成另一个照片,并将照片切割成圆形头像的方法。
55 1
java制作海报二:java使用Graphics2D 在图片上合成另一个照片,并将照片切割成头像,头像切割成圆形方法详解
|
2月前
|
Java 数据安全/隐私保护
Java ffmpeg 实现视频加文字/图片水印功能
【10月更文挑战第22天】在 Java 中使用 FFmpeg 实现视频加文字或图片水印功能,需先安装 FFmpeg 并添加依赖(如 JavaCV)。通过构建 FFmpeg 命令行参数,使用 `drawtext` 滤镜添加文字水印,或使用 `overlay` 滤镜添加图片水印。示例代码展示了如何使用 JavaCV 实现文字水印。
154 1
|
2月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
26 1
|
2月前
|
算法 Java Linux
java制作海报四:java BufferedImage 转 InputStream 上传至OSS。png 图片合成到模板(另一个图片)上时,透明部分变成了黑色
这篇文章主要介绍了如何将Java中的BufferedImage对象转换为InputStream以上传至OSS,并解决了png图片合成时透明部分变黑的问题。
108 1
|
2月前
|
算法 搜索推荐 Java
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
这篇文章介绍了如何使用Java后端技术,结合Graphics2D和Echarts等工具,生成包含个性化信息和图表的海报,并提供了详细的代码实现和GitHub项目链接。
147 0
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
|
2月前
|
小程序 Java
小程序访问java后台失败解决方案
小程序访问java后台失败解决方案
54 2
|
2月前
|
小程序 JavaScript Java
小程序访问java后台
小程序访问java后台
30 1