码迷,mamicode.com
首页 > Web开发 > 详细

自己写的文件上传files

时间:2020-03-25 19:22:54      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:height   splay   erro   split   css   hidden   单位   label   border   

做法:

  本地图片上传后,把上传的图片转为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
 

 

自己写的文件上传files

标签:height   splay   erro   split   css   hidden   单位   label   border   

原文地址:https://www.cnblogs.com/zmdblog/p/12567824.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!