uniapp 多图片上传

最新推荐文章于 2024-05-28 13:09:47 发布
最新推荐文章于 2024-05-28 13:09:47 发布
阅读量6.5k 收藏 12
点赞数 10
文章标签： uniapp 多图上传 后台java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/No_longerwaste/article/details/100175056
版权

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

 

<template>
    <view class="body-view">
        <view class="uploads">
            <!-- 图片上传 -->
            <view class='upload-image-view'>
                <!-- 标题已经省略 -->
                <!-- <view class='title'>上传xxxx图片</view> -->
                <block v-for="(image,index) in imageList" :key="index">
                    <view class='image-view'>
                        <image :src="image" :data-src="image" @tap="previewImage"></image>
                        <view class='del-btn' :data-index="index" @tap='deleteImage'>
                            <view class='baicha'></view>
                        </view>
                    </view>
                </block>
                <view class='add-view' v-if="imageList.length < imageLength" @tap="chooseImage">

                    <!-- 相机 -->
                    <!-- <view class="xiangji">
                            <view class="tixing"></view>
                            <view class='changfx'>
                                <view class='yuan1'>
                                    <view class='yuan2'></view>
                                </view>
                            </view>
                        </view> -->

                    <!-- 十字架 -->
                    <view class="cross">
                        <view class="transverse-line"></view>
                        <view class="vertical-line"></view>
                    </view>

                </view>
                <view class='info'>上传证书/证件，不超过{{imageLength}}张。(非必填)</view>
            </view>
            <!-- 图片上传 -->
        </view>
        <view class="table-btn-view">
            <button class="save-btn" @tap='sub'>保存</button>
        </view>
    </view>
</template>

<script>
    var sourceType = [
        ['camera'], //拍照
        ['album'], //相册
        ['camera', 'album'] //拍照或相册
    ]
    var sizeType = [
        ['compressed'], //压缩
        ['original'], //原图
        ['compressed', 'original'] //压缩或原图
    ]
    var imglis = new Array();
    export default {
        data() {
            return {
                imageList: [], //保存图片路径集合
                imageLength: 3, //限制图片张数
                sourceTypeIndex: 2, //添加方式限制
                sizeTypeIndex: 2, //图片尺寸限制
            }
        },
        onUnload() {

        },
        methods: {
            //选择图片
            chooseImage: async function() {
                uni.chooseImage({
                    sourceType: sourceType[this.sourceTypeIndex],
                    // #ifdef MP-WEIXIN
                    sizeType: sizeType[this.sizeTypeIndex],
                    // #endif
                    count: this.imageLength - this.imageList.length,
                    success: (res) => {
                        const tempFilePaths = res.tempFilePaths;
                        uni.request({
                            url: tempFilePaths[0],
                            method: 'GET',
                            responseType: 'arraybuffer',
                            success: ress => {
                                let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
                                base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦

                                uni.request({
                                    url: 'http://localhost/api/v2/file/uploadBase64',
                                    dataType: 'file',
                                    method: 'POST',
                                    header: {
                                        "Content-Type": "application/x-www-form-urlencoded"
                                    },
                                    data: {
                                        'da': base64
                                    },
                                    success: function(uploadFileRes) {
                                        imglis.push(uploadFileRes.data);
                                        console.log(imglis);
                                        //this.imglis.concat(uploadFileRes.data);
                                    }
                                });
                            }
                        })


                        this.imageList = this.imageList.concat(res.tempFilePaths);
                    }
                })
            },
            //预览图片
            previewImage: function(e) {
                var current = e.target.dataset.src
                uni.previewImage({
                    current: current,
                    urls: this.imageList
                })
            },
            //删除图片
            deleteImage: function(e) {
                //console.log(e.currentTarget.dataset.index);
                var index = e.target.dataset.index;
                var that = this;
                var images = that.imageList;
                images.splice(index, 1);
                imglis.splice(e.currentTarget.dataset.index, 1);
                that.imageList = images;
            },
            //保存图片
            sub: function(e) {
                console.log(imglis)

                

            }
        }
    }
</script>

