mui 获取本地的图片的绝对路径本,上传到OSS上

                    mui(".img ul").on("tap", "li.addImgge", function() {
					if (mui.os.plus) {
						var a = [{
							title: "拍照"
						}, {
							title: "从手机相册选择"
						}];
						plus.nativeUI.actionSheet({
							title: "请选择图片来源",
							cancel: "取消",
							buttons: a
						}, function(b) { /*actionSheet 按钮点击事件*/
							switch (b.index) {
								case 0:
									break;
								case 1:
									getImage(); /*拍照*/
									break;
								case 2:
									galleryImg(); /*打开相册*/
									break;
								default:
									break;
							}
						})
					}
				})

//拍照
function getImage() {
  var c = plus.camera.getCamera();
  c.captureImage(function(e) {
    plus.io.resolveLocalFileSystemURL(e, function(entry) {
      uploadHead(entry.toLocalURL(), entry.name); /*上传图片*/
    }, function(e) {
      console.log("读取拍照文件错误:" + e.message);
    });
  }, function(s) {
    console.log("error" + s);
  })
}
//相册
function galleryImg() {
  plus.gallery.pick(function(paths) {
    for (i in paths.files) {
      uploadHead(paths.files[i], ""); /*上传图片*/
    }
  }, function(e) {
    mui.toast(‘取消了选择‘);
  }, {
    multiple: true,
    maximum: 9
  })
}

  这是调用本地的相册和相机,下面就是上传,在上传之前先把图片压缩为base64为编码格式,在用blob转化为arrayBuffer在上传

var imgBase64=[];
var imgBaseUrl=[];
function uploadHead(imgPath, imgName) {
	var image = new Image();
	image.src = imgPath;
	var li = document.createElement("li");
	var img = document.createElement("img");
	li.setAttribute("class","feedbackimg");
	li.index=mui(".img ul li").length;
	img.src = imgPath;
	li.appendChild(img);

	//alert(mui(".img ul")[0].innerHTML)
	if(mui(".img ul li").length>="6"){
		mui(".img ul li.addImgge")[0].style.display="none";
	}else{
		mui(".img ul")[0].appendChild(li);
		if(mui(".img ul li").length>="6"){
			mui(".img ul li.addImgge")[0].style.display="none";
		}
	}
	image.onload = function() {

		getCanvasBase64(imgPath).then(function(base640) {
			imgBase64[imgBase64.length]=base640;

		}, function(err) {
			console.log(err);
		});
	}
}
var deleteImg = (t) => {

	var index=t.index;
	imgBase64.splice((index-1),1);
	$($(".img ul li")[index]).remove();
}

	mui(".button").on("tap", "button", function() {
			mui(".mui-loading")[0].style.display="block";
			for(let i=0;i<imgBase64.length;i++){
				var urlData = imgBase64[i];
				var base64 = urlData.split(‘,‘).pop();
				var fileType = urlData.split(‘;‘).shift().split(‘:‘).pop();
				blob = toBlob(base64, fileType);

				// blob转arrayBuffer
				const reader = new FileReader();
				reader.readAsArrayBuffer(blob);
				reader.onload = function(event) {

					// 配置
					var client = new OSS.Wrapper({
						region: ‘oss-cn-hangzhou‘, //你的oss地址
						accessKeyId: ‘‘, //你的ak
						accessKeySecret: ‘‘, //你的secret
						secure: true,
						//stsToken: ‘<Your securityToken(STS)>‘,//这里我暂时没用,注销掉
						bucket: ‘XXX‘ //你的oss名字
					});

					// 文件名
					var objectKey = `/AndroidApp/${new Date().getTime()}.${fileType.split(‘/‘).pop()}`;

					// arrayBuffer转Buffer
					var buffer = new OSS.Buffer(event.target.result);

					// 上传
					client.put(objectKey, buffer).then(function(result) {

						imgBaseUrl[imgBaseUrl.length]=result.url;
						/* e.g. result = {
							name: "Uploads/file/20171125/1511601396119.png",
							res: {status: 200, statusCode: 200, headers: {…}, size: 0, aborted: false, …},
							url: "http://bucket.oss-cn-shenzhen.aliyuncs.com/Uploads/file/20171125/1511601396119.png"
						} */
					}).catch(function(err) {
						console.log(err);
					});
				}
			}

			})
function getBase64Image(img, width, height) {
	var canvas = document.createElement("canvas");
	canvas.width = width ? width : img.width;
	canvas.height = height ? height : img.height;
	var ctx = canvas.getContext("2d");
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	var dataURL = canvas.toDataURL();
	return dataURL;
}

