el-upload 图片转base4
/** * 将上传的图片文件转为base64格式 * @param {file} file */ Vue.prototype._getBase64 = function (file) { return new Promise((resolve, reject) => { const reader = new FileReader() let imgResult = '' reader.readAsDataURL(file) reader.onload = () => { imgResult = reader.result } reader.onerror = error => reject(error) reader.onloadend = () => resolve(imgResult) }) }
<el-form-item label="图标" prop="imageUrl"> <el-upload class="avatar-uploader" action="#" :auto-upload="false" :show-file-list="false" :on-change="getAvatar" > <img v-if="floatSettingRuleForm.imageUrl" :src="computedImgUrl" class="avatar" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i> <div slot="tip" class="el-upload__tip"> <p>支持扩展名:jpg/jpeg/png</p> <p>建议图片大小:192*192</p> </div> </el-upload> </el-form-item>
async getAvatar(file) { let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名 // accept=".jpg,.jpeg,.png" if (!["jpg", "png", "jpeg"].includes(suffix)) return this.$message.error("请上传jpg/jpeg/png后缀名图片"); const [error, res] = await this.errorCaptured(this._getBase64, file.raw); if (error) return; const params = { type: "1", img: res }; this._floatUpload(params); },
// 上传图片接口 async _floatUpload(params) { const [error, res] = await this.errorCaptured( this.$api.floatUpload, params ); if (error) return; // 拿到后台返回的图片相对地址,然后发出请求图片链接的请求 const imgUrl = res.data; this.floatSettingRuleForm.imageUrl = imgUrl; },
computed: { computedImgUrl() { // return window.location.origin + this.floatSettingRuleForm.imageUrl; return ( window.location.origin + "/social-share-manager/float_setting/getImg?token=" + this.floatSettingRuleForm.imageUrl ); }, }, /data里面数据/ floatSettingRuleForm: { id: "", cityCode: "", cityName: "", imageUrl: "", //imageUrl appName: "", androidPackageName: "", iosLinkUrl: "", iosSchema: "", },
.avatar-uploader { border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } /deep/.el-upload--text { border: 1px dashed #d9d9d9; width: 192px; height: 192px; } /deep/ .el-upload--text:hover { border-color: #409eff; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 192px; height: 192px; line-height: 192px; text-align: center; } .avatar { width: 192px; height: 192px; display: block; } .el-upload__tip { p { font-size: 12px; line-height: 24px; } }