'normal'

src/components/upload/index.vue

@@ -1,13 +1,16 @@
 <template>
   <div>
-    <el-upload action="#"
+    <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"
-      :on-exceed="handleExceed"
-      :on-change="onFrontImgChange"
-      :before-upload="beforeUpload">
+      :drag="drag"
+      name="avatar"
+      :on-success="handleImageSuccess"
+      :before-upload="beforeImageUpload">
       <el-button type="primary" style="width: 200px;" class="mt20">
         {{placeholder}}
       </el-button>
@@ -16,9 +19,7 @@
 </template>
 
 <script>
-  import SparkMD5 from 'spark-md5'
-  import { uploadImg } from "@/components/httpServer/httpServer.js";
-  import { compressImg } from "../util.js";
+  import md5 from 'js-md5'
   export default {
     name: 'Upload',
     components: {},
@@ -27,6 +28,10 @@
         type: String,
         default: "点击上传基准照片",
       },
+      drag:{
+        type: Boolean,
+        default: false,
+      },
       mins:{
         type: Number,
         default: 20,
@@ -37,13 +42,17 @@
       },
     },
     data() {
+      let s = { u: localStorage.uid||'0', t:Date.now(), v:1.1 }
+      s.s = md5( "hall_" + s.v + s.t + '017c0743819088468e590246464cc75f' )
       return {
         fileMd5:'',
         onupload: false,
+        s
       }
     },
     methods: {
-      beforeUpload(file) {
+      beforeImageUpload(file) {
+
         let fileSize = file.size / 1024
         let {maxs,mins} = this;
         if (fileSize > maxs ) {
@@ -57,45 +66,10 @@
         file.is_pass = true;
         return true;
       },
-      handleExceed( event ){
-        console.log('handleExceed', event)
-      },
-      onFrontImgChange:function(file, fileList){
-      	const _this = this  //this指向问题
-      	var fileReader = new FileReader();
-      	var dataFile = file.raw;
-      	//console.log(file)
-      	let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
-      	var spark = new SparkMD5();
-      	fileReader.readAsBinaryString(dataFile)
-
-      	//异步执行函数
-      	fileReader.onload = function(e){
-          spark.appendBinary(e.target.result);
-          var md5 = spark.end()
-          _this.fileMd5 = md5;
-          if( !_this.onupload){
-            console.log('start', _this.fileMd5)
-            _this.onupload = true
-            _this.handleUpload( md5, file.raw )
-          }else{
-            console.log("skip", _this.fileMd5 )
-          }
-      	}
-      },
-      handleUpload( rand, file ) {
-        if( !file.is_pass ) return;
-        let that = this
-        const formData = new FormData()
-        formData.append('avatar', file )
-        this.$message.successMsg('文件开始上传!', 1);
-        uploadImg( that.fileMd5, formData ).then( res=>{
-         that.onupload = false
-         if( res.code== 200){
-           that.$emit('onFinish', res.data.url)
-         }
-        })
-      }
+       handleImageSuccess(res) {
+         console.log( this.$refs )
+          this.$emit("onFinish", res.data.url);
+       }
     }
   }
 </script>

src/containers/center/market/index.vue

@@ -120,8 +120,8 @@
         </el-row>
 
         <el-form-item prop="buyImg">
-          <img :src="buyForm.buyImg" :onerror="errorImg" class="setting-img" @click="showImg(buyForm.buyImg)">
-          <do-upload @onFinish="uploadBuyImg" :mins="50" :maxs="500" placeholder="上传支付凭证"> </do-upload>
+          <img :src="buyForm.buyImg" :onerror="errorImg" class="setting-img" width="500px" @click="showImg(buyForm.buyImg)">
+          <do-upload @onFinish="uploadBuyImg" :mins="50" :maxs="2000" placeholder="上传支付凭证"> </do-upload>
         </el-form-item>
 
         <el-form-item class="tc">
@@ -312,6 +312,7 @@
         this.width = width + "px";
       },
       getData() {
+        if( !this.type) return;
         let param = {
           size: this.size,
           type: this.type,