一、圖片上傳

（1）使用

<input type="file" accept="image/*" name="file" @change="upload($event)">

accept="image/*;capture=camera" 直接調用相機
accept="image/*" 調用相機 圖片或者相冊

（2）file文件屬性

lastModified：數值，表示最後一次修改時間的毫秒數；
lastModifiedDate：對象，表示最後一次修改時間的Date對象。
name：本地文件系統中的文件名；
size：文件的字節大小；
type：字符串，文件的MIME類型；
weblitRelativePath：此處爲空；當在input上加上webkitdirectory屬性時，用戶可選擇文件夾，此時weblitRelativePath表示文件夾中文件的相對路徑。

（3）OSS Javascript相關配置

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

let vm = this;
let formData = new FormData(); //通過 formdata上傳
axios.post(baseUrl + '/app/common/getAliOssMsg.json', formData).then(function(res) {
	if(res.data.code == 2000000) {
		vm.uploadbaseUrl = res.data.data.baseUrl
		vm.client = new OSS.Wrapper({
			region: 'oss-cn-beijing',
			secure:true,
			accessKeyId: res.data.data.accessKeyId,
			accessKeySecret: res.data.data.accessKeySecret,
			bucket: res.data.data.bucketName,
		});
		
	}
}).catch(function(error) {
	console.log(error);
})

其中有遇到跨域問題：參考以下鏈接，需後臺進行跨域配置

https://www.cnblogs.com/weifeng1463/p/9120442.html

二、圖片裁剪

（1）下載cropper.js插件

（2）引入CSS和JS

<link rel="stylesheet" href="./css/cropper.min.css"/>
<script src="./js/cropper.min.js"></script>

（3）獲取圖片並展示

1、點擊input，觸發change事件，獲取拍照或相冊中選擇的圖片。

2、使用FileReader將文件轉化爲base64格式。用於顯示

3、獲取一個Image，將base64格式的圖片設置爲其src屬性

4、在該Image的onload方法中初始化cropper，進行相關配置。

5、綁定一個裁剪的事件，通過cropper的getCanvasData和getCropBoxData方法獲取到裁剪的一些數據，再通過canvas的toDataURL轉換裁剪的圖片爲base64。

6、將裁剪的base64格式的圖片轉化爲file文件進行上傳（採用的是OSS Javascript 上傳文件到服務器）

