uypdate

examples/sofia-form/file.js

@@ -29,6 +29,9 @@ export default {
           'file_type': 10,
           'project_id': 1001
         },
+        'attrs': {
+          'multiple': true
+        },
         'html': `
           <div style="color: #72818c; font-size: 14px;">
             <p style="margin: 0;">申请者需要将有效身份证件原件扫描或者拍照后提交。</p>

src/components/elem-form/upload-form/elemInfo.md

@@ -3,7 +3,8 @@
 |  字段值  | 说明                       | 字段属性 | 默认值 |
 | ------- | ------------------------- | ------- | ----- |
 | `type`  | 类型：`String`; 说明：组件类型名 | 自定义字段 | `upload-form` |
-| `action`  | 类型：`String`; 说明：请求接口path | 自定义字段 | `` |
+| `action`  | 类型：`String`; 说明：上传请求接口path | 自定义字段 | `` |
+| `deleteAction`  | 类型：`String`; 说明：删除请求接口path | 自定义字段 | `` |
 | `html`  | 类型：`String`; 说明：上传说明，支持html | 自定义字段 | `` |
 | `label` | 类型：`String`; 说明：组件左侧显示名称 | element-ui el-form-item对应字段 | `''` |
 | `label-width` | 类型：`String`; 说明：组件左侧显示名称宽度（加单位），父级设置可以子级继承 | element-ui el-form-item对应字段 | `''` |
@@ -24,11 +25,13 @@
   'required': true,
   'disabled': false,
   'model': 'real_name_cn',
-  'model-width': '',
-  'placeholder': '请输入姓名',
   'action': '',
   'data': {
 
+  },
+  'deleteAction': '',
+  'deleteData': {
+
   },
   'html': `
     <div style="color: #72818c; font-size: 14px;">
@@ -45,13 +48,7 @@
   'rules': [
     {
       'required': true,
-      'message': '请输入姓名',
-      'trigger': 'blur'
-    },
-    {
-      'min': 3,
-      'max': 5,
-      'message': '长度在 3 到 5 个字符',
+      'message': '请上传',
       'trigger': 'blur'
     }
   ]

src/components/elem-form/upload-form/src/ajax.js

+function getError(action, option, xhr) {
+  let msg
+  if (xhr.response) {
+    msg = `${xhr.response.error || xhr.response}`
+  } else if (xhr.responseText) {
+    msg = `${xhr.responseText}`
+  } else {
+    msg = `fail to post ${action} ${xhr.status}`
+  }
+
+  const err = new Error(msg)
+  err.status = xhr.status
+  err.method = 'post'
+  err.url = action
+  return err
+}
+
+function getBody(xhr) {
+  const text = xhr.responseText || xhr.response
+  if (!text) {
+    return text
+  }
+
+  try {
+    return JSON.parse(text)
+  } catch (e) {
+    return text
+  }
+}
+
+export default function upload(option) {
+  if (typeof XMLHttpRequest === 'undefined') {
+    return
+  }
+
+  const xhr = new XMLHttpRequest()
+  const action = option.action
+
+  if (xhr.upload) {
+    xhr.upload.onprogress = function progress(e) {
+      if (e.total > 0) {
+        e.percent = e.loaded / e.total * 100
+      }
+      option.onProgress(e)
+    }
+  }
+
+  const formData = new FormData()
+
+  if (option.data) {
+    Object.keys(option.data).forEach(key => {
+      formData.append(key, option.data[key])
+    })
+  }
+
+  formData.append(option.filename, option.file, option.file.name)
+
+  xhr.onerror = function error(e) {
+    option.onError(e)
+  }
+
+  xhr.onload = function onload() {
+    if (xhr.status < 200 || xhr.status >= 300) {
+      return option.onError(getError(action, option, xhr))
+    }
+
+    option.onSuccess(getBody(xhr))
+  }
+
+  xhr.open('post', action, true)
+
+  if (option.withCredentials && 'withCredentials' in xhr) {
+    xhr.withCredentials = true
+  }
+
+  const headers = option.headers || {}
+
+  for (let item in headers) {
+    if (headers.hasOwnProperty(item) && headers[item] !== null) {
+      xhr.setRequestHeader(item, headers[item])
+    }
+  }
+  xhr.send(formData)
+  return xhr
+}

src/components/elem-form/upload-form/src/uploadForm.vue

@@ -13,12 +13,13 @@
         :action="item.action"
         :data="item.data"
         :before-upload="beforeUploadFile"
+        :on-success="onSuccessFile"
         :with-credentials="true"
         v-bind="item.attrs || {}">
         <el-button type="primary">点击上传</el-button>
         <template v-if="formData[item.model]">
           <!-- 遍历显示文件 -->
-          {{successFileUrl.replace(/.*\/([^\/]*\.docx)$/gi, '$1')}}
+
         </template>
       </el-upload>
       <div class='info' style="line-height: 1.5;" v-html="item.html"></div>
@@ -35,6 +36,8 @@
 </template>
 
 <script>
+// import ajax from './ajax'
+
 export default {
   name: 'UploadForm',
   componentName: 'UploadForm',
@@ -54,40 +57,13 @@ export default {
   },
   data () {
     return {
-      successFileUrl: '',
-      filesArr: [],
-      file: {
-        id: 'WU_FILE_0',
-        name: '',
-        type: '',
-        lastModifiedDate: '',
-        size: '',
-        file: ''
-      }
+      filesArr: []
     }
   },
   methods: {
-    handleChange (file, filelist) {
-      this.file.name = file.raw.name
-      this.file.type = file.raw.type
-      this.file.lastModifiedDate = file.raw.lastModifiedDate
-      this.file.size = file.raw.size
-      this.file.file = file.raw
-    },
-    beforeUploadFile (file) {
+    beforeUploadFile (file) {},
+    onSuccessFile (response, file, fileList) {
       debugger
-    },
-    uploadFile () {
-      // if (!/\.(docx)$/gi.test(this.file.name)) {
-      //   this.$message.error('文件格式不对，请重新上传')
-      //   this.filesArr.pop()
-      //   return
-      // }
-      // const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
-      // cAction.chapterAction.uploadFile(this.file).then(data => {
-      //   this.successFileUrl = data.url
-      //   this.filesArr.pop()
-      // }).catch(e => { this.filesArr.pop(); this.$message.error(e.message) }).finally(() => { loading.close() })
     }
   }
 }