vue,Element Ui 如何上傳圖片，圖片的使用方法

1.首先用到< el-upload>這個組件，來上傳身份證

2.添加保存，取消按鈕

<ul>

       <li>

             <span class="info-spand info-left">身份證（人面像）:</span>

             <el-upload

                    class="avatar-uploader"

                    :action="admin()+'/rosterMain/uploadImg'"

                    :show-file-list="false"

                    :on-success="handleAvatarSuccess1"

                    :before-userQuitPic="beforeAvatarUpload"

                  >

                    <img v-if="userFrontalPic" :src="userFrontalPic" class="avatar" />

                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>

              </el-upload>

       </li>

</ul>

<div class="but">

         <el-button size="small" type="primary" @click="materialedit">保存</el-button>

         <el-button size="small" @click="infotype11=true">取消</el-button>

</div>

 

3.添加方法

   methods:{

　　admin() {

　　//主要是獲取接口地址的，可以替換成自己的

　　}，

　　

//個人材料編輯

    materialedit() {

      var material = {};

      material.rosterId = this.rosterId;

      material.userFrontalPic = this.userFrontalPic;

      material.userBackPic = this.userBackPic;

      material.userEducationPic = this.userEducationPic;

      material.userAcadPic = this.userAcadPic;

      material.userQuitPic = this.userQuitPic;

      material.userPic = this.userPic;

      editPic(material)

        .then((data) => {

          this.$message({

            type: "success",

            message: "恭喜你，信息修改成功",

          });

          this.infotype11 = true;

        })

        .catch((err) => {

          this.$message({ message: err });

        });

    },

 

}