uniapp上传二进制图片的实现

功能需求:

前端选择本地文件,将选择好的文件显示在界面上进行预览,可同时选择四张进行预览。

思路如下:

前端选择本地的png、jpg、等格式的图片,将图片以二进制的形式传到后端服务器,后端对二进制图片进行处理,返回给前端一个服务器链接在线图片,在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。

首先

我们看一下uniapp的官方文档:https://uniapp.dcloud.io/api/media/image?id=chooseimage

大概是这样的

先写一个模拟的demo

1:首先我是是用了colorUI的框架,在项目里面引入

在page底下的vue文件引入

@import "../../colorui/main.css";
@import "../../colorui/icon.css";

这样一来,就不需要写什么样式了,直接使用写好的就行了。

<template>
    <view>
        <form>
            <view class="cu-bar bg-white margin-top">
                <view class="action">
                    图片上传
                </view>
                <view class="action">
                    {{imgList.length}}/4
                </view>
            </view>
            <view class="cu-form-group">
                <view class="grid col-4 grid-square flex-sub">
                    <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
                     <image :src="imgList[index]" mode="aspectFill"></image>
                        <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                            <text class='cuIcon-close'></text>
                        </view>
                    </view>
                    <view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
                        <text class='cuIcon-cameraadd'></text>
                    </view>
                </view>
            </view>

        </form>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                imgList: [],
            //  modalName: null,
            };
        },
        methods: {

            ChooseImage() {
                uni.chooseImage({
                    count: 4, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: (res) => {
                        if (this.imgList.length != 0) {
                            this.imgList = this.imgList.concat(res.tempFilePaths)
                        } else {
                            this.imgList = res.tempFilePaths
                        }
                    }
                });
            },
            ViewImage(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                });
            },
            //删除
            DelImg(e) {
                uni.showModal({
                    title: '删除',
                    content: '确定要删除这张图片?',
                    cancelText: '取消',
                    confirmText: '删除',
                    success: res => {
                        if (res.confirm) {
                            this.imgList.splice(e.currentTarget.dataset.index, 1)
                        }
                    }
                })
            },
        }
    }
</script>

<style>
@import "../../colorui/main.css";
@import "../../colorui/icon.css";
.cu-form-group .title {
   min-width: calc(4em + 15px);
}
</style>

效果是这样的
每次选完图片之后显示在页面上,我这里设置了最多可以选择四张,图片链接使用了临时的blob,接下来就要使用后端小伙伴给的接口,将自己本地的二进制文件传给他了。

在chooseImage选择好图片之后,写一个成功的回调函数,在回到函数里面添加一个图片上传的方法uploadFile,在方法里面添加url,等参数。

success: (res) => {
                            const tempFilePaths = res.tempFilePaths;
                            const uploadTask = uni.uploadFile({
                                url: 'http://47.xxx.xxx.78:8088/chemApp/work/upload.action',
                                filePath: tempFilePaths[0],
                                name: 'file',
                                success: function(uploadFileRes) {
                                    console.log(uploadFileRes);
                                    _this.imgList = [..._this.imgList, uploadFileRes.data]

                                }
                            });
                        }

若是请求成功
则返回一个图片链接

添加接口之后 的,demo如下:

<template>
    <view>
        <form>
            <view class="cu-bar bg-white margin-top">
                <view class="action">
                    图片上传
                </view>
                <view class="action">
                    {{imgList.length}}/4
                </view>
            </view>
            <view class="cu-form-group">
                <view class="grid col-4 grid-square flex-sub">
                    <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
                     <image v-if="item" :src="item" mode="aspectFill"></image>
                        <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                            <text class='cuIcon-close'></text>
                        </view>
                    </view>
                    <view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
                        <text class='cuIcon-cameraadd'></text>
                    </view>
                </view>
            </view>

        </form>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                imgList: [],
            //  modalName: null,
            };
        },
        methods: {

            ChooseImage() {
                const _this = this
                uni.chooseImage({
                    count: 4, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: (res) => {
                         const tempFilePaths = res.tempFilePaths;
                             const uploadTask = uni.uploadFile({
                              url : 'http://47.xxx.xxx.78:8088/chemApp/work/upload.action',
                              filePath: tempFilePaths[0],
                              name: 'file',

                              success: function (uploadFileRes) {
                               console.log(uploadFileRes);
                               _this.imgList = [..._this.imgList, uploadFileRes.data]

                              }
                             });

                    }
                });
            },
            ViewImage(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                });
            },
            //删除
            DelImg(e) {
                uni.showModal({
                    title: '删除',
                    content: '确定要删除这张图片?',
                    cancelText: '取消',
                    confirmText: '删除',
                    success: res => {
                        if (res.confirm) {
                            this.imgList.splice(e.currentTarget.dataset.index, 1)
                        }
                    }
                })
            },
        }
    }
</script>

