自己写的文件上传files

做法：

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

成品：

<el-form-item label="公司LOGO" prop="url">
            <el-image
              v-if="this.isDisabled"
              style="width: 114px; height: 114px"
              :src="formShow.logoImg"
              class="img-avatar"
              fit="fill"
            >
              <div slot="error" class="image-slot">暂无</div>
            </el-image>
            <div v-else>
              <div class="avatar-uploader" @click="uploadFile">
                <div class="el-upload el-upload--text">
                  <img v-if="formShow.logoImg" :src="formShow.logoImg" class="avatar" />

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



 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