【vue+elementUI】重写文件上传方法
<template>
<div>
<el-upload
action="upload"
:http-request="handleUploadFile"
ref="upload
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
accept=".png,.jpg,.jpeg"
class="el-form-item">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="pictureList" alt="">
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
pircturList = [],
dialogVisible = false
}
},
methods: {
handleUploadFile (params) {
const that = this
const _file = params.file
const isLt2M = _file.size / 1024 / 1024 < 2
const api = '/api/upload'
let param = new FormData()
param.append('file', _file)
if (!isLt2M) {
that.$message.error('请上传2M以下的图片文件(*.png/*.jpg/*.jpeg)')
return false
}
that.$api.post(api, param, r => {
console.log(r)
})
},
// 删除图片
handleRemove (file, fileList) {
console.log(file, fileList)
},
// 预览图片
handlePictureCardPreview (file) {
this.RFQData.certList = file.url
this.dialogVisible = true
},
}
}
</script>