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) } },
以上是在做的项目中对图片接口进行内部传参的处理,已实现功能。