uniapp 多图片上传

记上一篇 单图片上传之后  趁热打铁 写了个多图片上传。

 

 

 

@import "../../static/css/upload-imgs.css";    文件内容如下

upload-imgs.css ..

/* 第一套图片上传样式（内部图标相机） */
.upload-image-view {
    width: 100%;
    margin: 20upx 0 20upx 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
 
.upload-image-view .title {
    width: 100%;
    font-family: PingFang-SC-Regular;
    font-size: 24upx;
    color: #4a4a4a;
    margin-bottom: 15upx;
    line-height: 100%;
}
 
.upload-image-view .info {
    width: 100%;
    font-family: PingFang-SC-Regular;
    font-size: 24upx;
    color: #ff4259;
    height: 24upx;
    margin-top: 15upx;
    line-height: 24upx;
}
 
.upload-image-view .image-view {
    height: 130upx;
    width: 130upx;
    position: relative;
    margin: 15upx 15upx 15upx 0upx;
    border-radius: 8upx;
}
 
.upload-image-view .image-view image {
    height: 100%;
    width: 100%;
    border-radius: 8upx;
}
 
.upload-image-view .image-view .del-btn {
    background-color: #f67371;
    border-radius: 50%;
    width: 25upx;
    height: 25upx;
    position: absolute;
    top: -12upx;
    right: -12upx;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.upload-image-view .image-view .del-btn .baicha {
    display: inline-block;
    width: 20upx;
    height: 5upx;
    background: #fff;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
}
 
.upload-image-view .image-view .del-btn .baicha:after {
    content: '/';
    display: block;
    width: 20upx;
    height: 5upx;
    background: #fff;
    -webkit-transform: rotate(-90deg);
}
 
.upload-image-view .add-view {
    height: 115upx;
    width: 115upx;
    margin: 15upx 15upx 15upx 0upx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.00);
    border: 3upx dashed #979797;
    border-radius: 8upx;
}
 
/* 相机 */
 
.upload-image-view .add-view .xiangji {
    height: 40upx;
    width: 48upx;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
 
.upload-image-view .add-view .xiangji .tixing {
    width: 10upx;
    height: 7upx;
    background-color: #fff;
    border-right: 10upx solid #fff;
    border-bottom: 7upx solid #b2b2b2;
    border-left: 10upx solid #fff;
}
 
.upload-image-view .add-view .xiangji .changfx {
    height: 32upx;
    width: 48upx;
    border-radius: 5%;
    background-color: #b2b2b2;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.upload-image-view .add-view .xiangji .changfx .yuan1 {
    height: 20upx;
    width: 20upx;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.upload-image-view .add-view .xiangji .changfx .yuan2 {
    height: 10upx;
    width: 10upx;
    border-radius: 50%;
    background-color: #b2b2b2;
}
 
/* 第二套图片上传样式（内部图标 十字架）*/
 
/* 十字架 */
.upload-image-view .add-view .cross {
    height: 48upx;
    width: 48upx;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
 
.upload-image-view .add-view .cross .transverse-line {
    height: 100%;
    width: 48%;
    position: absolute;
    border-right: 3upx solid #5A5A5A;
    top: 0;
    left: 0;
}
 
.upload-image-view .add-view .cross .vertical-line {
    height: 48%;
    width: 100%;
    position: absolute;
    border-bottom: 3upx solid #5A5A5A;
    top: 0;
    left: 0;
}

 

 

 

 

 

后端java 接口。

 

@ActionKey("/api/v2/file/uploadBase64")
public void uploadBase64() {
   String savePath = new SimpleDateFormat("yyyyMMdd").format(new Date())+"/";
   String strImg = this.getPara("da");
   strImg = strImg.substring(strImg.lastIndexOf("base64,")+7,strImg.length());
   String location = PathKit.getWebRootPath() + "/upload/phone/"+savePath;
   File file = new File(location);
   if(!file.exists()){
      file.mkdirs();
   }
   String fileName = System.currentTimeMillis()+".jpg";
   try {
      GenerateImage(strImg,location+fileName);
   } catch (IOException e) {
      e.printStackTrace();
      this.renderJson(new Record().set("code",500));
   }
   this.renderJson(location+fileName);
}

 

 

public static boolean GenerateImage(String imgStr, String imgFilePath) throws IOException {// 对字节数组字符串进行Base64解码并生成图片
   if (imgStr == null) // 图像数据为空
      return false;
   BASE64Decoder decoder = new BASE64Decoder();
      // Base64解码
      byte[] bytes = decoder.decodeBuffer(imgStr);
      for (int i = 0; i < bytes.length; ++i) {
         if (bytes[i] < 0) {// 调整异常数据
            bytes[i] += 256;
         }
      }
      // 生成jpeg图片
      OutputStream out = new FileOutputStream(imgFilePath);
      out.write(bytes);
      out.flush();
      out.close();
      return true;

}

 

原文地址:  https://blog.csdn.net/ZkD953/article/details/82865834