vue上传图片

<el-form-item label="员工人像">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            ref="uploadimgs"
            :http-request="uploadPortrait"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
</el-form-item>

//上传人像
    uploadPortrait(option) {
      console.log(option, "人像信息");
      let formData = new FormData();
      formData.append("file", option.file);
      //调接口
      upLoad(formData).then((res) => {
        console.log(res, "人像上传！");
        console.log(res.picUrl, "上传的人像地址！");
        //table区域显示图片
        this.ruleForm.portrait = res.picUrl;
        //查看区域显示图片
        this.src = res.picUrl;
        this.srcList.push(res.picUrl);
        //打印
        console.log(this.ruleForm.portrait, "ruleForm的src");
        console.log(this.src, this.srcList, "查看抽屉的人像");
        this.$message({
          message: "上传成功",
          type: "success",
        });
      });
    },

控制台打印： 效果图：