elementUI上傳圖片通過action

首先說一下這個功能的寫法沒有錯，但是感覺不太好，

正常流程應該是把圖片資源文件上傳到服務器保存，上傳服務器成功后會有一條路徑

然后在進行調取后端接口把傳到服務器成功后的路徑放到對應的位置傳給后端,先記錄一下

結構

<el-upload
  :action="actionsUrl" //上傳圖片的路徑
  :show-file-list="false"
  :on-success="handleAvatarSuccess" //上傳成功的回調
   name="fileName" //name值必須有
  :limit="1" //限制上傳數量
>
  <img
    v-if="this.ruleForm.img"
    :src="this.ruleForm.img"
    class="avatar"
  /> //圖片的位置
  <i v-else class="el-icon-plus avatar-uploader-icon"></i> //小圖標
</el-upload>

data

ruleForm:{
    img:""，//圖片的綁定需要用它賦值地址

　　　 actionsUrl: "/api" + "/grouplesson/edit" //地址最好是拼接一下

}

事件

 handleAvatarSuccess(res, file) {
　　 //這里是如果成功了參數中有相關信息關於地址的然后在賦值就可以
　　 //然后成功后在把this.ruleForm.img傳給后端

     this.ruleForm.img = res.data.filePath

 },

css

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 95px;
    height: 95px;
    line-height: 95px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }
  .avatar {
    width: 95px;
    height: 95px;
  }