画世界上传图片提交到服务器_【MUI】选择图片并上传至服务器

最后更新17.01.20

一、首先这是HTML的代码将要显示一张图片

二、然后这是JavaScript代码

var img_my = document.getElementById('my_img_id');

//点击添加图片

img_my.addEventListener('tap', function() {

//打开相册(这里之前很多小伙伴问我，为什么打不开，因为我用的是H5+的方式，不适用于纯web页面)

plus.gallery.pick(

function(path) {

img_my.src = path; //设置img的路径

//把图片base64编码注意：这里必须在onload事件里执行！这给我坑的不轻

img_my.onload = function() {

var data = getBase64Image(img_my); //base64编码

var newImgbase = data.split(",")[1]; //通过逗号分割到新的编码

imgArray.push(newImgbase); //放到imgArray数组里面

img_my.off('load'); //关闭加载

}

function(e) {

mui.toast('取消选择');

});

//base64编码

function getBase64Image(img) {

var canvas = document.createElement("canvas"); //创建canvas DOM元素，并设置其宽高和图片一样

canvas.width = img.width;

canvas.height = img.height;

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, img.width, img.height); //使用画布画图

var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); //动态截取图片的格式

var dataURL = canvas.toDataURL("image/" + ext); //返回的是一串Base64编码的URL并指定格式

return dataURL;

}

三、上传图片操作

function uploadimg() {

//这里就可以把添加过图片的imgArray通过JSON解析成字符串，然后上传给服务器

var imgJson = JSON.stringify(imgArray);

mui.ajax("上传图片的地址", {

data: {

pic: imgJson,

type: 'post',

timeout: 10000,

dataType: 'json',

success: function(data) {

if(data.error == 0) {

mui.toast('上传成功');

} else {

mui.toast('上传失败:'+data.data);

}

error: function(xhr, type, errorThrown) {

mui.toast('错误');

}

});

}

画世界上传图片提交到服务器_【MUI】选择图片并上传至服务器相关推荐

uniapp选择图片裁剪,上传到服务器
uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考plus.camera(opens new win ...
【VUE】Toast-UI/Editor工具实现图片自定义上传到服务器
Toast-UI/Editor工具实现图片自定义上传到服务器 author: jwensh date: 2021.06.17 文章目录 Toast-UI/Editor工具实现图片自定义上传到服务器所 ...
画世界上传图片提交到服务器_webuploader实现上传图片到服务器功能
本文为大家分享了webuploader实现上传图片到服务器的具体代码,供大家参考,具体内容如下效果图: 一.引入资源文件 1.1 引入webuploader.css文件 1.2 引入webuploa ...
mysql管理数据并上传至云端_怎样将MySQL数据库上传到服务器
首先,需要将本地的数据库导出来,作为一个数据文件,以备稍后上传到服务器用,在本地登陆phpmyadmin控制面板: 登陆成功后,在左侧选择需要操作的数据库: 选择后,页面会自动刷新,然后再在右边点击[ ...
html5在线裁剪,HTML5 本地裁剪图片并上传至服务器（老梗）
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
cocos creator 调用相机相册裁剪图片并上传到服务器
大致思路就是creator里面js调用Java和object-c代码,调起系统相机相册,选取图库图片/拍照图片进行裁剪,然后转化为base64字符串,最后通过http post请求上传到服务器. Ja ...
html5图片区域剪切,HTML5 本地裁剪图片并上传至服务器（老梗）
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
服务器在线看视频无法播放,上传到服务器的视频不能在线播放怎么办？
原标题:上传到服务器的视频不能在线播放怎么办? 问题:我们在本地测试视频播放时,常常遇到这种情况,本地测试视频是可以正常播放的,但项目上传服务器后,视频就无法播放了,原因通常有以下几种,原因及解决方案 ...
上传文件到服务器打不开,关于软件上传到服务器后出现图片打不开的解决方法...
在本地做好的课程网站后上传到服务器出现图片.视频等文件无法打开,出现这种问题是由于在本地直接运行mini iis,上传的图片.视频和其他文件都是以根地址存入在数据库,如果把软件上传至服务器后并且以虚拟 ...

画世界上传图片提交到服务器_【MUI】选择图片并上传至服务器

画世界上传图片提交到服务器_【MUI】选择图片并上传至服务器相关推荐

最新文章

热门文章