Merge pull request #24 from lanyulei/dev

修复表单设计器图片上传失败bug。

src/components/VueFormMaking/components/GenerateFormItem.vue

@@ -20,7 +20,7 @@
       <template v-else-if="widget.type=='imgupload'">
         <fm-upload
           v-model="dataModel"
-          :disabled="widget.options.disabled"
+          :disabled="true"
           :style="{'width': widget.options.width}"
           :width="widget.options.size.width"
           :height="widget.options.size.height"
@@ -60,7 +60,7 @@
           </span>
         </el-divider>
       </template>
-      <template v-if="widget.type === 'input' && widget.options.showPassword">
+      <template v-else-if="widget.type === 'input' && widget.options.showPassword">
         <input :value="dataModel" type="password" style="border: none; background-color: #ffffff; color: #303133" disabled="disabled">
       </template>
       <template v-else>

src/components/VueFormMaking/components/Upload/index.vue

@@ -41,262 +41,278 @@
       @click.self="handleAdd"
     >
       <i class="el-icon-plus" :style="{fontSize:miniWidth/4+'px',marginTop: (-miniWidth/8)+'px', marginLeft: (-miniWidth/8)+'px'}" @click.self="handleAdd" />
-      <input v-if="multiple" ref="uploadInput" accept="image/*" multiple type="file" :style="{width: 0, height: 0}" name="file" class="el-upload__input upload-input"
-             @change="handleChange">
+      <input
+        v-if="multiple"
+        ref="uploadInput"
+        accept="image/*"
+        multiple
+        type="file"
+        :style="{width: 0, height: 0}"
+        name="file"
+        class="el-upload__input upload-input"
+        @change="handleChange"
+      >
       <input v-else ref="uploadInput" accept="image/*" type="file" :style="{width:0, height: 0}" name="file" class="el-upload__input upload-input" @change="handleChange">
     </div>
   </div>
 </template>
 
 <script>
