前言
用户上传图片,利用后端返回的数据实现图片展示,
实现效果:
实现代码:
<el-form-item label="印章:" prop="imgFile">
<el-upload
class="upload-demo"
drag
v-model="addForm.imgFile"
action=""
:before-upload="handleBeforeUpload"
:http-request="handleUpload"
accept=".jpg,.png"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过2kb</div>
</el-upload>
</el-form-item>
<div v-if="item.prop === 'images' && scope.row[item.prop] !== null">
<img :src="'data:image/jpg;base64,' + scope.row[item.prop]" alt="印章">
</div>
<span v-else>{{ scope.row[item.prop] }}</span>
<script>
data () {
return{
addForm: {
imgFile: ''
}
},
handleBeforeUpload (file) {
if (file.size > 2 * 1024) {
this.$message({
type: 'warning',
message: '选择文件过大啦~~'
})
return false
}
},
handleUpload (data) {
this.addForm.imgFile = data.file
}
</script>