日常小问题记录

1.解决关于calc属性不生效的问题

错误写法：height: calc(100%- 200px)

因为css的运算符"+ - * /"左右两边均要留空格

正确写法：height: calc(100% - 200px)

 

2.el-upload 自定义上传

<el-upload
            v-if="diaIsShow"
            :class="{ hide: hideUploadEdit }"
            ref="upload"
            class="avatar-uploader"
            action
            :auto-upload="false"
            :http-request="Upload"
            list-type="picture-card"
            :limit="1"
            :before-upload="beforeAvatarUpload"
            :on-remove="handlePicRemove"
            :on-success="handleAvatarSuccess"
            :on-change="changeAvatarUpload"
          >
            <img
              v-if="formData.headImg"
              :src="formData.headImg"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

    // 文件上传成功时的钩子
    handleAvatarSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
    //文件上传前的校验
    beforeAvatarUpload(file) {
      // 请求后台接口拿配置参数
      return new Promise((resolve, reject) => {
        getAliOSSConfig()
          .then(response => {
            this.dataObj = response.data.obj; //接口返回配置参数

            resolve(true);
          })
          .catch(err => {
            console.log(err);
            reject(false);
          });
      });
    },
    //文件改变
    changeAvatarUpload(file, fileList) {
      this.hideUploadEdit = fileList.length >= 1;
    },
    /* 上传后和删除后都要判断是否隐藏 */
    handlePicRemove(file, fileList) {
      // 大于1张隐藏
      this.hideUploadEdit = fileList.length >= 1;
    },
    // http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
    Upload(file) {
      const that = this;
//直接上传到阿里云
      async function multipartUpload() {
        let temporary = file.file.name.lastIndexOf(".");
        let fileNameLength = file.file.name.length;
        let fileFormat = file.file.name.substring(
          temporary + 1,
          fileNameLength
        );
        let fileName = getFileNameUUID() + "." + fileFormat;

        client(that.dataObj)
          .multipartUpload(`User/${fileName}`, file.file, {
            progress: function(p) {
              //p进度条的值

              that.showProgress = true;
              that.progress = Math.floor(p * 100);
            }
          })
          .then(result => {
            //上传成功返回值，可针对项目需求写其他逻辑

            that.formData.headImg =
              "服务器上的地址" + result.name;
            
            that.isCreatUser(that.editType);
          })
          .catch(err => {
            console.log(err);
          });
      }
      multipartUpload();
    },

    submitUpload() {//点击上传按钮
      //点击确认上传
      this.$refs.upload.submit();
    }

2.1修改文件名去上传

//修改文件名上传文件
beforeUpload(file) {
    const timeStamp = new Date() - 0
    const copyFile = new File([file], `${timeStamp}_${file.name}`)
    this.uploadFile(copyFile)
    return false
}
uploadFile(file) {
      const formdata = new FormData();
      formdata.append("lbf-file-upload", file);
      formdata.append("name", "lbf-file-upload");
      console.log(file);
      this.postForm(formdata);
    },