移动端组图预览&多张图片压缩上传

最新推荐文章于 2021-08-06 15:38:56 发布
最新推荐文章于 2021-08-06 15:38:56 发布
阅读量325 收藏
点赞数
文章标签： webpack javascript json ViewUI
原文链接：https://juejin.im/post/5aff9ac1518825429c597a44
版权
  • 项目难点总结，用法示例demo;
  • 实现移动端可组图预览，调用本地相册、拍照上传图片，支持图片增删;
  • 基于Vue+webpack+sfmui框架。

组图浏览：可浏览一组网络图片

调用示例：

Var imgUrls = [ 0,  "http://10.202.32.117:8080/KMS/mobile/images/001/498/199153/14ac7dd0-3ed8-4c71-9550-4ad57f14e668.jpg"] 

StartMedia.startKmsPicBroswer (imgUrls)

//组图数据，imgUrls [0]为当前浏览图片在数组的下标（0~n-1），imgUrls [1]为第1张图片地址…imgUrls [n]为第N张图片地址
复制代码

应用demo：

  <div class="">
        <div class="preview-img" v-for="(imgUrl,index) in imgUrlArr" :key="index">
	    <img :src="imgUrl" @click="previewImg(imgUrl,imgUrlArr)"/>
        </div>
    </div>
复制代码
previewImg(imgUrl,imgArr){
    const data=[];
    for (let i=0,let n=imgArr.length; i<n; i++){
	if (imgArr[i] === imgUrl){
	    data.push(i);
	}
    }
    const resultData= data.concat(imgArr);
    console.info("图片预览:"+resultData);
    StartMedia.startKmsPicBroswer (resultData);
}
复制代码

压缩图片：根据本地路径压缩一张图片

调用示例：

Var imgPath = “/storage/emulated/0/team_qrcode.jpg”;//原图路径
function success (pressedImgPath){//成功压缩后图片路径
}
function failed (error){//失败信息
}
ExpressPlugin.compress(success, failed，imagePath);
复制代码

应用demo：本地图片或拍照图片增删且可点击预览，压缩上传

	<div class="upload-box">
		<v-cell class="upload-cell" title="上传照片">
			<i :style="{'backgroundImage': 'url('+require('../../assets/upLoad.svg')+')'}" slot="icon"></i>
		</v-cell>
		<div class="flex flex-hw">
			<div class="upload-img" v-for="(imgUrl,index) in imgUrlArr" :key="index">
				<v-icon type="cancel" @click.native="handleDeleteImg(index)"></v-icon>
				<img :src="item.thumbnail" @click="previewImg(imgUrl.thumbnail,imgUrlArrCoyp)"/>
			</div>
			<div class="upload-add" @click="isActionsheet = true" v-if="imgUrlArr.length < 5">
				<v-icon type="plus"></v-icon>
			</div>
		</div>
		<v-actionsheet v-model="isActionsheet" :menus="actionsheetMenus" @on-click-menu="handleActionsheet" show-cancel></v-actionsheet>
	</div>
复制代码

methods:

	previewImg(imgUrl,imgUrlArrCopy){//组图浏览：imgUrlArrCopy为imgUrlArr数组对象转化成数组
    		const urlData=[];
    		for (var i=0,n=imgArr1.length; i<n; i++){
    		  if (imgUrlArrCopy[i] === imgUrl){
    		    urlData.push(i);
    		  }
        	}
    		const resultData= urlData.concat(imgArr1);
    		console.info("图片预览:"+resultData);
                StartMedia.startKmsPicBroswer (resultData);
          },
        //获取本地图片        handleActionsheet(a, b) {    console.log(a, b)    if(a === "menu1") {//menu1：拍照this.$takePhoto(this.acquireSuccess, this.acquireError)//调用手机摄像头    } else if(a==="menu2"){//menu2:相册this.$openAlbum(this.acquireSuccess, this.acquireError)//调用手机相册    }},
   acquireSuccess(imageInfo) {//选择拍照或者相册上传成功的回调函数，可从函数参数中获取图片信息对象，包含原图（original）和缩略图（thumbnail）两个字段，分别表示对应图片的路径；
	if(this.$getIsIOS()) {
	    var str = "";
	    str = imageInfo;
	    str = str.replace(/\n/g, '');
	    var obj1 = JSON.parse(str);
	    var that = this;
	    that.imgArr.push(obj1);			
	} else {
	    this.imgArr.push(imageInfo);
	}
    },
    acquireError(type, a) {
	this.$toast.show({
		text: '调取失败',
	})
    },
