照片上传

src/views/backstage/customMgt/customTabulate/add.vue

@@ -38,12 +38,24 @@
       </el-form-item>
       <el-form-item label="营业执照：" class="form-cell">
         <div class="cell-box">
-          <el-input v-model="formData.picFileName" style="width:160px;" placeholder="请上传图片" disabled />
-          <input type="file" name="image" @change="excelImport($event)">
+          <el-upload
+            action="/api/bsw/users/updateBusinessLicense"
+            name="businessLicense"
+            list-type="picture-card"
+            :headers="uploadHeaders"
+            :limit="2"
+            :on-exceed="handleExceed"
+            :on-success="excelImported"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+          >
+            <i class="el-icon-plus" />
+          </el-upload>
+          <el-dialog append-to-body :visible.sync="dialogImageVisible">
+            <img width="100%" :src="dialogImageUrl">
+          </el-dialog>
         </div>
-        <el-image v-show="formData.picFileName" :src="formData.picFileName?imgSrcStart+'/businessLicense/'+formData.picFileName:''" :preview-src-list="[imgSrcStart+'/businessLicense/'+formData.picFileName]" style="width: 300px;">
-          <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
-        </el-image>
+        {{ formData.picFileName }}
       </el-form-item>
       <el-form-item label="统一社会信用代码：" class="form-cell" prop="xxxxx">
         <div class="cell-box">
@@ -150,13 +162,17 @@
   </el-dialog>
 </template>
 <script>
+import { getToken } from '@/utils/auth'
 import { HttpReq } from '@/api/common.js'
 
 export default {
   dicts: ['industry_type', 'supplier_rank', 'company_type', 'business_status'],
   data() {
     return {
+      uploadHeaders: { 'Authorization': getToken() },
       imgSrcStart: process.env.VUE_APP_BASE_API,
+      dialogImageUrl: '',
+      dialogImageVisible: false,
       visible: false,
       title: '客户信息',
       provinceOpts: [],
@@ -195,26 +211,45 @@ export default {
       this.hideView()
     },
     submitForm() {
-      this.$refs.formViewRef.validate(valid => {
+      this.$refs.formViewRef.validate((valid, obj) => {
         if (valid) {
           console.log(this.formData)
+        } else {
+          this.$message({
+            message: '表单信息有误，请核对无误后提交！',
+            type: 'error'
+          })
         }
       })
     },
-    excelImport(event) {
-      const file = event.target.files[0]
-      const formData = new FormData()
-      formData.append('businessLicense', file)
-      HttpReq.backstageApi.uploadBusinessLicense(formData).then((res) => {
+    handleExceed() {
+      this.$message({
+        message: '超出最大上传数量限制',
+        type: 'info'
+      })
+    },
+    handleRemove(file, fileList) {
+      const arr = []
+      fileList.forEach(item => {
+        arr.push(item.response.businessLicense)
+      })
+      this.formData.picFileName = arr.join(';')
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogImageVisible = true
+    },
+    excelImported(response, file, fileList) {
       this.$nextTick(() => {
-          this.formData.picFileName = res.businessLicense
+        const arr = this.formData.picFileName ? this.formData.picFileName.split(';') : []
+        arr.push(response.businessLicense)
+        this.formData.picFileName = arr.join(';')
         this.$notify({
           title: '上传成功！',
           type: 'success',
           duration: 2500
         })
       })
-      })
     },
     findAreaByCodeAndType(code, type, optsName) {
       switch (optsName) {