<style>
@import "../../colorui/main.css";
@import "../../colorui/icon.css";
.cu-form-group .title {
   min-width: calc(4em + 15px);
}
</style>

上传图片效果

到此这篇关于uniapp上传二进制图片的实现的文章就介绍到这了,更多相关uniapp上传二进制图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • uniapp实现录音上传功能

    目录 uni-app 介绍 html部分 js部分 创建实例 开始录音 结束录音 播放录音 暂停播放 提交录音到后端 重新录制 onLoad部分 计时器 数据部分 uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序等多个平台,保证其正确运行并达到优秀体验. html部分 我是写了个录音的图片 点击之后弹出一个弹出层(仿了下qq的样式) 样式怎么写我就不赘述了大

  • uniapp上传二进制图片的实现

    功能需求: 前端选择本地文件,将选择好的文件显示在界面上进行预览,可同时选择四张进行预览. 思路如下: 前端选择本地的png.jpg.等格式的图片,将图片以二进制的形式传到后端服务器,后端对二进制图片进行处理,返回给前端一个服务器链接在线图片,在浏览器就可以打开链接访问的那种.然后前端将这个图片链接渲染在页面进行预览. 首先 我们看一下uniapp的官方文档:https://uniapp.dcloud.io/api/media/image?id=chooseimage 大概是这样的 先写一个模拟

  • Java实现上传文件图片到指定服务器目录

    具体代码如下所示: ***web.xml*** <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xm

  • jsp fckeditor 上传中文图片乱码问题的解决方法

    经过我修改ConnectorServlet.java和SimpleUploaderServlet.java两个文件,重新生成fckeditor-java-2.3.jar包,要解决所有的乱码问题,有3部要修改1.修改Web容器的字符编码,如果Web容器用的是Tomcat,则修改conf/server.xml文件,在两个Connector中添加"URIEncoding="utf-8"",我这里用的是utf-8编码,所以修改成utf-8,若项目是gb2312编码,则设置为

  • PHP在Windows IIS上传的图片无法访问的解决方法

    PHP在Windows IIS上传的图片无法访问的解决方法 首先登录到网站后台进行了测试发现上传的图片在确实浏览器打不开且出现了无法访问的错误信息:" 401 - 未 授权: 由于凭据无效,访问被拒绝." 然后又测试了该服务器上其他几个php项目发现也出现了一样的错误: 图片上传成功,但浏览器没有权限访问. 因为测试的几个php系统是不一样的,有thinkphp,wordpress,百度ueditor编辑器. 所以这几个系统同时出现问题的概率实在是太小了,所以基本上排除了程序的bug,

  • H5上传本地图片并预览功能

    最近工作中需要H5上传显示图片的功能,如图: 直接上代码: html部分 <div class="works-wrap"> <div class="figure-box" id="figure_box"></div> <div class="add-btn"> <input type="file" id="imgUploadBtn"

  • Java实现图片上传到服务器并把上传的图片读取出来

    在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢? 下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的不太清楚) 实现的思路: 工具:MySQL,eclipse 首先,在MySQL中创建了两个表,一个t_user表,用来存放用户名,密码等个人信息, 一个t_touxiang表,用来存放上传的图片在服务器中的存放路径,以及图片名字和用户ID, T_touxiang表中的用户ID对应了t_user中的i

  • 微信开发之调起摄像头、本地展示图片、上传下载图片实例

    之前那篇微信JS-SDK授权的文章实现了分享接口,那么这里总结一下如何在微信里面通过js调起原生摄像头,以及上传下载图片. 1.配置 页面引入通过jssdk授权后,传入wx对象,首先配置需要的接口 wx.config({ /* debug: true, */ appId: appid, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'chooseImage',//拍照或从手机相册中选图接口

  • android实现上传本地图片到网络功能

    本文实例为大家分享了android上传本地图片到网络的具体代码,供大家参考,具体内容如下 首先这里用到了Okhttp 所以需要一个依赖: compile 'com.squareup.okhttp3:okhttp:3.9.0' xml布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res

  • jquery.uploadifive插件怎么解决上传限制图片或文件大小问题

    jQuery.uploadifive插件可以很好的解决上传限制图片或文件大小问题,具体方法如下所示: 插件是可以用  但遇到问题如何提示是否超过限制呢 没办法研究插件js   发现网上给的提示这个插件里竟然没有没有没有.... 好吧  我就把onError拿出来看返回值 呵呵了 对了 使用该插件要引用 <script src="js/jquery-1.11.0.min.js"></script> <script src="../bootstrap

  • ajax图片上传,图片异步上传,更新实例

    最近在研究ajax图片上传,图片异步上传,更新,留作参考. 直接上源码吧: js源码: /// <reference path="jquery-1.8.3.js" /> /// <reference path="ajaxForm/jquery.form.js" /> /*! * jQuery upload * 用于上传单个文件,上传成功后,返回文件路径. * 本插件依赖jQuery,jquery.form 请在使用时引入依赖的文件 * * D

随机推荐