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