瀏覽代碼

修改 上传图片不能回显问题

chenrui 4 年之前
父節點
當前提交
1e4bc90a34
共有 3 個文件被更改,包括 94 次插入123 次删除
  1. 89 120
      src/components/UploadFile/index.vue
  2. 2 1
      src/views/CarWashManagement/AddCarWashModal.vue
  3. 3 2
      vue.config.js

+ 89 - 120
src/components/UploadFile/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="upload-file" :style="{width: maxNums>1?'100%':'auto'}">
-    <!-- <a-upload
+    <!-- previewFile 暂时去掉,否则不能正常回显 -->
+    <a-upload
       :action="action"
       :listType="listType"
       :fileList="fileList"
       @preview="handlePreview"
       @change="handleChange"
       :beforeUpload="beforeUpload"
-      :preview-file="previewFile"
       :data="params"
       :value="comVal"
     >
@@ -22,21 +22,6 @@
     <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
       <video v-if="fileType=='video/mp4'" controls="controls" style="width: 100%" :src="previewImage" />
       <img v-else alt="example" style="width: 100%" :src="previewImage" />
-    </a-modal> -->
-    <a-upload
-      :action="action"
-      list-type="picture-card"
-      :file-list="fileList"
-      @preview="handlePreview"
-      @change="handleChange"
-    >
-      <div v-if="fileList.length < maxNums && listType=='picture-card'">
-        <a-icon type="plus" />
-        <div class="ant-upload-text">{{ upText }}</div>
-      </div>
-    </a-upload>
-    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
-      <img alt="example" style="width: 100%" :src="previewImage" />
     </a-modal>
   </div>
 </template>
