long
2021-02-02 36b71142347dc524e18fa24c5ffdffff0d02287a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<template>
  <div>
    <!-- 上传图片组件(单图) -->
    <el-upload
      ref="refUploadImg"
      :accept="accept"
      :auto-upload="false"
      list-type="picture-card"
      :class="{disabled:uploadDisabled}"
      action="#"
      :limit="1"
      :file-list="uploadImgs"
      :on-change="addUploadImg"
      :on-remove="delUploadImg"
      :http-request="uploadImg"
      :on-preview="uploadPreview"
      :before-upload="beforeUploadImg"
      size="mini"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- upload放大图片 -->
    <el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center">
      <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
    </el-dialog>
  </div>
</template>
 
<script>
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
export default {
  mixins: [mixin_upload],
  model: {
    prop: 'uploadImgs',
    event: 'change'
  },
  props: {
    uploadImgs: {
      type: Array,
      default: () => {
        return []
      }
    },
    accept: {
      type: String,
      default: () => {
        return 'image/jpeg,image/jpg,image/gif,image/png'
      }
    }
 
  },
 
  data() {
    return {
      callback: null
    }
  },
  computed: {
    uploadDisabled() {
      return this.uploadImgs.length > 0
    }
  },
 
  methods: {
    // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前确认格式
    beforeUploadImg(file) {
      const isImg = file.type.indexOf('image/') > -1
      const isTooLarge = file.size / 1024 / 1024 > 4
      let flag = true
      if (!isImg) {
        this.$message.error('必须是选择图片文件')
        flag = false
      } else if (isTooLarge) {
        this.$message.error('请勿上传大于4MB的图片')
        flag = false
      }
      return flag
    },
    // 增加图片
    addUploadImg(file, fileList) {
      this.$emit('change', fileList)
    },
    // 删除图片
    delUploadImg(file, fileList) {
      this.$emit('change', fileList)
    },
    // 执行上传商品图
    runUploadImg(suc_cb) {
      console.log('runUploadImg!!!!!')
      if (this.checkNeedUpload(this.uploadImgs)) {
        this.callback = suc_cb
        this.$refs.refUploadImg.submit()
      } else {
        suc_cb && suc_cb()
      }
    },
    // 上传商品图
    uploadImg(res) {
      console.log(res)
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      console.log(formData)
      this.postFN({
        url: 'admin/image/upload?folderCode=IMG',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            imgUrl: 'xxxx'
          }
        }
      }, (inf) => {
        console.log('上传图片成功')
 
        // 替换掉未上传的图片
        this.$emit('change', [{ url: inf.imgUrl, status: 'success' }])
 
        console.log('上传图片结束')
 
        // 提交
        // this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
        this.callback && this.callback(inf.imgUrl)
      })
    }
    // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
  }
}
</script>
 
<style>
.disabled .el-upload--picture-card {
    display: none;
}
.el-upload-list--picture-card{
  line-height: 1;
}
.el-upload-list--picture-card .el-upload-list__item{
  margin-bottom: 0
}
</style>