复制代码
//开始压缩上传本地图片
                        startUpload(){								
				this.imageArrayUrlCopy = []
				this.imgArrId = []
				this.imageCompressIndex = 0
				this.imageTransferIndex = 0
				if(this.imgUrlArr.length){
					if(this.imageCompressIndex >= this.imgUrlArr.length-1){
						this.$compressFile(this.imgUrlArr[this.imageCompressIndex].original, this.compressSuccessSubmit, this.onFail);
						return true;
					}else{
						this.$compressFile(this.imgUrlArr[this.imageCompressIndex].original, this.compressSuccess, this.onFail);
						return true;						
					}
				}else{
					return false
				}
			},
			compressSuccess(imgurl) {
				this.imageCompressIndex++;
				this.imageArrayUrlCopy.push(imgurl);								
				if(this.imageCompressIndex >= this.imgUrlArr.length - 1) {
					this.$compressFile(this.imgUrlArr[this.imageCompressIndex].original, this.compressSuccessSubmit, this.onFail);
				} else {
					this.$compressFile(this.imgArr[this.imageCompressIndex].original, this.compressSuccess, this.onFail);
				}
			},
			compressSuccessSubmit(imgUrl) {
				//最后一张图片压缩后回调方法，并上传图片
				this.imageArrayUrlCopy.push(imgUrl);		
				if(this.imageArrayUrlCopy && this.imageArrayUrlCopy.length > 0) {
					if(this.imageTransferIndex >= this.imageArrayUrlCopy.length - 1) {
						//当上传图片为最后一张时提交表单
						this.$transferImageToService(
							this.$axios.defaults.baseURL + "attachment/uploadFiles",
							this.imageArrayUrlCopy[this.imageTransferIndex],
							this.onSuccessSubmit,
							this.onFail
						);
					} else {
						this.$transferImageToService(
							this.$axios.defaults.baseURL + "attachment/uploadFiles",//附件上传后台地址=>返回附件ID
							this.imageArrayUrlCopy[this.imageTransferIndex],
							this.onSuccess,
							this.onFail
						);
				}

				}
			},
			onSuccess(imgUploadData) {
				this.imageTransferIndex++;
				if(imgUploadData.succ === "ok") {
					this.imgArrId.push(imgUploadData.msg)
				}
				console.log(imgUploadData, "onSuccess")
				if(this.imageTransferIndex >= this.imageArrayUrlCopy.length - 1) {
					//当上传图片为最后一张时提交表单
					this.$transferImageToService(
						this.$axios.defaults.baseURL + "attachment/uploadFiles",
						this.imageArrayUrlCopy[this.imageTransferIndex],
						this.onSuccessSubmit,
						this.onFail
					);
				} else {
					this.$transferImageToService(
						this.$axios.defaults.baseURL + "attachment/uploadFiles",
						this.imageArrayUrlCopy[this.imageTransferIndex],
						this.onSuccess,
						this.onFail
					);
				}
			},
			onSuccessSubmit(imgUploadData) {
				console.log("onSuccessSubmit")
				if(imgUploadData.succ === "ok") {
					this.imgArrId.push(imgUploadData.msg)
				}
				this.$emit("onSuccessUpload",imgID)//子组件传递id值给父组件
				this.$deleteFiles(this.imageArrayUrlCopy);
			},   
			onFail(mess) {
				//关闭loading拦截
				console.log(mess, "失败")
				this.$loading.hide()
		        	this.$toast.hide();
				this.$toast.show({
					text: mess,
				})
			},
                     handleDeleteImg(index){
                          this.imgUrlArr.splice(index,1)
                      }
           watch:
       watch:{
            imgUrlArr(){            
                for(let i=0;i<imgUrlArr.lenght;i++){
                   this.imgUrlArrCoyp.push(imgUrlArr[i].thumbnail)
                }
            }
        }
复制代码

综合前面两点，实现=>本地组图压缩上传+组图浏览

  • 背景：用户调整修改已提交信息，页面加载用户之前已提交信息，包括图片，此时图片以网络图片形式预览。

  • 问题：压缩上传图片只能是本地路径图片，网络图片会报错。

  • 解决方案：区别本地图片与网络图片，只压缩本地图片，最后提交时再拼接网络图片ID提交给后台。

    • 备注：图片模块抽离成子组件，图片的增删改以及本地图片压缩上传后所得图片id通过this.emit()=>父组件。父组件原有网络图片信息通过：obj="obj"=>子组件

