upload如何上传图片

141 阅读1分钟

upload上传图片

<el-form-item label="微信默认头像" prop="defaultUserAvatar">
  <el-upload
    class="gebi_img_icon_slide"
    :auto-upload="false"
    :show-file-list="false" multiple
    accept="image/jpg,image/png,image/jpeg"
    list-type="picture-card"
    :on-change="imgWxChange"
  >
    <el-image v-if="imageIcon" :src="imageIcon" class="avatar"></el-image>
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</el-form-item>

选择图片保存

imgWxChange(file, fileList) {
  const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB
  if (!isLt2M) {
    this.$message.error('图片选择失败,每张图片大小不能超过 2MB,请重新选择!')
    return;
  } else {
    this.imageIconFile = file;
    console.log('选择图片',this.imageIconFile);
    this.imageIcon = URL.createObjectURL(file.raw);
  }
}

ps:记得打开弹框前给this.imageIcon赋当前值