自己写的文件上传files

做法：

　　本地图片上传后，把上传的图片转为base64，和表单数据一起提交

 

成品：

 

            image
              v-if="this.isDisabled"
              style="width: 114px; height: 114px"
              :src="formShow.logoImg"
              class="img-avatar"
              fit="fill"
            >
              
暂无
            
            
else>
              

                

                  if="formShow.logoImg" :src="formShow.logoImg" class="avatar" />

                  else class="el-icon-plus avatar-uploader-icon">
                  <input
                    @change="onFileChange"
                    type="file"
                    id="upload"
                    name="file"
                    class="el-upload__input"
                  />
                
              
            
          



 blobToDataURL(blob, cb) {
      let reader = new FileReader();
      reader.onload = function(evt) {
        var base64 = evt.target.result;
        cb(base64);
      };
      reader.readAsDataURL(blob);
    },
    onFileChange(e) {
      let type = e.target.files[0].type.split("/")[1];
      const file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      const result = /(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(type);
      if (result && file.size<=100*1024) {
        this.blobToDataURL(e.target.files[0], res => {
          this.formShow.logoImg = res;
        });
        this.isUploaded = true;
        document.getElementById("upload").value = null;
      } else if(file.size>100*1024) {
        this.$message.error("上传图片不能超过100k,请重新上传")
      }else{
        this.$message.error("图片类型必须是.gif,jpeg,jpg,png中的一种");

      }
    },
    uploadFile() {
      document.getElementById("upload").click();
    },

css 代码：

.avatar-uploader .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: 114px;

  height: 114px;

  line-height: 114px;

  text-align: center;

}

.avatar {

  width: 114px;

  height: 114px;

  display: block;

}

.img-avatar /deep/ .image-slot {

  width: 114px;

  height: 114px;

  line-height: 114px;

  text-align: center;

  background: #f5f7fa;

  color: #c0c4cc;

}

 

 

文件上传中的e.target.files[0].size中size的单位是byte，1024byte = 1kb

 

img标签的url属性可以直接解析base64