1、如果有增加本地图片，触发子组件拼接新imgID

  • demo
<template>
    <div class="upload-box">
        <v-cell class="upload-cell" title="上传照片（非必填）">
            <i :style="{'backgroundImage': 'url('+require('../../assets/upLoad.svg')+')'}" slot="icon"></i>
        </v-cell>
        <div class="flex flex-hw">
            <div class="upload-img" v-for="(item,index) in imgArr" :key="index">
                <v-icon type="cancel" @click.native="handleDeleteImg(index)"></v-icon>
                <img :src="item.thumbnail" @click="previewImg(item.thumbnail,imgArr1)"/>
            </div>
            <div class="upload-add" @click="isActionsheet = true" v-if="imgArr.length < 5">
                <v-icon type="plus"></v-icon>
            </div>
        </div>
        
        <v-actionsheet v-model="isActionsheet" :menus="actionsheetMenus" @on-click-menu="handleActionsheet" show-cancel></v-actionsheet>
        
    </div>
</template>
复制代码
<script>
    export default {
        props:{
            obj:Object
        },
        created(){
            this.getFatherData()
        },
        data() {
            return {
                deleteHttpImgID:'',
                httpStr:"http://imgload?fileId=",
                httpImgArrID:[],
                imgArr:[],//表示包含图片两个路径（一个原图路径，一个缩略图路径）的图片信息对象
                imageArrayUrlCopy:[],
                imgArr1:[],
                imgArrId:[],
                imageCompressIndex:0,
                imageTransferIndex:0,
                isActionsheet:false,
                actionsheetMenus: {
                    menu1: '拍照',
                    menu2: '从相册选择'
                },
            }
        },
        methods: {
            previewImg(imgurl,imgArr1){
        
            var urldata=[];
            for (var i=0,n=imgArr1.length; i<n; i++){
              if (imgArr1[i] === imgurl){
                urldata.push(i);
              }
            }
            
            var resultData= urldata.concat(imgArr1);
            console.info("图片预览:"+resultData);
            StartMedia.startKmsPicBroswer (resultData);
            },
            getFatherData(){
                console.log(this.obj+'upload父元素对象')
                if(this.obj){
                this.imgArr=this.obj.imgurlArr
                this.imgArr1=this.obj.imgurlArr1    
                console.log(this.obj.imgurlArr+'****'+this.obj.imgurlArr1+'upload获取父元素图片数据')
                }

            },
            handleActionsheet(a, b) {
                console.log(a, b)
                if(a === "menu1") {
                    this.$takePhoto(this.acquireSuccess, this.acquireError)
                } else if(a==="menu2"){
                    this.$openAlbum(this.acquireSuccess, this.acquireError)
                }

            },
            acquireSuccess(imageInfo) {//选择拍照或者相册上传成功的回调函数，可从函数参数中获取图片信息对象，包含原图（original）和缩略图（thumbnail）两个字段，分别表示对应图片的路径；
                if(this.$getIsIOS()) {
                    var str = "";
                    str = imageInfo;
                    str = str.replace(/\n/g, '');
                    var obj1 = JSON.parse(str);
                    var that = this;
                        that.imgArr.push(obj1);
                    
                } else {
                    this.imgArr.push(imageInfo);
                }
                console.log(this.imgArr, "acquireSuccess")
            },
            acquireError(type, a) {
                this.$toast.show({
                    text: '调取失败',
                })
            },
            onFail(mess) {
                //关闭loading拦截
                console.log(mess, "失败")
                this.$loading.hide()
                this.$toast.hide();
                this.$toast.show({
                    text: mess,
                })
            },
            startUpload(){
                // 开始上传图片时，统一删除所有网络图片
                var count=[];
                 
                this.imgArr.forEach((item,index) => {
                    if(item.original.indexOf(this.httpStr)!=-1){
                        count.push(index)
                        console.log('网络图片索引'+index)
                        this.httpImgArrID.push(item.original.replace(this.httpStr,''))
                        console.log(this.httpImgArrID+'**httpID数组**')
                    }
                });
                if(count.length>0){
                    this.imgArr.splice(0,count.length)                  
                }
                                
                this.imageArrayUrlCopy = []
                this.imgArrId = []
                this.imageCompressIndex = 0
                this.imageTransferIndex = 0
                if(this.imgArr.length){
                    if(this.imageCompressIndex >= this.imgArr.length-1){
                        this.$compressFile(this.imgArr[this.imageCompressIndex].original, this.compressSuccessSubmit, this.onFail);
                        return true;
                    }else{
                        this.$compressFile(this.imgArr[this.imageCompressIndex].original, this.compressSuccess, this.onFail);
                        return true;                        
                    }
                }else{
                    return false
                }
            },
            compressSuccess(imgurl) {
                this.imageCompressIndex++;
                this.imageArrayUrlCopy.push(imgurl);                                
                if(this.imageCompressIndex >= this.imgArr.length - 1) {
                    this.$compressFile(this.imgArr[this.imageCompressIndex].original, this.compressSuccessSubmit, this.onFail);
                } else {
                    this.$compressFile(this.imgArr[this.imageCompressIndex].original, this.compressSuccess, this.onFail);
                }
                console.log("compressSuccess"+imgurl)
            },
            compressSuccessSubmit(imgUrl) {
                //最后一张图片压缩后回调方法，并上传图片
                console.log("compressSuccessSubmit0")
                this.imageArrayUrlCopy.push(imgUrl);        
                if(this.imageArrayUrlCopy && this.imageArrayUrlCopy.length > 0) {
                    
                    if(this.imageTransferIndex >= this.imageArrayUrlCopy.length - 1) {
                        //当上传图片为最后一张时提交表单
                        this.$transferImageToService(
                            this.$axios.defaults.baseURL + "attachment/uploadFiles",
                            this.imageArrayUrlCopy[this.imageTransferIndex],
                            this.onSuccessSubmit,
                            this.onFail
                        );

                    } else {
                        this.$transferImageToService(
                            this.$axios.defaults.baseURL + "attachment/uploadFiles",
                            this.imageArrayUrlCopy[this.imageTransferIndex],
                            this.onSuccess,
                            this.onFail
                        );
                    }

                }
                console.log("compressSuccessSubmit", this.imageArrayUrlCopy)
            },
            onSuccess(imgUploadData) {
                this.imageTransferIndex++;
                if(imgUploadData.succ === "ok") {
                    this.imgArrId.push(imgUploadData.msg)
                }
                console.log(imgUploadData, "onSuccess")
                if(this.imageTransferIndex >= this.imageArrayUrlCopy.length - 1) {
                    //当上传图片为最后一张时提交表单
                    this.$transferImageToService(
                        this.$axios.defaults.baseURL + "attachment/uploadFiles",
                        this.imageArrayUrlCopy[this.imageTransferIndex],
                        this.onSuccessSubmit,
                        this.onFail
                    );
                } else {
                    this.$transferImageToService(
                        this.$axios.defaults.baseURL + "attachment/uploadFiles",
                        this.imageArrayUrlCopy[this.imageTransferIndex],
                        this.onSuccess,
                        this.onFail
                    );
                }
            },
            onSuccessSubmit(imgUploadData) {
                console.log("onSuccessSubmit")
                if(imgUploadData.succ === "ok") {
                    this.imgArrId.push(imgUploadData.msg)
                }

                //把提交时统一删除的网络图片id拼接回来
                if(this.httpImgArrID.length>0){
                    var totalIDArr=this.httpImgArrID.concat(this.imgArrId)
                    var imgID=totalIDArr.join(",")
                    console.log(imgID+'我是最后成功的全部ID');                   
                }else{
                    var imgID = this.imgArrId.join(",")
                    console.log(imgID+'我是最后成功的ID');
                }
                 
                this.$emit("onSuccessUpload",imgID)

                this.$deleteFiles(this.imageArrayUrlCopy);
            },
            handleDeleteImg(index){
                //在未上传本地照片的情况下，删除的如果是http图片，需要单独告知父元素判断
                if(this.imgArr[index].original.indexOf(this.httpStr)!=-1){
                    this.deleteHttpImgID=this.imgArr[index].original.replace(this.httpStr,'')
                    console.log(this.deleteHttpImgID)
                    this.$emit('deleteHttpImgArrIDFromUpload',this.deleteHttpImgID)
                    this.imgArr.splice(index, 1)                                        
                }else{
                    this.imgArr.splice(index, 1)                                                        
                }
            }
        }
    }
