vue+elemnt-ui 实现upload内部传参
<el-form-item label="图片" prop="imageUrl">
<el-upload
ref="upload"
class="upload-demo"
style="width: 100%"
drag
action="#"
:http-request="upload"
:on-change="handlChange"
:before-upload="beforeAvatarUpload"
>
<img v-if="form.imageUrl" :src="form.imageUrl" style="height: 178px;width: 359px" />
<div v-else>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
</div>
</el-upload>
</el-form-item>
JS:
upload(data) { // 上传图片
const _this = this
const reader = new FileReader()
let imageData = null
let imageName = data.file.name
reader.readAsDataURL(data.file)
reader.onload = function(e) {
imageData = this.result.replace(/^data:image\/\w+;base64,/, '') // base64编码
const uploadData = { // 图片数据处理
imageData,
imageName,
imageSourceType: 'hsh-icore-hczlife-life-admin-h5'
}
if (_this.imageStatus) {
_this.FLOATUPLOAD_ACTION({ ...uploadData }).then(res => {
if (res.code === 0) {
_this.$message({message: '上传成功', type: 'success'})
_this.form.imageUrl = res.data
} else {
_this.$message.error('上传失败,请稍后再试')
}
}).catch(e => {
_this.$message.error(`${e.msg || e.message}`)
})
}
}
},
// 图标文件格式检查
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isGIF = file.type === 'image/gif'
// const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG && !isGIF && !isBMP) {
this.$message.error('上传图片只能是".jpg", ".jpeg", ".png", ".gif"格式!')
this.imageStatus = false
} else {
this.imageStatus = true
return
}
// if (!isLt2M) {
// this.$message.error('上传头像图片大小不能超过 2MB!');
// }
// return isJPG && isLt2M;
},
handlChange(file, fileList) {
if (fileList.length > 1) {
fileList.splice(0, 1)
}
},
以上是在做的项目中对图片接口进行内部传参的处理,已实现功能。

浙公网安备 33010602011771号