|
@@ -1,75 +1,128 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-upload
|
|
|
- ref="uploader"
|
|
|
- :action="`/upload?u=${s.u}&t=${s.t}&v=1.0&s=${s.s}`"
|
|
|
- :multiple="false"
|
|
|
- :show-file-list="false"
|
|
|
- accept="image/jpeg,image/png"
|
|
|
- class="image-uploader"
|
|
|
- :drag="drag"
|
|
|
- name="avatar"
|
|
|
- :on-success="handleImageSuccess"
|
|
|
- :before-upload="beforeImageUpload">
|
|
|
- <el-button type="text" style="width: 200px;" class="mt20">
|
|
|
+ <el-upload ref="uploader" :action="`/upload?u=${s.u}&t=${s.t}&v=1.0&s=${s.s}`" :multiple="false"
|
|
|
+ :show-file-list="false" accept="image/jpeg,image/png" class="image-uploader" :drag="drag" name="avatar"
|
|
|
+ :on-success="handleImageSuccess" :http-request="uploadSectionFile" :before-upload="beforeImageUpload">
|
|
|
+ <el-button type="text" style="width: 200px;">
|
|
|
{{placeholder}}
|
|
|
</el-button>
|
|
|
</el-upload>
|
|
|
+
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="图片上传"
|
|
|
+ append-to-body
|
|
|
+ close-on-click-modal
|
|
|
+ :visible.sync="progressFlag"
|
|
|
+ width="450px">
|
|
|
+ <img :src="tempUrl" style="width: 400px;margin: 0 auto;" />
|
|
|
+ <div style="margin: 20px auto;">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent"></el-progress>
|
|
|
+ </div>
|
|
|
+ <div style="margin: 10px auto;text-align: center;">
|
|
|
+ <span style="color: red;">{{progressFlagMsg}}</span>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import md5 from 'js-md5'
|
|
|
+ import axios from 'axios'
|
|
|
export default {
|
|
|
name: 'Upload',
|
|
|
components: {},
|
|
|
props: {
|
|
|
- placeholder:{
|
|
|
+ placeholder: {
|
|
|
type: String,
|
|
|
default: "点击上传基准照片",
|
|
|
},
|
|
|
- drag:{
|
|
|
+ drag: {
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
},
|
|
|
- mins:{
|
|
|
+ mins: {
|
|
|
type: Number,
|
|
|
default: 20,
|
|
|
},
|
|
|
- maxs:{
|
|
|
+ maxs: {
|
|
|
type: Number,
|
|
|
- default: 200,
|
|
|
+ default: 20000,
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
- let s = { u: localStorage.uid||'0', t:Date.now(), v:1.1 }
|
|
|
- s.s = md5( "hall_" + s.v + s.t + '017c0743819088468e590246464cc75f' )
|
|
|
+ let s = {
|
|
|
+ u: localStorage.uid || '0',
|
|
|
+ t: Date.now(),
|
|
|
+ v: 1.1
|
|
|
+ }
|
|
|
+ s.s = md5("hall_" + s.v + s.t + '017c0743819088468e590246464cc75f')
|
|
|
return {
|
|
|
- fileMd5:'',
|
|
|
+ fileMd5: '',
|
|
|
onupload: false,
|
|
|
+ progressPercent: 0,
|
|
|
+ tempUrl: '',
|
|
|
+ progressFlag: false,
|
|
|
+ progressFlagMsg: '',
|
|
|
s
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
beforeImageUpload(file) {
|
|
|
-
|
|
|
+ let _this = this
|
|
|
+ this.progressFlagMsg = ''
|
|
|
+ this.progressFlag = true;
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ reader.onload = function (e) {
|
|
|
+ _this.tempUrl= "data:image/png;base64," + this.result.substring(this.result.indexOf(",") + 1)
|
|
|
+ }
|
|
|
let fileSize = file.size / 1024
|
|
|
- let {maxs,mins} = this;
|
|
|
- if (fileSize > maxs ) {
|
|
|
+ let {
|
|
|
+ maxs,
|
|
|
+ mins
|
|
|
+ } = this;
|
|
|
+ if (fileSize > maxs) {
|
|
|
this.$message.error(`上传文件大小不能超过 ${maxs}KB!`);
|
|
|
+ this.progressFlagMsg = `上传文件大小不能超过 ${maxs}KB!`;
|
|
|
return false
|
|
|
}
|
|
|
- if (fileSize < mins ) {
|
|
|
+ if (fileSize < mins) {
|
|
|
this.$message.error(`上传文件大小不能小于 ${mins}KB!`);
|
|
|
+ this.progressFlagMsg = `上传文件大小不能小于 ${mins}KB!`;
|
|
|
return false
|
|
|
}
|
|
|
file.is_pass = true;
|
|
|
return true;
|
|
|
},
|
|
|
- handleImageSuccess(res) {
|
|
|
- console.log( this.$refs )
|
|
|
- this.$emit("onFinish", res.data.url);
|
|
|
- }
|
|
|
+ uploadSectionFile(params) {
|
|
|
+ const config = {
|
|
|
+ onUploadProgress: (progressEvent) => {
|
|
|
+ this.progressPercent = Number(
|
|
|
+ ((progressEvent.loaded / progressEvent.total) * 90).toFixed(2)
|
|
|
+ );
|
|
|
+ },
|
|
|
+ };
|
|
|
+ let s = this.s
|
|
|
+ let form = new FormData();
|
|
|
+ form.append("avatar", params.file);
|
|
|
+ let url = `/upload?u=${s.u}&t=${s.t}&v=1.0&s=${s.s}`
|
|
|
+ axios.post(url, form, config).then((res) => {
|
|
|
+ let resD = res.data;
|
|
|
+ this.progressPercent = 100;
|
|
|
+ if( resD.code != 200){
|
|
|
+ this.$message.error(resD.data.msg);
|
|
|
+ this.progressFlagMsg = resD.data.msg;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.progressFlag = false
|
|
|
+ this.$emit("onFinish", resD.data.url);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleImageSuccess(res) {
|
|
|
+ console.log(this.$refs)
|
|
|
+ this.$emit("onFinish", res.data.url);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|