</script>
复制代码
<style lang="less" scoped="scoped">
    .upload-box {
        background-color: #fff;
        .upload-cell {
            margin-top: 10px;
            &:before {
                content: initial;
            }
            i {
                background-repeat: no-repeat;
                background-size: contain;
                display: inline-block;
                width: 20px;
                height: 17px;
                vertical-align: middle;
                margin-right: 5px;
            }
        }
        .flex {
            padding-bottom: 10px;
        }
        .upload-add,
        .upload-btn,
        .upload-img {
            margin-left: 10px;
            margin-top: 10px;
            box-sizing: border-box;
            background: #FFFFFF;
            border: 1px solid #DDDDDD;
            border-radius: 3px;
            width: 80px;
            height: 80px;
            text-align: center;
            font-size: 28px;
            line-height: 1.6rem;
            line-height: 80px;
            &.upload-add {
                color: #ccc;
            }
            &.upload-btn {
                color: #999;
            }
            &.upload-img {
                position: relative;
                line-height: 74px;
                img {
                    width: 100%;
                    height: 100%;
                }
                .smui-icon-cancel {
                    position: absolute;
                    top: -10px;
                    left: -10px;
                    font-size: 16px;
                    color: #ccc;
                }
            }
        }
    }
</style>
复制代码

2、在无本地图片上传情况下，由于未调用子组件id拼接，传递最新id值给父组件，所以父组件需要接收此时更改（删除）后的网络图片id做特殊情况的记录，父组件匹配删除id后，再将剩余网络图片id发送至后台。

  • demo
 // 父子传值，记录子组件传递过来的删除了的http类型图片
    deleteHttpImgArrIDFromUpload(deleteID){
      // this.deleteHttpImgID=deletID
      for(let i=0;i<this.oldFileIDsArr.length;i++){
        if(this.oldFileIDsArr[i]==deleteID){
          this.oldFileIDsArr.splice(i,1)
        }
      }
      console.log('接受到的删除的网络图片id'+deleteID)
      console.log(this.oldFileIDsArr+'原来的httpid数组')
    }
