优化报废图片上传问题

sgzb-ui/src/api/system/upload.js

@@ -1,27 +1,27 @@
 import request from '@/utils/request'
 //资源图片上传
-export function imgUpLoad(param){
+export function imgUpLoad(param) {
-    const formData = new FormData()
+  const formData = new FormData()
-    formData.append('file', param.file)
+  formData.append('file', param.file)
-    formData.append('fileType', param.type)
+  formData.append('fileType', param.type)
-    return request({
+  return request({
-      url: '/system/sys/file/upload',
+    url: '/system/sys/file/upload',
-      method: 'post',
+    method: 'post',
-      data: formData,
+    data: formData,
-      header:'multipart/form-data'
+    header: 'multipart/form-data'
-    })
+  })
-  }
+}
 
 //资源文件上传
-export function fileUpLoad(param){
+export function fileUpLoad(param) {
-    const formData = new FormData()
+  const formData = new FormData()
-    formData.append('file', param.file)
+  formData.append('file', param.file)
-    return request({
+  return request({
-      url: '/system/sys/file/upload',
+    url: '/system/sys/file/upload',
-      method: 'post',
+    method: 'post',
-      data: formData,
+    data: formData,
-    })
+  })
-  }
+}
 
 
 

sgzb-ui/src/components/ImagePreview/index.vue

@@ -34,8 +34,6 @@ export default {
                 return
             }
             let real_src = this.src.split(',')[0]
-
-            console.log(this.src, '图片地址--')
             return real_src
         },
         realSrcList() {

sgzb-ui/src/views/repairTest/repair/upload.vue

@@ -1,106 +1,110 @@
 <template>
-  <el-upload
+    <el-upload
-    class="upload-demo"
+        class="upload-demo"
-    :action="actionUrl"
+        :action="actionUrl"
-    :on-preview="handlePreview"
+        :on-preview="handlePreview"
-    :on-remove="handleRemove"
+        :on-remove="handleRemove"
-    :before-remove="beforeRemove"
+        :before-remove="beforeRemove"
-    :multiple="multiple"
+        :multiple="multiple"
-    :limit="limit"
+        :limit="limit"
-    :on-exceed="handleExceed"
+        :on-exceed="handleExceed"
-    :file-list="fileList"
+        :file-list="fileList"
-    :headers="headers"
+        :headers="headers"
-    :on-success="handleSuccess"
+        :on-success="handleSuccess"
-    :data="uploadData"
+        :data="uploadData"
-    :before-upload="beforeUpload"
+        :before-upload="beforeUpload"
-  >
+    >
-    <slot name="default">
+        <slot name="default">
-      <el-button size="small" type="primary">点击上传</el-button>
+            <el-button size="small" type="primary">点击上传</el-button>
-    </slot>
+        </slot>
-    <!-- <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div> -->
+        <!-- <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div> -->
-  </el-upload>
+    </el-upload>
 </template>
 
 <script>
 import { getToken } from '@/utils/auth'
 export default {
-  name: 'UploadFile',
+    name: 'UploadFile',
-  props: {
+    props: {
-    fileList: {
+        fileList: {
-      type: Array,
+            type: Array,
-      default: () => [],
+            default: () => [],
+        },
+        actionUrl: {
+            type: String,
+            default: 'https://jsonplaceholder.typicode.com/posts/',
+        },
+        limit: {
+            type: Number,
+            default: 3,
+        },
+        // uploadTip: {
+        //   type: String,
+        //   default: '只能上传jpg/png文件，且不超过500kb'
+        // },
+        multiple: {
+            type: Boolean,
+            default: true,
+        },
     },
-    actionUrl: {
+    data() {
-      type: String,
+        return {
-      default: 'https://jsonplaceholder.typicode.com/posts/',
+            uploadImgUrl:
+                process.env.VUE_APP_BASE_API + '/dev-api' + this.actionUrl,
+            headers: {
+                Authorization: 'Bearer ' + getToken(),
+            },
+            uploadData: {
+                fileType: 'sx',
+            },
+        }
     },
-    limit: {
+    methods: {
-      type: Number,
+        handleRemove(file, fileList) {
-      default: 3,
+            this.$emit('remove', file, fileList)
+        },
+        handleSuccess(response, file, fileList) {
+            this.$emit('success', response, fileList)
+        },
+        handlePreview(file) {
+            this.$emit('preview', file)
+        },
+        handleExceed(files, fileList) {
+            this.$message.warning(
+                `当前限制选择 ${this.limit} 个文件，本次选择了 ${
+                    files.length
+                } 个文件，共选择了 ${files.length + fileList.length} 个文件`,
+            )
+            this.$emit('exceed', files, fileList)
+        },
+        beforeRemove(file, fileList) {
+            // return this.$confirm(`确定移除 ${file.name} ？`)
+            //   .then(() => {
+            //     this.$emit('before-remove', file, fileList)
+            //   })
+            //   .catch(() => {})
+        },
+        beforeUpload(file) {
+            console.log('file', file)
+            const isJPGorPNG =
+                file.type == 'image/png' ||
+                file.type == 'image/jpg' ||
+                file.type == 'image/jpeg'
+            const isLt5M = file.size / 1024 / 1024 < 5 // 小于 5MB
+            if (!isJPGorPNG) {
+                this.$message.error('只能上传 jpg、jpeg、png  格式的图片')
+            }
+            if (!isLt5M) {
+                this.$message.error('上传图片大小不能超过 5MB')
+            }
+            return isJPGorPNG && isLt5M
+        },
     },
-    // uploadTip: {
-    //   type: String,
-    //   default: '只能上传jpg/png文件，且不超过500kb'
-    // },
-    multiple: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      uploadImgUrl: process.env.VUE_APP_BASE_API + '/dev-api' + this.actionUrl,
-      headers: {
-        Authorization: 'Bearer ' + getToken(),
-      },
-      uploadData: {
-        fileType: 'sx',
-      },
-    }
-  },
-  methods: {
-    handleRemove(file, fileList) {
-      this.$emit('remove', file, fileList)
-    },
-    handleSuccess(response, file, fileList) {
-      this.$emit('success', response, fileList)
-    },
-    handlePreview(file) {
-      this.$emit('preview', file)
-    },
-    handleExceed(files, fileList) {
-      this.$message.warning(
-        `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-          files.length + fileList.length
-        } 个文件`
-      )
-      this.$emit('exceed', files, fileList)
-    },
-    beforeRemove(file, fileList) {
-      // return this.$confirm(`确定移除 ${file.name} ？`)
-      //   .then(() => {
-      //     this.$emit('before-remove', file, fileList)
-      //   })
-      //   .catch(() => {})
-    },
-    beforeUpload(file) {
-      console.log('file', file)
-      const isJPGorPNG = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg'
-      const isLt5M = file.size / 1024 / 1024 < 5 // 小于 5MB
-      if (!isJPGorPNG) {
-        this.$message.error('只能上传 jpg、jpeg、png  格式的图片')
-      }
-      if (!isLt5M) {
-        this.$message.error('上传图片大小不能超过 5MB')
-      }
-      return isJPGorPNG && isLt5M
-    },
-  },
 }
 </script>
 
 <style scoped>
 .upload-demo .el-upload__tip {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 </style>