element中el-upload自定义上传图片,不再使用active上传

el-upload默认的上传会通过active进行上传,同时提供了http-request去自定义,他会覆盖active的上传。

 <el-upload
                  id="school"
                  class="avatar-uploader"
                  action="#"
                  list-type='picture'
                  :http-request='fileValueChange'
                  :show-file-list="false">
                  <img v-if="addlistform.coverPicture &&addlistform.coverPicture.length>0" :src="addlistform.coverPicture" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <!-- <div slot="tip" class="el-upload__tip">只能上传png图片</div> -->
              </el-upload>
methods:{
      // 上传图片 --新增
      fileValueChange(val){
         console.log(val);
            var formData = new FormData()
            formData.append( 'file',val.file)
            formData.append( 'type', "head");
            formData.append('fileType',2);
            formData.append('createUser',"");
            insertUploadFileRecord(formData).then(res=>{
                console.log(res);
                //这里就是上传成功了,insertUploadFileRecord函数是封装的上传请求,
                //formData是上传的参数
                this.addlistform.coverPictureId=res.body.id;//图片id
                this.addlistform.coverPicture=res.body.url;//图片地址
            })
        },
 }

你可能感兴趣的:(element-ui,小功能,问题汇总,vue.js,javascript,前端)