替换元素功能实现

src/components/EditPanel.vue

@@ -72,7 +72,7 @@
               justify-content: center;
               line-height:28px;">替换元素
               </div>
-              <input style="display: none;" type="file" @click="changeElementBg" multiple="false">
+              <input style="display: none;" type="file"  @change="fileChange" multiple="false">
             </label>
           </div>
         </div>
@@ -325,7 +325,7 @@
                 justify-content: center;
                 line-height:28px;">替换元素
                 </div>
-                <input style="display: none;" type="file" @click="changeElementBg" multiple="false">
+                <input style="display: none;" type="file"  @change="fileChange" multiple="false">
               </label>
             </div>
           </div>
@@ -707,7 +707,7 @@
 
 <script>
 
-
+  import * as http from '../util/http'
   var positionFlag = false
   export default {
     props: {
@@ -1049,9 +1049,48 @@
           that.$message.error("组合失败！")
         }
       },
-      changeElementBg(element) {
-        console.log('地址', element);
+      fileChange(event) {
+        console.log("当前元素",this.element);
+        this.upload(event)
+      },
+      async upload(event) {
+        var that = this;
+        let files = event.target.files
+        if (!files.length) {
+          return false
+        }
 
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        for (var i = 0; i < files.length; i++) {
+          var file = files[i]
+          if (file) {
+            http.uploadMaterielFile(file, function (res) {
+              loading.close();
+              let img = document.createElement('img')
+              img.onload = () => {
+                that.$emit('uploaded', {
+                  'filePath': res,
+                  'width': img.width,
+                  'height': img.height,
+                  'isButton': that.isButton,
+                });
+                that.element.imgSrc = res;
+                that.element.width = img.width;
+                that.element.height = img.height;
+              }
+              img.src = res;
+            }, function (res) {
+              if (res.total.percent == 100 && (files.length == i + 1)) {
+                loading.close();
+              }
+            })
+          }
+        }
       },
     },
     computed: {

src/components/Element/ButtonElement.vue

@@ -59,8 +59,10 @@
       stopEvent: {
         type: Boolean
       },
-      type: ''
+      type: '',
+      isOverView:Boolean
     },
+    
     data() {
       return {
         left: 0,