<template>
<div>
<form :class="uploadBtnClass" class="image-upload-form" v-show="!hasImage" method="post" enctype="multipart/form-data" action="">
<input type="file" class="image-upload-form-input" :id="'upload_btn_' + formID" @change="change" title=" ">
<slot></slot>
</form>
<div class="image-crop-wrap" ref="imgShape" v-show="hasImage" :id="'upload_crop_box_' + formID">
<div v-if="crop">
<div class="crop-cloth"></div>
<div class="image-crop-content fade">
<div class="image-crop-content-main">
<div class="img-origin-div">
<img class="img-origin" :id="'img_origin_'+formID" alt="Picture"/>
</div>
<p class="txt">头像预览</p>
<div class="img-preview-small-div" :class="previewClass" :id="'preview_'+formID">
</div>
<div style="clear:both"></div>
<div class="docs-buttons image-crop-foot">
<span class="btn-grey quit" @click="cancel">{{cropBtn.cancel}}</span>
<span class="btn-red save" @click="handleImageCropped">
<a class="clip-down">{{cropBtn.ok}}</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss">
@import "ossUpload.css";
</style>
<script>
import $ from "jquery";
import props from "./props";
import {getOssUploadToken} from "@/service/getData";
import cropper from 'cropper';
import Promise from 'es6-promise';
Promise.polyfill();
export default {
name: "",
props: props,
data() {
return {
hasImage: false,
formID: (Math.random() * 10000 + "").split(".")[0],
imageCropper: "", //cropper操作对象
options: {
aspectRatio: this.aspectRatio,
dragCrop: false,
viewMode: 1,
zoomable: false,
movable: false,
zoomOnTouch: false,
zoomOnWheel: false
}
};
},
watch: {},
mounted() {
$("body").append($(".image-crop-wrap"));
},
methods: {
_dispatch(name, res) {
this.$emit && this.$emit(name, res);
},
//初始化剪裁工具
initCropper: function () {
let that = this;
let o = "#upload_crop_box_" + that.formID;
that.imageCropper = $(o).find("#img_origin_" + that.formID);
let $dataX = $(o).find("#dataX");
let $dataY = $(o).find("#dataY");
let $dataHeight = $(o).find("#dataHeight");
let $dataWidth = $(o).find("#dataWidth");
let $dataScaleX = $(o).find("#dataScaleX");
let $dataScaleY = $(o).find("#dataScaleY");
this.options.crop = function (e) {
$dataX.val(Math.round(e.x));
$dataY.val(Math.round(e.y));
$dataHeight.val(Math.round(e.height));
$dataWidth.val(Math.round(e.width));
$dataScaleX.val(e.scaleX);
$dataScaleY.val(e.scaleY);
};
this.options.preview = "#preview_" + that.formID;
/*cropper*/
// this.imageCropper.cropper(this.options);
},
//选择了上传的文件
change: function (e) {
if (URL) {
this.imageCropper = $("#img_origin_" + this.formID);
let uploadedImageURL;
let files = e.target.files;
if (files && files.length) {
let file = files[0];
let fileExt = file.name.substring(file.name.lastIndexOf(".") + 1);
const extensionsArr = this.extensions.split(",");
if (extensionsArr.length > 1) {
var reg = new RegExp("^[" + extensionsArr.join("|") + "]+$", "i");
if (!reg.test(fileExt)) {
this._dispatch("promptTip", {type: "warning", info: "请上传图片文件"});
return;
} else {
if (this.crop) {
this.initCropper();
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
uploadedImageURL = URL.createObjectURL(file);
this.imageCropper
.cropper("destroy")
.attr("src", uploadedImageURL)
.cropper(this.options);
this.hasImage = true;
} else {
this.getPolicyOfOSS(file);
}
document.querySelector("#upload_btn_" + this.formID).value = "";
}
}
}
}
},
//取消上传
cancel: function () {
this.hasImage = false;
},
//处理剪裁的文件为Blob对象
handleImageCropped: function () {
let result = this.imageCropper.cropper("getCroppedCanvas");
this.getPolicyOfOSS(
this.convertBase64UrlToBlob(result.toDataURL("image/jpeg"))
);
},
//将base64编码转换为Blob
convertBase64UrlToBlob: function (urlData) {
let bytes = window.atob(urlData.split(",")[1]); //去掉url的头，并转换为byte
//处理异常,将ascii码小于0的转换为大于0
let ab = new ArrayBuffer(bytes.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {type: "image/jpeg", filename: "upload.jpg"});
},
//url转为base64编码
convertImgToBase64: function (url, callback, outputFormat) {
url+='?random='+Math.random();
let canvas = document.createElement("CANVAS"),
ctx = canvas.getContext("2d"),
img = new Image();
img.crossOrigin = "";
// img.setAttribute("crossOrigin", "anonymous");
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL(outputFormat || "image/png");
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
},
//获取上传所需的TOKEN
getPolicyOfOSS: function (blob,fn) {
let that = this;
let data = {
type: this.type,
fetchNum: this.fetchNum,
data: this.bodyData
};
//获取OSS
if(this.isTemp){
$.ajax({
type: "POST",
url: that.url,
headers: {
"Access-Token": that.accessToken,
"Content-Type": "application/json;charset=UTF-8"
},
data: JSON.stringify(data),
success: function (res) {
if (res.code === 200) {
let obj = res.data.token;
let data = {
key: obj.dir,
policy: obj.policy,
OSSAccessKeyId: obj.accessid,
success_action_status: "200",
callback: obj.callback,
signature: obj.signature,
verify: obj.verify,
host: obj.host
};
that.uploadImageToOSS(data, blob,fn);
} else {
}
}
});
}else{
$.ajax({
type: "GET",
url: that.url,
headers: {
"Access-Token": that.accessToken,
"Content-Type": "application/json;charset=UTF-8"
},
success: function (res) {
let obj = res;
let data = {
key: obj.dir,
policy: obj.policy,
OSSAccessKeyId: obj.accessid,
success_action_status: "200",
callback: obj.callback,
signature: obj.signature,
verify: obj.verify,
host: obj.host
};
that.uploadImageToOSS(data, blob,fn);
}
});
}
},
//上传OSS协议
uploadImageToOSS: function (option, blob = "",fn) {
let that = this;
return new Promise((resolve, reject) => {
let formData = new FormData(document.forms[0]); //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
formData.append("key", option.key);
formData.append("policy", option.policy);
formData.append("OSSAccessKeyId", option.OSSAccessKeyId);
formData.append("success_action_status", option.success_action_status);
formData.append("Cache-Control", 'no-cache');
if(option.callback) formData.append("callback", option.callback);
if(option.verify) formData.append("x:verify", option.verify);
formData.append("signature", option.signature);
formData.append("file", blob); //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
let xmlHttpReq = null;
//IE浏览器使用ActiveX
if (window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
//其它浏览器使用window的子对象XMLHttpRequest
xmlHttpReq = new XMLHttpRequest();
}
if (xmlHttpReq !== null) {
//设置回调，当请求的状态发生变化时，就会被调用
xmlHttpReq.onreadystatechange = () => {
//等待上传结果
if (xmlHttpReq.readyState == 1) {
}
// 上传成功，返回的文件名，设置到div的背景中
if (xmlHttpReq.readyState === 4 && xmlHttpReq.status === 200) {
let data = {};
try {
if (xmlHttpReq.statusText == "OK") {
if (xmlHttpReq.responseText) {
data = JSON.parse(xmlHttpReq.responseText);
that._dispatch("changeImage", data.data);
} else {
that._dispatch("changeImage", data.responseURL);
}
that.hasImage = false;
if (fn) fn(data.data);
resolve(data);
}
} catch (e) {
reject({code: 407, data: "数据类型出错"});
that._dispatch("promptTip", {
type: "warning",
info: "图片上传失败"
});
}
}
};
//设置请求（没有真正打开），true：表示异步
xmlHttpReq.open("POST", option.host, true);
//不要缓存
//xmlHttpReq.setRequestHeader("If-Modified-Since", "0");
//提交请求
xmlHttpReq.send(formData);
//清除掉，否则下一次选择同样的文件就进入不到onchange函数中了
}
});
}
}
};
</script>
export default {
url: {
type: String
},
type: {
type: String,
default: 'USER_AVATAR'
},
extensions: {
type: String,
default: 'png,jpg,jpeg,gif,svg,webp'
},
crop: {
type: Boolean,
default: false
},
aspectRatio: {
type: Number,
default: 1
},
uploadBtnClass: {
type: String,
default: ""
},
previewClass: {
type: String,
default: "circle"
},
cropBtn: {
type: Object,
default: function () {
return {
ok: '保存',
cancel: '取消',
}
}
},
isTemp:{
type:Boolean,
default:true
},
uid: {
type: Number,
default: 0
},
accessToken: {
type: String,
default: ""
},
fetchNum: {
type: Number,
default: 1
},
bodyData: {
type: Object,
default: function () {
return {}
}
.crop-cloth{position: fixed;top:0;bottom: 0;left: 0;100%;height:100%;background:rgba(0,0,0,.7);z-index: 1000}
.image-crop-content{position: fixed;left:50%;top:50%;margin-left: -400px;margin-top:-250px;transition: all 0.1s; 800px;height: 500px;z-index: 3000;background-color: #222226;padding:25px;box-shadow: 0 0 3px 1px rgba(0,0,0,.7);transition: all 0.1s;}
.image-crop-content-main{padding: 10px;position: relative;}
.image-crop-content-main .txt{color: #fff;position: absolute;top:8px;right:8px;display: inline-block;186px;text-align: center;font-size: 15.5px;line-height: 30px;}
.img-origin-div{502px;height:372px;border: 1px solid #191919;}
/*.img-origin-div .img-origin{100%;height:100%}*/
/*.img-origin-div img{max-100%;max-height:100%}*/
.img-origin-div img{max-502px;max-height:372px}
.image-crop-foot>span{font-size: 19px;145px;height:40px;letter-spacing: 2px;margin:10px 18px 0 18px;border: 1px solid #121214;cursor: pointer;
background-color:#2F2F34;font-weight: bold;line-height: 38px;vertical-align: top;
}
.image-crop-foot .quit{color: #ff5454;}
.image-crop-foot .save{background-color: #ff5454;border-color: #ff5454;}
.image-crop-foot .save a{color: #27272B!important;display:block;text-decoration: none;font-weight: bold;}
.image-crop-foot span:hover{box-shadow:0 0 0 1px #313035 inset,0 0 0 2px #2B2A2F inset;border:1px solid #39383D;background: #2B2B30;}
.image-crop-foot .save:hover a{color: #ff5454!important;}
/*预览*/
.img-preview-small-div{
142px;
height: 142px;
position: absolute;
top: 50px;
right: 25px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
.img-preview-small{
top: 50px;
}
.img-preview-small.rect .img-preview{186px!important;height:45px!important;}
.img-preview-small.circle{142px!important;height:142px!important;margin-right:24px;border-radius: 50% !important;}
.img-preview-small.circle .img-preview{142px!important;height:142px!important;border-radius: 50% !important;}
/*确认*/
.docs-buttons{text-align: center;}
/*截图界面弹出*/
/*.image-crop-content.show{display: block;transition: all 0.1s;}*/
.file-input-btn{position:absolute;top:0;left:0;overflow:hidden;100%;height:100%;font-size:0;cursor:pointer;opacity:0}
.image-upload-form{100%;height:100%;position:relative}
.image-upload-form input[type="file"]{ 100%;height: 100%;padding:0;margin:0;border:none;position:absolute;top:0;left:0;overflow:hidden;opacity:0;z-index:5000}
/* cropper */
.cropper-container {
direction: ltr;
font-size: 0;
line-height: 0;
position: relative;
-ms-touch-action: none;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cropper-container img {/*Avoid margin top issue (Occur only when margin-top <= -height)
*/
display: block;
height: 100%;
image-orientation: 0deg;
max-height: none !important;
max- none !important;
min-height: 0 !important;
min- 0 !important;
100%;
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.cropper-wrap-box,
.cropper-canvas {
overflow: hidden;
}
.cropper-drag-box {
background-color: #fff;
opacity: 0;
}
.cropper-modal {
background-color: #000;
opacity: .5;
}
.cropper-view-box {
display: block;
height: 100%;
outline-color: rgba(51, 153, 255, 0.75);
outline: 1px solid #39f;
overflow: hidden;
100%;
}
.cropper-dashed {
border: 0 dashed #eee;
display: block;
opacity: .5;
position: absolute;
}
.cropper-dashed.dashed-h {
border-bottom- 1px;
border-top- 1px;
height: 33.33333%;
left: 0;
top: 33.33333%;
100%;
}
.cropper-dashed.dashed-v {
border-left- 1px;
border-right- 1px;
height: 100%;
left: 33.33333%;
top: 0;
33.33333%;
}
.cropper-center {
display: block;
height: 0;
left: 50%;
opacity: .75;
position: absolute;
top: 50%;
0;
}
.cropper-center:before,
.cropper-center:after {
background-color: #eee;
content: ' ';
display: block;
position: absolute;
}
.cropper-center:before {
height: 1px;
left: -3px;
top: 0;
7px;
}
.cropper-center:after {
height: 7px;
left: 0;
top: -3px;
1px;
}
.cropper-face,
.cropper-line,
.cropper-point {
display: block;
height: 100%;
opacity: .1;
position: absolute;
100%;
}
.cropper-face {
background-color: #fff;
left: 0;
top: 0;
}
.cropper-line {
background-color: #39f;
}
.cropper-line.line-e {
cursor: e-resize;
right: -3px;
top: 0;
5px;
}
.cropper-line.line-n {
cursor: n-resize;
height: 5px;
left: 0;
top: -3px;
}
.cropper-line.line-w {
cursor: w-resize;
left: -3px;
top: 0;
5px;
}
.cropper-line.line-s {
bottom: -3px;
cursor: s-resize;
height: 5px;
left: 0;
}
.cropper-point {
background-color: #39f;
height: 5px;
opacity: .75;
5px;
}
.cropper-point.point-e {
cursor: e-resize;
margin-top: -3px;
right: -3px;
top: 50%;
}
.cropper-point.point-n {
cursor: n-resize;
left: 50%;
margin-left: -3px;
top: -3px;
}
.cropper-point.point-w {
cursor: w-resize;
left: -3px;
margin-top: -3px;
top: 50%;
}
.cropper-point.point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px;
}
.cropper-point.point-ne {
cursor: ne-resize;
right: -3px;
top: -3px;
}
.cropper-point.point-nw {
cursor: nw-resize;
left: -3px;
top: -3px;
}
.cropper-point.point-sw {
bottom: -3px;
cursor: sw-resize;
left: -3px;
}
.cropper-point.point-se {
bottom: -3px;
cursor: se-resize;
height: 20px;
opacity: 1;
right: -3px;
20px;
}
@media (min- 768px) {
.cropper-point.point-se {
height: 15px;
15px;
}
}
@media (min- 992px) {
.cropper-point.point-se {
height: 10px;
10px;
}
}
@media (min- 1200px) {
.cropper-point.point-se {
height: 5px;
opacity: .75;
5px;
}
}
.cropper-point.point-se:before {
background-color: #39f;
bottom: -50%;
content: ' ';
display: block;
height: 200%;
opacity: 0;
position: absolute;
right: -50%;
200%;
}
.cropper-invisible {
opacity: 0;
}
.cropper-bg {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}
.cropper-hide {
display: block;
height: 0;
position: absolute;
0;
}
.cropper-hidden {
display: none !important;
}
.cropper-move {
cursor: move;
}
.cropper-crop {
cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
cursor: not-allowed;
}
} }