<el-upload
action="/"
:http-request="uploadIdcard2"
:file-list="fileList"
list-type="picture-card"
:auto-upload="true">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
_________________________________
import { upLoad } from '@/libs/upLoad'
data() {
return {
dialogImageUrl: "",
dialogVisible: false,
fileList: [], //缓存区文件
houseId: this.$route.query.houseId,
};
},
methods: {
async uploadIdcard2 (params) {
const res = await upLoad(params, 'busFile')
let idc_img2 = ''
idc_img2 = res.data.length > 0 ? res.data[0].fileUrl : ''
this.fileList.push({url: idc_img2})
console.log(idc_img2)
},
}
'@/libs/upLoad'
import { uploadFile } from '@/api/public_api'
import { Notification } from 'element-ui'
export const upLoad = async (params, type) => {
if (!type) type = 'busFile'
console.log('文件参数:======================', params)
const file = params.file
const fileType = file.type
const isImage = fileType.indexOf('image') != -1
const isLt5M = file.size / 1024 / 1024 < 5
// 这里常规检验,看项目需求而定
if (!isImage) {
this.$message.error('只能上传图片格式png、jpg、gif!')
return
}
if (!isLt5M) {
this.$message.error('只能上传小于5M的图片')
return
}
const myform = new FormData()
myform.append(type + '-' + file.name, file)
const result = await uploadFile(myform)
if (result.code !== 200) {
Notification.error({
title: '错误',
message: result.message
})
return false
}
return result
}