2021-03-10

使用el-upload和post请求上传图片

步骤:
1.设置post请求头格式

modifyNickAndAvatar = (data,success)=>{
    service({
        url:'users/modifyNickAndAvatar?',
        method:'post',
        headers:{
            'Content-Type':'multipart/form-data'  
        },
        data
    }).then(res =>{
        success(res);
    }).catch(err=>{
        throw err
    })
}

2.el-upload代码如下：

<el-upload
ref='upload'
action="#"
:http-request="selectPicUpload"
:data="{staff_nick_name,staff_id}"
:on-change="myFileUpload"
:limit="1"
:auto-upload="false">
		<i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
         <img  class="el-upload-list__item-thumbnail"
         :src="file.url" alt="">
       </div>
</el-upload> 
<div class="username">更改用户名
<el-input placeholder="请输入内容" v-model="staff_nick_name " clearable class="pwd_ipt"></el-input>
</div>
<div class="modify_button" @click="ModifyNickBtn">确认修改</div>

（1）action可以不写路径，因为用:http-request="selectPicUpload"自定义了上传方法，但不能为空，随便写个占位符。
（2）:data属性是携带的数据，也可以在自定义方法里面放在构造的对象里。
（3）:on-change是当文件添加或上传文件时会调用的方法，可以在这里获取到添加的文件信息。
（4）:auto-upload，当使用http-request实现自定义方法时，该属性也要给个false值。

实现http-request方法

      selectPicUpload(obj){
          let fd = new FormData(); //参数的格式是formData格式的
          fd.append("file", obj.file); //参数
          fd.append('staff_id',this.staffInfo.staff_id)
          fd.append('staff_nick_name',this.staff_nick_name)
          modifyNickAndAvatar(fd,(res)=>{
            console.log(res)
          })
      },

      ModifyNickBtn(){
        // 判用户名和头像都空就提示
        if(this.staff_nick_name == '' && this.fileList.url == ''){
            this.$message({
            showClose: true,
            message: '请输入修改内容!',
            type: 'error'
            }); 
        }else {
        //会自动执行自定义的方法 selectPicUpload
          this.$refs.upload.submit();
        }

   },