|
- <template>
- <div style="margin-top:10px">
- <div class="coverText">1.裁剪图片,图片大小需在2M以内.</div>
- <div class="coverText">2.鼠标滚轮可以伸缩图片展示区大小.</div>
- <div class="coverText" style="margin-bottom:5px;">{{information}}</div>
- <div class="contianer">
- <vueCropper ref="cropper" :img="option.img" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth"
- :autoCropHeight="option.autoCropHeight" :canScale="option.canScale" :outputSize="option.size"
- :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox"
- :fixedBox="option.fixedBox" :original="option.original" :fixed="option.fixed" :fixedNumber="option.fixedNumber"
- @realTime="realTime">
- </vueCropper>
- </div>
- <div class="buttonBox"></div>
- <span class="input-file">请选择
- <input class="choiceImg" type="file" name="file" @change="changeEt" value="1" />
- </span>
- <!-- <div class="finish" @click="finish('blob')">保存图片</div> -->
- <el-button class="finish" :loading="submitButton" type="primary" @click="finish('blob')">保存图片</el-button>
- <span class="msg">{{msg}}</span>
- </div>
- </template>
-
- <script>
- import AjaxUtil from "../../../core/tool/ajaxService";
- import vueCropper from 'vue-cropper'
- export default {
- components: {
- vueCropper
- },
- props: ["fname", "url", "completedCallback", "vtype", "option"],
- name: "FileUpload",
- // props: {
- // viewImg: {
- // url: {
- // type: String,
- // default: ''
- // },
- // scale: {
- // type: Number,
- // default: 1 / 1
- // },
- // label: {
- // type: String,
- // default: ''
- // }
- // }
- // },
- data() {
- return {
- submitButton:false,
- msg:"",
- information:'',
- imgUrl: '',
- // option: {
- // img: '',
- // size: 1,
- // full: false,
- // outputType: 'png',
- // canMove: true,
- // fixedBox: false,
- // original: false,
- // canMoveBox: false,
- // canScale: false,
- // autoCrop: true,
- // autoCropWidth: 200,
- // autoCropHeight: 200,
- // // // 开启宽度和高度比例
- // fixed: true,
- // fixedNumber: [1, 1]
- // },
- crap: false,
- previews: {},
- files: ''
- }
- },
- methods: {
- changeEt: function (e) {
- var file = e.target.files[0]
- if (!file) return;
- if (/^image\/\w+$/.test(file.type)) {
- let uploadedImageURL = URL.createObjectURL(file);
- this.files = file
- this.option.img = uploadedImageURL;
- }
- },
- // 实时预览函数
- realTime(data) {
- this.previews = data
- console.log( JSON.stringify(this.option))
- if(this.option.propertion=='4/3'){
- this.information = '3.宽高比约4:3效果最佳(例:宽800px,高600px)'
- }else if(this.option.propertion=='1/1'){
- this.information = '3.宽高比约1:1效果最佳(例:宽400px,高400px)'
- }else if(this.option.propertion=='8/3'){
- this.information = '3.宽高比约8:3效果最佳(例:宽800px,高300px)'
- }
- },
- changeImg() {
- this.option.img = this.lists[~~(Math.random() * this.lists.length)].img
- },
- startCrop() {
- // start
- this.crap = true
- this.$refs.cropper.startCrop()
- },
- stopCrop() {
- // stop
- this.crap = false
- this.$refs.cropper.stopCrop()
- },
- clearCrop() {
- // clear
- this.$refs.cropper.clearCrop()
- },
- finish(type) {
- this.$refs.cropper.getCropBlob((data) => {
- let blob = data
- let formData = new FormData()
- formData.append('file', blob, this.files.name)
- this.msg = '',
- this.submitButton = true;
- this.uploadFetch(this.url, formData).then((result) => {
- this.submitButton = false;
- this.$message.success('保存成功');
- this.showLoading = false;
- this.completedCallback({
- success: true,
- data: result
- });
- }).catch((err) => {
- this.submitButton = false;
- this.msg = "上传失败,图片超2M或上传超时";
- this.completedCallback({
- success: false,
- data: err
- });
- });
- })
- }
- },
- mounted() {
-
- }
-
- }
- </script>
- <style scoped>
- .msg{
- margin-top: 38px;
- display: block;
- color: red;
- font-size: 12px;
- }
- img{
- max-width: 100%;
- }
- .buttonBox{
- overflow: hidden;
- }
- .contianer {
- width: 375px;
- height: 200px;
- position: relative;
- border-radius: 4px;
- }
-
- .show-preview {
- position: absolute;
- left: 405px;
- bottom: 0px;
- background-color: white;
- border-radius: 4px;
- color: #2c7;
- }
-
- .show-text {
- position: absolute;
- left: 0;
- top: -30px;
- font-size: 14px;
- color: #333;
- width: 200px;
- }
-
- .imgFile {
- cursor: pointer;
- }
-
- .input-file {
- float: left;
- position: relative;
- overflow: hidden;
- text-align: center;
- border: 1px #999 solid;
- background-color: #fff;
- border-radius: 4px;
- padding: 7px 10px;
- font-size: 12px;
- font-weight: normal;
- line-height: 24px;
- color: #fff;
- text-decoration: none;
- display: block;
- width: 120px;
- color: #666;
- margin: 20px 20px 0 0;
- }
-
- .input-file input[type="file"] {
- cursor: pointer;
- position: absolute;
- height: 38px;
- display: block;
- top: 0;
- right: 0;
- font-size: 14px;
- background-color: #f00;
- /*transform: translate(-300px, 0px) scale(4);*/
- /* height: 100%;
- width: 100%; */
- opacity: 0;
- filter: alpha(opacity=0);
- }
-
- .finish {
- float: left;
- margin-top: 20px;
- margin-right: 20px;
- width: 120px;
- height: 40px;
- font-size: 12px;
- background-color: #2c7;
- text-align: center;
- color: white;
- border-radius: 4px;
- cursor: pointer;
- border: 1px #2c7 solid;
- }
-
- .coverText {
- font-size: 12px !important;
- color: #999 !important;
- font-weight: lighter;
- height: 20px;
- line-height: 20px;
- }
- </style>
- <style>
- .crop-info[data-v-7b077dd1]{
- display: none;
- }
- </style>
-
-
- <!-- Add "scoped" attribute to limit CSS to this component only -->
|