function getCanvasBase64(img) {
	var image = new Image();
	//至关重要
	image.crossOrigin = ‘‘;
	image.src = img;
	//至关重要
	var deferred = $.Deferred();
	if (img) {
		image.onload = function() {
			deferred.resolve(getBase64Image(image)); //将base64传给done上传处理
			//document.getElementById("container2").appendChild(image);
		}
		return deferred.promise(); //问题要让onload完成后再return sessionStorage[‘imgTest‘]
	}
}

function toBlob(urlData, fileType) {
	let bytes = window.atob(urlData);
	let n = bytes.length;
	let u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bytes.charCodeAt(n);
	}
	return new Blob([u8arr], {
		type: fileType
	});
}

  

原文地址:https://www.cnblogs.com/hongchenzimo/p/10834204.html

时间: 2024-10-02 20:35:26

mui 获取本地的图片的绝对路径本,上传到OSS上的相关文章

WebApi 文件上传,断点上传,分块上传,断点下载,查询 (图片的直接预览,视频边加载边播放)

using Manjinba.Communication.Common.Caching;using Manjinba.Communication.Common.Logging;using Manjinba.Communication.Common.Utils;using Manjinba.Communication.IRepository;using Manjinba.Communication.IService;using Manjinba.Communication.Model;using

django之创建第10-1个项目-图片上传并记录上传时间

1.百度云盘:django之创建第10-1个项目-图片上传并记录上传时间 2.主要修改的配置文件有3个,forms.views和models3个文件以及html 3.forms.py文件修改 #coding:utf-8 #这里定义html页面中用到的表单,常和views和models文件配合使用 """ >>> help(django) Help on package django: PACKAGE CONTENTS conf (package) contr

java web图片上传和文件上传

图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定要写属性enctype="multipart/form-data" 2.为了能保证文件能上传成功file控件的name属性值要和你提交的控制层变量名一致, 例如空间名是file那么你要在后台这样定义 private File file; //file控件名 private String fileContentType;//图

图片上传,头像上传

简介 在平时前端开发中,图片上传与头像上传是必不可少的.下边我把上传头像做了一个小的例子,希望大家能够使用.代码是一年前写的,对于新手老手来说,一看即懂.如果想要封装好的可以加群找我要哦! 分析 上传图片,我们需要我们可以选择form表单上传,或者ajax上传,本篇文章主要讲述ajax模拟form表单上传图片.看段代码分析一下. var formData = new FormData(); formData.append("image", blob); $.ajax({ url: ur

C# winform把本地文件上传到服务器上,和从服务器上下载文件

昨天在做项目过程中遇到需要把本地文件上传到服务器上的问题,在这里记录一下,方便大家互相学习! /// <summary> /// 上传文件方法/// </summary> /// <param name="filePath">本地文件所在路径(包括文件)</param> /// <param name="serverPath">文件存储服务器路径(包括文件)</param> public voi

如何通过TortoiseGit(小乌龟)把本地项目上传到github上

1.第一步: 安装git for windows(链接:https://gitforwindows.org/)一路next就好了, 如果遇到什么问题可以参考我另外一篇文章~^ - ^ 2.第二步:安装小乌龟(我习惯把TortoiseGit叫成小乌龟,所以接下来所有的TortoiseGit我都代替为小乌龟啦) 小乌龟安装步骤(安装完小乌龟之后再安装语言包): 步骤我就不贴出来了,跟git一样一路next就OK了,我把安装需求的安装包贴在下面,可以参考一下~ 别忘记下载中文语言包(看到这里要注意呀 

JAVA基础知识之InputStreamReader流 和 将本地文件通过前端上传到服务器上

将本地文件通过前端上传到服务器上 public BaseResponseSwagger resolveFile(@Valid @ApiParam(value = "file")@RequestParam(name = "file",required = true) MultipartFile file){ if(file.isEmpty()){ throw new SoftwareException(ComStatusCodeEnum.COM_PARAM_VALID

从本地上传到hdfs上出现异常

hdfs dfs -put  从本地上传到hdfs上出现异常 与namenode  同台机器的datanode错误日志信息如下: 2015-12-03 09:54:03,083 WARN org.apache.hadoop.hdfs.server.datanode.DataNode: Slow BlockReceiver write data to disk cost:727ms (threshold=300ms) 2015-12-03 09:54:03,991 INFO org.apache.

base64格式的图片如何上传到oss

---恢复内容开始--- 对于base64图片的上传这个东西,一直是一个问题尤其是上传到oss.我们这次开发由于需要修剪图片,使用了h5的很多新特性. h5修剪图片,使用了我们的canvas.这个步骤是这样的.img->canvas->base64(by toDataURL).很多人走到了这个地方直 接懵逼,base64怎么上传啊.找了很多网上的,发现确实找不到,没什么人上传base64的教程.有点小绝望,感觉使用新特性, 修改图片可能是种错误的选择,然后出现了一个新的东西Blob对象,这个东