整个如下：
import vueCropper from 'vue-cropper'
Vue.use(vueCropper);<template>
<div id="app">
<Cephalosome></Cephalosome>
<div class="subContent user_back">
<div class="location">
<a href="/" class="home">Forums</a>
<a :href="`/aUser${configTool.urlRouter()}/`">用户中心</a>
<a href="javascript:;">编辑资料</a>
</div>
<div class="container aUserEditProfile">
<div class="row">
<div class="col-sm-12">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<section class="auth-main">
<div class="auth-main-heading">
<h2 class="main-heading-title">基本资料</h2>
</div>
<div class="auth-main-body profile-edit">
<a href="javascript:;" data-toggle="modal" data-target="#myModal" class="img-circle main-body-avatar" target="_blank">
<img src="/static/img/common/photo.jpg" alt="" data-taptap-avatar="display">
<span><i></i></span>
</a>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-5 control-label">ID</label>
<div class="col-sm-4">
<span style="display: block;margin-top: 7px;">79410285</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">昵称</label>
<div class="col-sm-4">
<input type="text" name="user_name" id="user_name" class="form-control" value="79410285">
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label" for="mobile">收信手机号</label>
<div class="col-sm-1">
<select name="phone_prefix" class="form-control">
<option value="81">+81</option>
<option value="86">+86</option>
</select>
</div>
<div class="col-sm-3">
<input type="tel" name="phone_number" id="mobile" class="form-control" value="13017932304">
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">邮箱帐号</label>
<div class="col-sm-4">
<input type="tel" name="email_address" id="email_address" class="form-control" value="">
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">生日</label>
<div class="col-sm-4">
<select name="birth_year" id="select_year" class="form-control">
<option value="">年</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
</select>
<select name="birth_month" id="select_month" class="form-control birth_">
<option value="">月</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="birth_day" id="select_day" class="form-control birth_">
<option value="">日</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label" for="gender">性别</label>
<div class="col-sm-5">
<select name="gender_id" id="gender" class="form-control">
<option value="" selected="">-请选择-</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label" for="intro">简介</label>
<div class="col-sm-5">
<input type="text" name="introduction" id="intro" class="form-control" value="" maxlength="30" placeholder="用一句话展示你的个性留言（最多30个字）">
</div>
</div>
<div class="col-sm-5 col-sm-offset-5">
<button type="submit" class="btn btn-primary taptap-button-download">保存</button>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">上传头像</h4>
</div>
<div class="modal-body">
<div class="show-info">
<div class="test">
<vueCropper
ref="cropper2"
:img="example2.img "
:outputSize="example2.size"
:outputType="example2.outputType"
:info="example2.info"
:canScale="example2.canScale"
:autoCrop="example2.autoCrop"
:autoCropWidth="example2.autoCropWidth"
:autoCropHeight="example2.autoCropHeight"
:fixed="example2.fixed"
:fixedNumber="example2.fixedNumber"
></vueCropper>
</div>
<label class="btn btn-primary" for="upload2">上传</label>
<input type="file" id="upload2" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event,2)">
<button @click="finish2()" style="margin-left: 13px;" type="button" class="btn btn-primary">保存</button>
</div>
</div>
<div class="modal-footer">
<button type="button" style="display: none" class="btn btn-default" data-dismiss="modal" ref="close">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
</div>
<Bottom></Bottom>
<!--<ul class="depth02">-->
<!--<li><a href="/ceshi2/?boardNo=2">测试页面,打包之后可用的写法{{ss}}</a></li>-->
<!--<li><a href="/ceshi2.html/?boardNo=2">测试页面，dev 的时候可用的写法{{ss}}</a></li>-->
<!--</ul>-->
</div>
</template>
<style lang="scss">
@import "../../assets/scss/user";
</style>
<script>
import Cephalosome from "../../components/Cephalosome"
import Bottom from "../../components/Bottom"
import {P_LIST_TEST} from '../../config/api'
export default {
name: 'app',
components: {
Cephalosome,
Bottom
},
data(){
return{
ss:23423432,
list:{},
loding: true,
example2: {
//img的路径自行修改
img: '$oss.url + \'/\' + form.head ',
info: true,
size: 1,
outputType: 'jpeg',
canScale: true,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 300,
autoCropHeight: 225,
fixed: true,
// 真实的输出宽高
infoTrue: true,
fixedNumber: [4, 3]
},
downImg: '#'
}
},
mounted(){
// this.$get(P_LIST_TEST,{name:1212}).then(res => {
// if(res.code==200){
// this.list=res.data;
// this.loding=false;
// window.console.log(res,'res')
// }
//
// })
},
methods:{
//点击裁剪，这一步是可以拿到处理后的地址
finish2 () {
this.$refs.cropper2.getCropData((data) => {
this.modelSrc = data
//裁剪后的图片显示
this.example2.img = this.modelSrc;
window.console.log( this.example2.img)
this.$refs.close.click()
//阿里云处理图片，项目的接口，这里可以不用，上面的地址打印即为base64的地址
// this.$api.random(random => {
// this.$api.upload.oss(data => {
// new OSS.Wrapper({
// //这里应该是有自己的配置的
// region: 'oss-cn-hangzhou',
// accessKeyId: data.accessKeyId,
// accessKeySecret: data.accessKeySecret,
// stsToken: data.securityToken,
// bucket: 'zhiyuan-hz'
// }).put(random.uuid,new Buffer(this.example2.img)).then(data => {
// this.form.head = data.name;
// this.modelSrc = this.form.head;
// console.log(this.modelSrc)
// }).catch(function (err) {
// console.error('error: %j', err);
// });
// });
// },{});
// console.log(this.modelSrc)
})
},
uploadImg (e, num) {
//上传图片
this.example2.img = ''
var file = e.target.files[0]
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
return false
}
var reader = new FileReader()
reader.onload = (e) => {
let data
data = e.target.result
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data = window.URL.createObjectURL(new Blob([e.target.result]))
} else {
data = e.target.result
}
if (num === 1) {
this.option.img = data
} else if (num === 2) {
this.example2.img = data
}
}
// 转化为base64
// reader.readAsDataURL(file)
// 转化为blobcs
reader.readAsArrayBuffer(file)
},
test(){
}
}
}
</script>
<style scoped>
.show-info {
/*margin-bottom: 50px;*/
text-align: right;
}
.show-info h2 {
line-height: 50px;
}
/*.title, .title:hover, .title-focus, .title:visited {
color: black;
}*/
.title {
display: block;
text-decoration: none;
text-align: center;
line-height: 1.5;
margin: 20px 0px;
background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
color: transparent;
-webkit-background-clip: text;
background-size: 200% 100%;
animation: slide 5s infinite linear;
font-size: 40px;
}
.test {
height: 285px;
margin-bottom: 20px;
}
.model {
position: fixed;
z-index: 10;
width: 100vw;
height: 100vh;
overflow: auto;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}
.model-show {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.model img {
display: block;
margin: auto;
max-width: 80%;
user-select: none;
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}
.c-item {
display: block;
padding: 10px 0;
user-select: none;
}
@keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
@media screen and (max-width: 1000px) {
.content {
max-width: 90%;
margin: auto;
}
.test {
height: 400px;
}
}
</style>
结果：