-  import Viewer from 'viewerjs'
-  import Draggable from 'vuedraggable'
-  import * as qiniu from 'qiniu-js'
-  require('viewerjs/dist/viewer.css')
-  export default {
-    components: {
-      Draggable
+import Vue from 'vue'
+import Viewer from 'viewerjs'
+import Draggable from 'vuedraggable'
+import * as qiniu from 'qiniu-js'
+require('viewerjs/dist/viewer.css')
+
+import VueI18n from 'vue-i18n'
+Vue.use(VueI18n)
+export default {
+  components: {
+    Draggable
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
     },
-    props: {
-      value: {
-        type: Array,
-        default: () => []
-      },
-      width: {
-        type: Number,
-        default: 100
-      },
-      height: {
-        type: Number,
-        default: 100
-      },
-      token: {
-        type: String,
-        default: ''
-      },
-      domain: {
-        type: String,
-        default: ''
-      },
-      multiple: {
-        type: Boolean,
-        default: false
-      },
-      length: {
-        type: Number,
-        default: 9
-      },
-      isQiniu: {
-        type: Boolean,
-        default: false
-      },
-      isDelete: {
-        type: Boolean,
-        default: false
-      },
-      min: {
-        type: Number,
-        default: 0
-      },
-      meitu: {
-        type: Boolean,
-        default: false
-      },
-      isEdit: {
-        type: Boolean,
-        default: false
-      },
-      action: {
-        type: String,
-        default: ''
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      }
+    width: {
+      type: Number,
+      default: 100
     },
-    data() {
-      return {
-        fileList: this.value.map(item => {
-          return {
-            key: item.key ? item.key : (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999),
-            url: item.url,
-            percent: item.percent ? item.percent : 100,
-            status: item.status ? item.status : 'success'
-          }
-        }),
-        viewer: null,
-        uploadId: 'upload_' + new Date().getTime(),
-        editIndex: -1,
-        meituIndex: -1
-      }
+    height: {
+      type: Number,
+      default: 100
+    },
+    token: {
+      type: String,
+      default: ''
+    },
+    domain: {
+      type: String,
+      default: ''
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    length: {
+      type: Number,
+      default: 9
     },
-    computed: {
-      miniWidth() {
-        if (this.width > this.height) {
-          return this.height
-        } else {
-          return this.width
+    isQiniu: {
+      type: Boolean,
+      default: false
+    },
+    isDelete: {
+      type: Boolean,
+      default: false
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    meitu: {
+      type: Boolean,
+      default: false
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
+    action: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      fileList: this.value.map(item => {
+        return {
+          key: item.key ? item.key : (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999),
+          url: item.url,
+          percent: item.percent ? item.percent : 100,
+          status: item.status ? item.status : 'success'
         }
+      }),
+      viewer: null,
+      uploadId: 'upload_' + new Date().getTime(),
+      editIndex: -1,
+      meituIndex: -1
+    }
+  },
+  computed: {
+    miniWidth() {
+      if (this.width > this.height) {
+        return this.height
+      } else {
+        return this.width
       }
-    },
-    watch: {
-      'fileList': {
-        deep: true,
-        handler(val) {
+    }
+  },
+  watch: {
+    'fileList': {
+      deep: true,
+      handler(val) {
         // this.$emit('input', this.fileList)
-        }
       }
-    },
-    mounted() {
-      this.$emit('input', this.fileList)
-    },
-    methods: {
-      handleChange() {
-        const files = this.$refs.uploadInput.files
-
-        for (let i = 0; i < files.length; i++) {
-          const file = files[i]
-          const reader = new FileReader()
-          const key = (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999)
-          reader.readAsDataURL(file)
-          reader.onload = () => {
-            if (this.editIndex >= 0) {
-              this.$set(this.fileList, this.editIndex, {
-                key,
-                url: reader.result,
-                percent: 0,
-                status: 'uploading'
-              })
+    }
+  },
+  mounted() {
+    this.$emit('input', this.fileList)
+  },
+  methods: {
+    handleChange() {
+      const files = this.$refs.uploadInput.files
 
-              this.editIndex = -1
-            } else {
-              this.fileList.push({
-                key,
-                url: reader.result,
-                percent: 0,
-                status: 'uploading'
-              })
-            }
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+        const reader = new FileReader()
+        const key = (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999)
+        reader.readAsDataURL(file)
+        reader.onload = () => {
+          if (this.editIndex >= 0) {
+            this.$set(this.fileList, this.editIndex, {
+              key,
+              url: reader.result,
+              percent: 0,
+              status: 'uploading'
+            })
 
-            this.$nextTick(() => {
-              if (this.isQiniu) {
-                this.uplaodAction2(reader.result, file, key)
-              } else {
-                this.uplaodAction(reader.result, file, key)
-              }
+            this.editIndex = -1
+          } else {
+            this.fileList.push({
+              key,
+              url: reader.result,
+              percent: 0,
+              status: 'uploading'
             })
           }
+
+          this.$nextTick(() => {
+            if (this.isQiniu) {
+              this.uplaodAction2(reader.result, file, key)
+            } else {
+              this.uplaodAction(reader.result, file, key)
+            }
+          })
         }
-        this.$refs.uploadInput.value = []
-      },
-      uplaodAction(res, file, key) {
-        const changeIndex = this.fileList.findIndex(item => item.key === key)
-        const xhr = new XMLHttpRequest()
+      }
+      this.$refs.uploadInput.value = []
+    },
+    uplaodAction(res, file, key) {
+      // eslint-disable-next-line no-unused-vars
+      const changeIndex = this.fileList.findIndex(item => item.key === key)
+      const xhr = new XMLHttpRequest()
 
-        const url = this.action
-        xhr.open('POST', url, true)
-        // xhr.setRequestHeader('Content-Type', 'multipart/form-data')
+      const url = this.action
+      xhr.open('POST', url, true)
+      // xhr.setRequestHeader('Content-Type', 'multipart/form-data')
 
-        const formData = new FormData()
-        formData.append('file', file)
+      const formData = new FormData()
+      formData.append('file', file)
 
-        xhr.send(formData)
-        xhr.onreadystatechange = () => {
-          if (xhr.readyState === 4) {
-            const resData = JSON.parse(xhr.response)
-            if (resData && resData.url) {
-              this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
-                ...this.fileList[this.fileList.findIndex(item => item.key === key)],
-                url: resData.url,
-                percent: 100
-              })
-              setTimeout(() => {
-                this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
-                  ...this.fileList[this.fileList.findIndex(item => item.key === key)],
-                  status: 'success'
-                })
-                this.$emit('input', this.fileList)
-              }, 200)
-            } else {
+      xhr.send(formData)
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+          const resData = JSON.parse(xhr.response)
+          resData.url = resData.data
+          if (resData && resData.url) {
+            this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
+              ...this.fileList[this.fileList.findIndex(item => item.key === key)],
+              url: resData.url,
+              percent: 100
+            })
+            setTimeout(() => {
               this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
                 ...this.fileList[this.fileList.findIndex(item => item.key === key)],
-                status: 'error'
+                status: 'success'
               })
-              this.fileList.splice(this.fileList.findIndex(item => item.key === key), 1)
-            }
+              this.$emit('input', this.fileList)
+            }, 200)
+          } else {
+            this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
+              ...this.fileList[this.fileList.findIndex(item => item.key === key)],
+              status: 'error'
+            })
+            this.fileList.splice(this.fileList.findIndex(item => item.key === key), 1)
           }
         }
-        xhr.onprogress = (res) => {
-          if (res.total && res.loaded) {
-            this.$set(this.fileList[this.fileList.findIndex(item => item.key === key)], 'percent', res.loaded / res.total * 100)
-          }
+      }
+      xhr.onprogress = (res) => {
+        if (res.total && res.loaded) {
+          this.$set(this.fileList[this.fileList.findIndex(item => item.key === key)], 'percent', res.loaded / res.total * 100)
         }
-      },
-      uplaodAction2(res, file, key) {
-        const _this = this
-        const observable = qiniu.upload(file, key, this.token, {
-          fname: key,
-          mimeType: []
-        }, {
-          useCdnDomain: true,
-          region: qiniu.region.z2
-        })
-        observable.subscribe({
-          next(res) {
-            _this.$set(_this.fileList[_this.fileList.findIndex(item => item.key === key)], 'percent', parseInt(res.total.percent))
-          },
-          error(err) {
-            _this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
-              ..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
-              status: 'error'
-            })
-            _this.fileList.splice(_this.fileList.findIndex(item => item.key === key), 1)
-          },
-          complete(res) {
+      }
+    },
+    uplaodAction2(res, file, key) {
+      const _this = this
+      const observable = qiniu.upload(file, key, this.token, {
+        fname: key,
+        mimeType: []
+      }, {
+        useCdnDomain: true,
+        region: qiniu.region.z2
+      })
+      observable.subscribe({
+        next(res) {
+          _this.$set(_this.fileList[_this.fileList.findIndex(item => item.key === key)], 'percent', parseInt(res.total.percent))
+        },
+        // eslint-disable-next-line handle-callback-err
+        error(err) {
+          _this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
+            ..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
+            status: 'error'
+          })
+          _this.fileList.splice(_this.fileList.findIndex(item => item.key === key), 1)
+        },
+        complete(res) {
+          _this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
+            ..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
+            url: _this.domain + res.key,
+            percent: 100
+          })
+          setTimeout(() => {
             _this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
               ..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
-              url: _this.domain + res.key,
-              percent: 100
+              status: 'success'
             })
-            setTimeout(() => {
-              _this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
-                ..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
-                status: 'success'
-              })
-              _this.$emit('input', _this.fileList)
-            }, 200)
-          }
-        })
-      },
-      handleRemove(key) {
-        this.fileList.splice(this.fileList.findIndex(item => item.key === key), 1)
-      },
-      handleEdit(key) {
-        this.editIndex = this.fileList.findIndex(item => item.key === key)
-
-        this.$refs.uploadInput.click()
-      },
-      handleMeitu(key) {
-        this.$emit('on-meitu', this.fileList.findIndex(item => item.key === key))
-      },
-      handleAdd() {
-        if (!this.disabled) {
-          this.editIndex = -1
-          this.$refs.uploadInput.click()
+            _this.$emit('input', _this.fileList)
+          }, 200)
         }