复制代码
// 在未上传本地照片或者拍照情况下，提交剩余的http图片id
                if(that.oldFileIDsArr.length>0){
                  var oldimgID=that.oldFileIDsArr.join(",")       
                  console.log('撤销页面自己http图片id'+oldimgID)  
                  that.onSubmit(oldimgID);           
                }else{
                  that.onSubmit();           
                }
复制代码

转载于:https://juejin.im/post/5aff9ac1518825429c597a44

George_Fal
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端图片上传压缩
01-16
移动端图片上传压缩移动端图片上传压缩移动端图片上传压缩移动端图片上传压缩移动端图片上传压缩
多图片预览-左右切换查看-兼容PC、移动端
05-24
点击查看图片预览，支持多图片预约，可左右切换查看，兼容PC、移动端
移动端图片压缩上传解决方案
weixin_46020146的博客
08-06 89
移动端图片压缩上传解决方案
移动端图片压缩上传
qq_38674970的博客
07-06 340
window.changepic4 = function() { var file = $("#form").find("input")[3].files[0]; var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; if(!rFilter.test(file.type)...
移动端上传图片压缩解决方法
alonia的博客
10-22 1692
1.前端开发时总是遇到要压缩图片的问题 前端的处理是 通过把file 转换成 base64格式 然后再传给后端 第一种 前端把file转换成 base64路径格式 直接传给后台，后台自己进行解码处理 第二种 前端把file 转换成 base64路径格式 ，然后再转换为file 格式（二进制格式）然后传给后台，后台按file处理 项目中遇到的是由于后台格式接受文件格式为file...
PHPCMS V9.6.6 修改版
07-24
38. 编辑器远程下载图片时加入对尺寸的压缩处理 39. 后台登录密码传输改为加密模式 40. 添加生成静态页进度条 41. 编辑器添加本地图片自动上传 42. 升级为CK4.16.1编辑器 43. 无用文件清理 44. 修改生成缩略图函数...
移动端图片压缩及上传
luyundesign的博客
12-09 191
<!-- 引入lrz插件 --> <script src="../../js/lrz/lrz.bundle.js" type="text/javascript" ></script> <!-- H5 input accept="image/*" capture="camera" 打开图库 或者 调用相机 --> <input type="file" id="FileImg" onchange="btnUploadFile(event)" accept="
js移动端/H5同时选择多张图片上传并使用canvas压缩图片
weixin_34226182的博客
06-20 495
最近在做一个H5的项目，里边涉及到拍照上传图片的功能以及识别图片的功能，这里对识别图片的功能不做赘述，不属本文范畴。我在做完并上线项目后，同事跟我提了一个要求是可不可以同时选择多张图片上传，我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了，如果不加，就无法同时选择多张图片，于是我就照实跟同事说了这个情况。但回头一想，单张图片可以上传，那多张图片呢？于...
手机移动端多图片上传删除js代码.rar
07-04
手机移动端多图片上传删除js代码，因multiple在安卓手机中不兼容，所以在安卓上只能一次选中一张图片，在iOS系统上可以实现多图片的上传。
vue.js多张图片上传
02-14
vue.js多张图片上传，适合初学者学习很详细，很有用，有收获。
Vue移动端实现图片上传及超过1M压缩上传
10-15
主要为大家详细介绍了Vue移动端实现图片上传及超过1M压缩上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android图片上传，可以选择多张图片，缩放预览，拍照上传等.rar
05-09
Android仿微信图片上传，可以选择多张图片，缩放预览，拍照上传等 - 享受技术带来的快乐！ - 博客频道 - CSDN.NET_files
原生通用js功能组件，同时兼容多端（pc、mobile、wx） 的弹出框组件和图片切换预览组件
05-28
原生通用js功能组件，同时兼容多端（pc、mobile、wx） 的弹出框组件、图片切换预览组件，滑屏点击均可，下载即可运行直接引用，文件大小？两个js组件大小分别6K、7K(未压缩)
PHP多图片上传支持左右移动位置
08-17
PHP多图片上传支持左右移动位置，plupload仿新浪微博多图片上传兼容IE
vue实现移动端图片上传功能
10-15
主要为大家详细介绍了vue实现移动端图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
多图片上传预览实现以及移动端web多文件上传
列苗
03-10 4897
注：先写下两个点，等空下来再上代码~1.多图片上传预览，且可对图片进行编辑可对 input[type=file] 对象获取 obj.files 获取 FileList，但为只读模式，不可写。2.移动端html5多文件上传 Android 端web不支持多文件上传，IOS支持。 解决：微信公众号开发可可调用微信jssdk接口
移动端上传图片 支持图片预览、压缩、大图分片压缩、压缩后上传 解决了IOS竖屏拍照旋转90度的问题
yangqin007的博客
01-18 1068
最近完成了一个微信开发项目，其中的图片上传做得非常辛苦，到目前为止功能应该算是比较完善了，支持图片预览、压缩、大图分片压缩、压缩后上传 解决了IOS竖屏拍照旋转90度等问题。效果图如下： 点击上传图片按钮调用手机相册和拍照功能： 选择图片之后： 上传成功后： 有遇到同样问题的朋友，欢迎给我留言讨论~~~
移动端图片上传的两种方式
dyjcxj的博客
08-06 5438
前段时间一直在做公司的项目，开发中遇到了图片上传的功能，由于是第一次调用微信接口实现多图上传，处处是坑啊，现总结一下开发中的问题，分享出来，以便后续有类似功能时直接查看使用，不必两眼一抹黑的开发了。 一 基于微信提供的API开发多图上传 （1） 微信js-sdk有两种，我们在开发中需要搞清楚自己到底是调用哪个平台的接口，两种sdk大同小异 一种是我们平时使用的js-sdk(微信JS-SDK说...
H5 移动端上传图片 和 视频 页面显示缩略图
热门推荐
able19910626的博客
07-17 1万+
这是我第一次写博客，想要分享一下编程经验，因为我也算是一个菜鸟而已，在编程过程中，很多问题 都是通过百度，通过CSDN里面的各位大神分享的经验，才得以解决的，所以我也是本着造福他人，也完善自己的意愿，开始写写博客，分享一下编程中遇到的问题及解决方法。好，废话不说，直接开搞； html代码： 为了方便大家，我用的都是内嵌样式 &lt;div style="height:300px;margi...
python气象组图
最新发布
09-14
Python气象组图是使用Python编程语言进行气象数据可视化的一种方法。通过使用Python中的各种绘图工具和库，如Matplotlib、Basemap、Cartopy等，可以绘制各种气象数据的图表和地图。 在气象组图中，常用的一些功能...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值