<style>
    @import "../../static/css/upload-imgs.css";

    page {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        background-color: #FFFFFF;
    }

    .body-view {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }

    .info-table {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        background-color: #FFFFFF;
    }

    .info-table .info-table-row {
        height: 120upx;
        width: 92%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1upx solid rgba(204, 204, 204, 1);
    }

    .info-table .info-table-row .table-row-left {
        height: 40upx;
        font-size: 28upx;
        font-weight: 400;
        color: rgba(28, 28, 28, 1);
        line-height: 40upx;
    }

    .info-table .info-table-row .table-row-right {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .info-table .info-table-row .table-row-right image {
        width: 13upx;
        height: 24upx;
    }

    .info-table .info-table-row .table-row-right input {
        width: 560upx;
        height: 40upx;
        font-size: 28upx;
        font-weight: 400;
        color: rgba(28, 28, 28, 1);
        line-height: 40upx;
    }

    .table-btn-view {
        position: fixed;
        bottom: 27upx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .table-btn-view .save-btn {
        width: 92%;
        height: 90upx;
        background: rgba(0, 170, 255, 1);
        border-radius: 10upx;
        color: #FFFFFF;
    }

    .uploads {
        width: 92%;
    }
</style>
 

 

@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

21天in
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
uniapp 实现多个图片上传
weixin_43681578的博客
07-07 2859
文章目录前言一、uploadFile() 是什么？二、使用步骤1.上传图片2.获取每个图片的上传地址3.获取每个图片的可下载地址总结 uniapp 实现多个图片上传（需用 uniCould） 前言 在用uniapp 编写程序时，遇到上传图片问题，可以使用 uniCould 的API uploadFile() 但是该接口一次只能上传一张图片，当需要上传多张照片时，就需要在其基础上进行改动，本文就是用自己的理解实现多张图片上传问题 提示：以下是本篇文章正文内容，下面案例可供参考 一、uploadFi.
实现一个简单的图像搜索引擎---前奏
Mr.Yi的博客
04-09 970
效果描述： 输入：随机选择一张图片 输出：输出与之最近似的几张图片 效果图： 一、环境搭建与配置 1、我用的是Anaconda来配置的环境，用Pycharm来编写的。具体需要在Anaconda里配置python，openCV，numpy,tensorflow等具体如下图： 2、然后在Pycharm里把Anaconda里配置的环境导入； 3、由于该项目需要在键盘输入参数，所以需要用终端输入...
uniapp开发h5，实现动态多组图片上传
最新发布
JPQLGZPW的博客
05-28 248
需求：有个待检查项，需要上传检查后的图片,因为待检查项是不固定的，有可能就一项有可能八项，没一项都要上传图片，所以需要动态绑定数据。获取接口返回的数据去循环push。
UniAPP优美地实现多图片上传、多行文本输入框以、单选框
Funky_oaNiu的博客
08-13 1558
UniAPP优美地实现多图片上传、多行文本输入框以、单选框
uni-app上传多图
Bright2017的博客
12-13 2196
<view class="evaluate_five flex"> <view v-for="(item,index) in image_array" class="flex evaluate_five_cents" @click="close_img(index)"> <image :src="item" mode="widthFix">...
uniapp单图片，多图片上传
qq_63943166的博客
04-17 469
uniapp单图片，多图片上传
uniapp多张图片上传.rar
03-31
本示例项目 "uniapp多张图片上传.rar" 提供了一个关于如何在 uniapp 中实现多张图片上传的实例，下面我们将详细探讨这个知识点。 首先，`main.js` 是应用的主入口文件，通常用于配置全局变量和挂载根 Vue 实例。在...
uniapp 多文件上传
03-07
在uniapp框架中，多文件上传是一个常见的功能需求，尤其在构建移动应用或者Web应用时。uniapp基于Vue.js，提供了丰富的API接口，使得开发者能够方便地实现这一功能。本篇将详细介绍如何在uniapp中进行多文件上传，并...
uniapp图片上传
05-11
综上所述，uniAPP图片上传涉及到前端UI设计、图片处理、网络请求、组件化开发等多个方面，结合提供的文件，我们可以构建一个完整的图片上传功能，并根据实际需求进行定制和优化。在实际开发中，还需要注意错误处理、...
uniapp 图片 视频上传
06-25
4. 上传过程：与图片上传类似，使用uni.uploadFile上传视频文件，注意设置好合适的上传进度回调，以便向用户反馈进度。 四、兼容性处理 1. App端：针对原生App，uni-app会自动调用相应的原生API，如iOS的...
uniapp实现移动端上传文件功能
09-24
在移动应用开发中，文件上传是一项常见的功能，尤其在社交、云存储以及各种服务类应用中，用户常常需要上传图片、文档等数据。uniAPP，作为一个跨端开发框架，为开发者提供了便捷的方式来实现移动端的文件上传功能。...
帮我写一个完整的uniapp多图上传
weixin_35755823的博客
02-14 222
我可以为您提供一个完整的uniapp多图上传解决方案，如下：1.首先，安装uniapp，并在项目中添加一个新页面，以便上传图片。2.添加一个图片上传按钮，并配置它们的属性，以便接收多个图片。3.将图片上传到服务器，并在服务器端使用Node.js进行图片处理。4.将处理后的图片返回到前端，并显示在页面上。5.完成。 ...
uniapp表单上传多张图片
Shiny_boy_的博客
03-24 3343
uniapp实现表单内多图片上传 注意事项：只有app支持多图片上传，小程序只能一张一张传 需求描述：表单数据和选择的多张照片同时提交，效果如下所示： 话不多说，上代码，前端代码： <template> <view> <u-popup :show="show" @close="close"> <view style="display: flex;"> <view class="form-left"> 问题描
uniapp多图上传、一次性上传多张图片
m0_60459392的博客
05-10 2466
哈喽大家好，今后只分享思维方法，一来让大家思考，二来提升我自己的逻辑思维。js方法，选中文件图片，返回路径数组，然后遍历上传到服务器。用 uni-file-picker 组件， 文件选择上传。js方法 this.uploadFile。3.遍历一个个执行上传。2.获取到文件路径。
前端vue uni-app多图片上传组件，支持单个文件，多个文件上传 步骤条step使用
chenchuang0128的博客
05-30 3042
提交
【uniapp-上传图片单个图片和多个图片到数据库】
ZY_haiyangku的博客
02-23 897
我们将获取来的值复制给某一个变量，在 **uni.request({})**中传参过去，就完成了向后端上传图片的功能了。这里获取的链接只是本地图片的一个地址，但是我们需要的是将图片这一个文件上传到数据库，这里我们需要用到。但是我们拿到的都是单个的链接，我们需要将他们放在同一个数组里面，我们需要在data里面准备一个。但是这个数据我们不好获取，我们需要进行转换成对象，这里使用JSON.parse()以上就是上传单个图片和多个图片的教程，希望你学会了！但是我们只会单个图片是不够的，我们还需要学会。
uni-app如何选择并上传多张图片
Maximum_Patrick的博客
12-07 5923
uni-app如何选择并上传多张图片 使用uni-app的时候，发现使用uni.uploadFile只能上传一张图片，即使将图片路径存入数组中，再用uni.uploadFile上传，也只能是获取到一张图片的路径。 我也是试了很多方法，发现原来传多张图片，只需要提前在上传前，遍历uni.choose获取到的数据，将其传到另一个数组中，然后在uni.uploadFile直接使用files上传对应数组名字即可，就不再需要再在uni.uploadFile中使用filePath和name来上传。 ...
uniapp--上传图片
热门推荐
jing2623的博客
01-04 1万+
uniapp–上传图片 由于uniapp自带的上传图片组件，删除图片和预览原来的图片存在bug，所以本人就在原来的组件的基础上进行了改进 实现思路 父组件将已经存在的图片路径传递给子组件 子组件接收到之后，imageList子组件中一个存储图片路径的数组 this.imageList.push(val); this.uploadImguRL += val+','; 在这两句代码的外面...
uniapp 多图片上传
明耀的博客
06-09 1676
uploadImage(successBack) { uni.showToast({ icon: 'loading', title: "正在添加" }); this.uploadMoreImage([], 0, this.imgList.length, data => { uni.hideToast(); successBack(data); }, () => { CommonUtils.showToast("上传

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值