el-upload上传文件并上传到服务端

1. 使用element-ui 的 el-upload 进行上传

• 注意：:http-request 指令的使用
  使用该指令， :on-success, :on-error 指令是不会触发的

• http-request 覆盖默认的上传行为，可以自定义上传的实现

• 但是需要将 action置空，action=""

<el-upload
              action=" "
              :show-file-list="false"
              :http-request="uploadFiles"
            >
              <div class="upload">
                <img
                  class="smallImg"
                  src="@/assets/images/whiteCap/icon_gaitouxian.png"
                />
                <div>修改头像</div>
              </div>
</el-upload>

• methods,调用请求方法
  @params 参数：是http-request 指定自带的成功回调参数。

async uploadFiles(param) {
      const res = await uploadFiles({ upload: param.file });
      console.log(res);
      if(res.status == "200" && res.data.retStatus == "000") {
        this.userInfo.headPortrait = res.data.retBody.attach;
      }
      // console.log(param.file);
    },

• request.js 封装请求函数
  设置为 multipart/form-data 表单类型。

//文件上传接口：
export const uploadFiles = (data) => {
  return service({
    url: '/API/nsps/common/uploadFiles',
    method: 'post',
    data,
    contentType: "multipart/form-data",
  })
}

• 需要对表单数据就行统一格式化
  在axios请求拦截器统一设置

//请求拦截
service.interceptors.request.use((config) => {
    //统一处理表单格式
    if (config.contentType === "multipart/form-data") {
        //formData 表示表单数据的键值对 key/value 的构造方式
        const formData = new FormData();
        //这里遍历一下 因为有可能除了upload 还有其他参数的嘛
        for (let key in config.data) {
            //再一个个append进去
            formData.append(key, config.data[key]);
        }
        //重新赋值给config.data -------return出去
        config.data = formData;
        //这里设置multipart/form-data 表单传数据需要的contentType
        config.headers["Content-Type"] = config.contentType;
    }
    config.responseType && (config.responseType = "blob");
    return config;
})