-      },
-      handlePreviewFile(key) {
-        this.viewer && this.viewer.destroy()
-        this.uploadId = 'upload_' + new Date().getTime()
+      })
+    },
+    handleRemove(key) {
+      this.fileList.splice(this.fileList.findIndex(item => item.key === key), 1)
+    },
+    handleEdit(key) {
+      this.editIndex = this.fileList.findIndex(item => item.key === key)
 
-        this.$nextTick(() => {
-          this.viewer = new Viewer(document.getElementById(this.uploadId))
-          this.viewer.view(this.fileList.findIndex(item => item.key === key))
-        })
+      this.$refs.uploadInput.click()
+    },
+    handleMeitu(key) {
+      this.$emit('on-meitu', this.fileList.findIndex(item => item.key === key))
+    },
+    handleAdd() {
+      if (!this.disabled) {
+        this.editIndex = -1
+        this.$refs.uploadInput.click()
       }
+    },
+    handlePreviewFile(key) {
+      this.viewer && this.viewer.destroy()
+      this.uploadId = 'upload_' + new Date().getTime()
+
+      this.$nextTick(() => {
+        this.viewer = new Viewer(document.getElementById(this.uploadId))
+        this.viewer.view(this.fileList.findIndex(item => item.key === key))
+      })
     }
   }
+}
 </script>
 
 <style lang="scss">