图片上传

最新推荐文章于 2024-03-17 20:35:51 发布

xlx0403

最新推荐文章于 2024-03-17 20:35:51 发布

阅读量236

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xlx0403/article/details/80568264

本文详细介绍了 Element UI 中的图片上传组件使用方法。包括如何设置上传限制、触发上传事件、处理上传前的文件验证及自定义上传数据等。通过具体代码示例展示了如何实现单张图片的上传功能，并在上传前对文件类型、大小进行检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 <el-upload
class="upload-demo"
:auto-upload="false"
:limit = "1"
ref="iconUpload"
:before-upload="beforeIconUpload"
list-type="picture-card" enctype="multipart/form-data">
<el-button size="small" type="text">上传图片</el-button>
<div slot="tip" class="el-upload__tip">文件大小不超过2M，支持格式：JPG、JPEG、PNG、BMP，最多上传1张。</div>

</el-upload>

2、在上传的表单的确定按钮的方法中：_this.$refs.iconUpload.submit()

submitEdit(){

//submitEdit是一个按钮的点击事件，用这个点击事件来触发ref里的文件上传事件 $refs是一个上传文件的集合，所以得加s .submit()就是这里的一个固定写法

this.$refs.iconUpload.submit()

3、 beforeIconUpload(file){
var _this = this
let fd = new FormData()
fd.append('file',file)
fd.append('jsonData',JSON.stringify(this.addForm.jsonData))
addSecondLevelAll(fd).then(res =>{
if(res.data.success == true && res.status == 200){
_this.$message.success('添加特权限制条件成功')
_this.handleQuery()
_this.addDlsg = false
_this.addForm.jsonData = {
channelId: 1,
privilegeId: '',
privilegeTypeId: '',
privilegeTypeName: '',
remarks: '',
useType: '',
numberPrices: [{
conditionsNumber:1,
price:10
}]
}
}
})

}

4、data里定义的对象格式

form: {

file:'',

jsonData:{

// 三级特权条件id

id: '',

privilegeImage:'../../assets/404_images/cs1.png',

// 渠道id

channelId: 1,

// 说明

remarks: '',

// 限制数量

conditionsNumber: '',

// 特权价格

price: ''

}

下面是上传图片并显示图片

<el-form-item prop="circleHead" label="圈子头像：">
<el-upload
class="avatar-uploader"
:show-file-list="false"
name="filename"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
enctype="multipart/form-data">
<img v-if="imageUrl" :src="form.circleHead" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>