@@ -111,114 +96,98 @@ export default {
     }
   },
   methods: {
-    handleCancel() {
-      this.previewVisible = false;
+    setFileList (a) {
+      const temp = []
+      if (a && a.length > 0) {
+        a.split(',').map((item, index) => {
+          if (item) {
+            temp.push({
+              uid: index,
+              name: item,
+              status: 'done',
+              url: item,
+              response: {
+                data: item
+              }
+            })
+          }
+        })
+      }
+      this.fileList = temp
+    },
+    handleCancel () {
+      this.previewVisible = false
+    },
+    handlePreview (file) {
+      if (this.listType == 'text') {
+        return
+      }
+      console.log(file,'8888888888')
+      this.previewImage = file.url || file.thumbUrl
+      // this.previewImage = file.response.data
+      this.previewVisible = true
     },
-    async handlePreview(file) {
-      if (!file.url && !file.preview) {
-        file.preview = await getBase64(file.originFileObj);
+    handleChange ({ file, fileList }) {
+      if (file.status == 'error') {
+        this.$message.error('上传失败,请重试!')
+        return
       }
-      this.previewImage = file.url || file.preview;
-      this.previewVisible = true;
+      this.fileList = this.validaFile(file, fileList)
+      this.$emit('change', this.formatFile())
     },
-    handleChange({ fileList }) {
-      this.fileList = fileList;
+    // 格式化文件列表数据,给表单
+    formatFile () {
+      const a = this.fileList
+      const temp = []
+      if (a && a.length) {
+        a.map(item => {
+          if (item.response && item.status == 'done') {
+            temp.push(item.response.data)
+          }
+        })
+      }
+      return temp.join(',')
     },
-    // setFileList (a) {
-    //   const temp = []
-    //   if (a && a.length > 0) {
-    //     a.split(',').map((item, index) => {
-    //       if (item) {
-    //         temp.push({
-    //           uid: index,
-    //           name: item,
-    //           status: 'done',
-    //           url: item,
-    //           response: {
-    //             data: item
-    //           }
-    //         })
-    //       }
-    //     })
-    //   }
-    //   this.fileList = temp
-    // },
-    // handleCancel () {
-    //   this.previewVisible = false
-    // },
-    // handlePreview (file) {
-    //   if (this.listType == 'text') {
-    //     return
-    //   }
-    //   console.log(file,'8888888888')
-    //   this.previewImage = file.url || file.thumbUrl
-    //   // this.previewImage = file.response.data
-    //   this.previewVisible = true
-    // },
-    // handleChange ({ file, fileList }) {
-    //   if (file.status == 'error') {
-    //     this.$message.error('上传失败,请重试!')
-    //     return
-    //   }
-    //   this.fileList = this.validaFile(file, fileList)
-    //   this.$emit('change', this.formatFile())
-    // },
-    // // 格式化文件列表数据,给表单
-    // formatFile () {
-    //   const a = this.fileList
-    //   const temp = []
-    //   if (a && a.length) {
-    //     a.map(item => {
-    //       if (item.response && item.status == 'done') {
-    //         temp.push(item.response.data)
-    //       }
-    //     })
-    //   }
-    //   return temp.join(',')
-    // },
-    // // 文件校验
-    // validaFile (file, filesList) {
-    //   if (filesList.length == 0) {
-    //     return []
-    //   }
-
-    //   console.log(file, filesList, this.beforeUpload(file, 0))
-    //   if (!this.beforeUpload(file, 0) && file.status != 'removed') {
-    //     const index = filesList.findIndex(item => item.uid == file.uid)
-    //     filesList.splice(index, 1)
-    //   }
-    //   return filesList || []
-    // },
-    // // 上传前校验
-    // beforeUpload (file, tip) {
-    //   // 不限制
-    //   if (this.fileType == '*') {
-    //     return true
-    //   }
-
-    //   const isType = this.fileType.indexOf(file.type) >= 0 && file.type != ''
-    //   if (!isType) {
-    //     if (tip != 0) {
-    //       this.$message.error('请上传正确的格式!')
-    //     }
-    //     return isType
-    //   }
-
-    //   // 文件大小
-    //   const isLt2M = file.size / 1024 / 1024 < this.fileSize
-    //   if (!isLt2M ) {
-    //     if (tip != 0) {
-    //       if (this.fileType !='video/mp4') {
-    //         this.$message.error('图片不能超过 ' + this.fileSize + 'MB!')
-    //       } else {
-    //         this.$message.error('视频不能超过 ' + this.fileSize + 'MB!')
-    //       }
-    //     }
-    //     return isLt2M
-    //   }
+    // 文件校验
+    validaFile (file, filesList) {
+      if (filesList.length == 0) {
+        return []
+      }
 
-    //   return true
-    // }
+      console.log(file, filesList, this.beforeUpload(file, 0))
+      if (!this.beforeUpload(file, 0) && file.status != 'removed') {
+        const index = filesList.findIndex(item => item.uid == file.uid)
+        filesList.splice(index, 1)
+      }
+      return filesList || []
+    },
+    // 上传前校验
+    beforeUpload (file, tip) {
+      // 不限制
+      if (this.fileType == '*') {
+        return true
+      }
+      const isType = this.fileType.indexOf(file.type) >= 0 && file.type != ''
+      if (!isType) {
+        if (tip != 0) {
+          this.$message.error('请上传正确的格式!')
+        }
+        return isType
+      }
+      // 文件大小
+      const isLt2M = file.size / 1024 / 1024 < this.fileSize
+      if (!isLt2M ) {
+        if (tip != 0) {
+          if (this.fileType !='video/mp4') {
+            this.$message.error('图片不能超过 ' + this.fileSize + 'MB!')
+          } else {
+            this.$message.error('视频不能超过 ' + this.fileSize + 'MB!')
+          }
+        }
+        return isLt2M
+      }
+      return true
+    }
   }
 }
 </script>

+ 2 - 1
src/views/CarWashManagement/AddCarWashModal.vue

@@ -38,7 +38,7 @@
             <a-form-model-item label="网点照片" prop="icon" class="default-form-item">
               <a-row>
                 <a-col :span="8">
-                  <Upload ref="showPicture" :fileSize="5" :maxNums="1" @change="pictureChange" listType="picture-card" upText="上传图片"></Upload>
+                  <Upload v-model="form.icon" ref="showPicture" :fileSize="5" :maxNums="1" @change="pictureChange" listType="picture-card" upText="上传图片"></Upload>
                 </a-col>
                 <a-col :span="16">
                   <p class="pic-remarks">(尺寸为100*100px)</p>
@@ -348,6 +348,7 @@
       //  保存
       onSubmit(){
         const _this = this
+        console.log(this.form,'-----提交前表单')
         _this.$refs.ruleForm.validate(valid => {
           if (valid) {
             let formData = JSON.parse(JSON.stringify(_this.form))

+ 3 - 2
vue.config.js

@@ -108,8 +108,9 @@ const vueConfig = {
     // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
     proxy: {
       '/api': {
-        target: 'http://192.168.16.102:8101/cw-admin/',
-        // target: 'https://zyyc.chelingzhu.com/cw-admin/',
+        // target: 'http://192.168.16.104:8101/cw-admin/',
+        // target: 'http://192.168.16.100:8101/cw-admin/',
+        target: 'http://carwash.test.zyucgj.com/cw-admin/',
         ws: false,
         changeOrigin: true,
         pathRewrite: {