<style>
				.container{width: 100%;height: 100%;position: fixed;}
				.canvas{/*width: 100%;*/height:95%;background-color: #000;}
				.canvas img{width: 100%;}
				.fade{width: 100%;height:20%;background-color: #000;}
				.btn_box{width: 60%;height:auto;margin: 0 auto;bottom: 0px;text-align: center;/*border: 1px solid red; */padding-top: 10%;}
				.btn_box div{color:#fff;width: 40%;font-size:34px;border: 1px solid #A09F9F;padding: 20px 10px;display: inline-block;text-align: center;padding: 10px 20px;}
				/* #cut{width: 2rem;height: 1rem;font-size: 0.5rem;color: black; background-color: white;}	 */
			</style>
<!-- 裁剪窗扣 -->
<div class="container" v-else>
		<div>
				<header class="topbar">
						<span class="fl" @click="cutBack">
							<img src="images/head_ic_back.png">
						</span>
						<h2 class="mapTitle">裁剪</h2>
							<!-- 三個原點 -->
						<img class="three_circles" src="images/c_ic_merchants_05_s.png" id="cut">
				</header>
				<div class="h88"></div>
	
		</div>
	<!-- 展示選擇的圖片 -->
	<div class="canvas">
		<img id="image" src="" ref="myImg"/>
	</div>
	<!-- 預覽裁剪的圖片 -->
	<div style="height:20%;">
		<canvas id="canvas" style="border: 1px solid saddlebrown;"></canvas>
		<img src="" id="test" />
	</div>
</div>

//上傳正面圖片
upload(e) {
let vm = this;
vm.isloadBack = false;
if(e.target.files) {
	const fileLen = e.target.files
	const resultUpload = [];
	for(let i = 0; i < fileLen.length; i++) {
		let file = fileLen[i];
		//使用FileReader將file轉化爲base64格式的圖片
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = (function(e) {
			//console.log(e.target.exif)
			var image = new Image();
			// console.log("e.target.result",e.target.result);
			let base64 = e.target.result;
			vm.isNoCutImg = false;
			vm.$nextTick(()=>{
				vm.getCutImg(base64);
			})
		})
	}
	// alert("resultUpload",resultUpload)
	// vm.frontImg = resultUpload;
	e.target.value = '';
} else {
	// alert("in2",);
	e.target.value = '';
}
},

// 獲取裁剪後的圖片
getCutImg(fileBase64){
// console.log("fileBase64",fileBase64);
const vm = this;
var local = fileBase64;
var $image = $("#image");  //裁剪區域要顯示的圖片
// console.log("image",image);
$image.attr("src",local); 
$image.on("load", function() {// 等待圖片加載成功後，才進行圖片的裁剪功能
	// console.log("load");
	$image.cropper({
		// 裁剪比例
		aspectRatio: 2 / 1,
		// 定義cropper的視圖模式
		viewMode:2,
		// 定義cropper的拖拽模式。
		dragMode:'move',
		// modal:false,
		// 在裁剪框上方顯示白色的區域(突出裁剪框)
		highlight:false,
		// 是否允許旋轉圖像。
		rotatable:false,
		// 顯示容器的網格背景。（就是後面的馬賽克）
		background:false,
		// 是否可以通過拖動觸摸來放大圖像
		zoomOnTouch:false,
		// 顯示在裁剪框上方的虛線。
		guides: false,  //裁剪框的虛線
		autoCropArea: 1,//0-1之間的數值，定義自動剪裁區域的大小，默認0.8
		dragCrop: false,//是否允許移除當前的剪裁框，並通過拖動來新建一個剪裁框區域
		// 是否允許可以移動後面的圖片
		movable: true,  //是否允許移動剪裁框
		resizable: false,  //是否允許改變裁剪框的大小
		// 是否允許放大圖像。
		zoomable: true,  //是否允許縮放圖片大小
		// 是否可以通過拖動觸摸來放大圖像。							
		zoomOnTouch:true,
		mouseWheelZoom: false,  //是否允許通過鼠標滾輪來縮放圖片
		touchDragZoom: true,  //是否允許通過觸摸移動來縮放圖片
		rotatable: false,  //是否允許旋轉圖片
		strict: true,
		toggleDragModeOnDblclick:false,
		// 是否通過拖動來調整剪裁框的大小。
	    cropBoxResizable:false
	});
});

//裁剪 按鈕
$("#cut").on("click", function() {
	
	//方法一：通過cropper的getCroppedCanvas方法可以拿到一個畫有剪裁圖片的canvas。
	//但是測試後發現這種方法會導致裁剪的圖片方法，需要進行比例縮放
//			    var dataURL = $('#image').cropper("getCroppedCanvas");//拿到剪裁後的數據  
//         		var data = dataURL.toDataURL("image/jpg", 1);//轉成base64
//			    alert("回調："+data);
	
	//方法二：通過cropper的getCanvasData和getCropBoxData方法獲取到裁剪的一些數                據，再通過canvas的toDataURL轉換裁剪的圖片爲base64
	var src = $image.attr("src");
	var canvasdata = $image.cropper("getCanvasData");
	var cropBoxData = $image.cropper('getCropBoxData');
	convertToData(src, canvasdata, cropBoxData, function(basechar) {
		let base64 = basechar;
		let file = vm.dataURLtoFile(base64);
		vm.uploadImgToServer(file);
		vm.isNoCutImg = true;
		// console.log("file",file);
		// 回調後的函數處理        
//					alert("回調："+basechar);
//					localStorage.setItem("basechar",basechar);
//					location.href="test2.html";//預覽base64
	});
})

//重新繪製裁剪的圖片 轉換爲base64
function convertToData(url, canvasdata, cropdata, callback) { 
	var cropw = cropdata.width; // 剪裁區域的寬度。
	var croph = cropdata.height; // 剪裁區域的高度
	var imgw = canvasdata.width; // canvas新的寬度
	var imgh = canvasdata.height; // canvas新的高度
//			    alert(cropw+"，"+croph+"，"+imgw+"，"+imgh);
	var poleft = canvasdata.left - cropdata.left; // canvas定位圖片的左邊位置
	var potop = canvasdata.top - cropdata.top; // canvas定位圖片的上邊位置
//			    alert(poleft+"，"+potop);
//			    var canvas = document.createElement("canvas");//通過js創建canvas 但是頁面看不到裁剪後的圖片 需要自己拿到裁剪的base64後在顯示出來
	var canvas = document.getElementById("canvas");//如果是本頁面展示 可以在頁面創建一個canvas 可以看到裁剪工具裁剪的圖片
	var ctx = canvas.getContext('2d');
	
	canvas.width = cropw;
	canvas.height = croph;
	

	var img = new Image();
	img.src = url;	
	img.onload = function() {
		this.width = imgw;
		this.height = imgh;
		ctx.drawImage(this, poleft, potop, this.width,this.height);
		var base64 = canvas.toDataURL("image/jpg", 1);  // 這裏的“1”是指的是處理圖片的清晰度（0-1）之間，當然越小圖片越模糊，處理後的圖片大小也就越小
		callback && callback(base64)      // 回調base64字符串
	}

	img.onerror = function () {
		alert("error")
	}
}
	},

// 上傳圖片到服務器
uploadImgToServer(file){
			const vm = this;
			let isloadBack = vm.isloadBack;
			const resultUpload = [];
			const storeAs = new Date().getTime() + "K" + Math.floor(Math.random() * 100) + 9000;
			let size = file.size;
			// alert(storeAs)
			// alert(file)
			// console.log("storeAs",storeAs);
			// console.log("file",file.name);
			vm.client.multipartUpload(storeAs, file, {
			}).then((results) => {
				// alert("results",results)
				// console.log(results)
				if(size >= 100 * 1024) {
					resultUpload.push(results.res.requestUrls[0].split("?")[0]);
				} else {
					resultUpload.push(results.url);
				}
				if(isloadBack){
					vm.backImg = resultUpload;
				}else{
					vm.frontImg = resultUpload;
				}
			}).catch((err) => {
				alert(err)
				console.log("err",err);
			});
},
// 將base64轉化爲文件類型
dataURLtoFile (dataurl, filename = 'file') {
	let arr = dataurl.split(',')
	let mime = arr[0].match(/:(.*?);/)[1]
	let suffix = mime.split('/')[1]
	let bstr = atob(arr[1])
	let n = bstr.length
	let u8arr = new Uint8Array(n)
	while (n--) {
	u8arr[n] = bstr.charCodeAt(n)
	}
	return new File([u8arr], `${filename}.${suffix}`, {type: mime})
},