【HTML】＜input＞

分类

text

password

number

button

reset

submit

hidden

radio

checkbox

file

image

color

range

tel

email（火狐有校验，360浏览器无校验。）

url

datetime（火狐、360浏览器不支持）

search

date、month、week、time、datetime-local

input[type=button]

按钮分类

<button>提交</button>
<input type="submit" value="提交">
<input type="reset" value="重置">

换行

<input type="button" value="不会换行">
<button type="button">会换行，最大换行是240px</button>

input[type=file] 上传

accept属性

accept=“image/png, image/jpeg”

accept=".png, .jpg, .jpeg" 

accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" 

multiple属性

手动上传文件

上传前：

 上传后：

 

第一步：页面效果

<el-form-item label="上传文件" >
  <div class="upload-demo">

    <!-- 原生控件 -->
    <input id="file" ref="file" type="file" name="file" @change="fileChange"  accept=".xlsx,.xls" />

    <!-- 上传成功后显示图片 -->
    <div class="upload-box" v-if="form.name">
      <div class="file">
        <img class="file-img" src="../../../assets/images/type.png">
        <p class="file-name">{
   
   {form.name}}</p>
      </div>
      <div class="reload">重新上传</div>
    </div>

    <!-- 上传控件 -->
    <div class="upload-box" v-else>
      <img class="file-src" src="../../../assets/images/upload.png">
      <div class="el-upload__text">点击文件或拖到此处上传</div>
    </div>
  </div>

  <!-- 提示文字 -->
  <div class="el-upload__tip">目前支持 xlsx，xls格式文件</div>
</el-form-item>

<el-form-item>
  <el-button type="primary" size="mini" @click="submit()" :disabled="form.name == ''">导入</el-button>
  <el-button size="mini" @click="cancel()">取消</el-button>
</el-form-item>

data() {
  return {
    form: {
      file:'',
      name:'',
    },
  };
},

// 选择文件
fileChange(e) {
  this.form.file = e.target.files[0];
  this.form.name = this.form.file.name
},

// 上传文件
submit() {

  // 文件
  const fd = new FormData();
  fd.set("file", this.form.file);
  
  // 调取接口
  uploadFile(fd).then(res => {
    if(res.code == 200) {
      this.info = res.data
    }else {
      this.success = false
    }
  });
}

// 取消上传
cancel() {
  this.$refs.file.value ='' // 清空上传文件中遗留文件
  this.form.file = {};
  this.form.name = ''
}

export function uploadFile(data) {
  return request({
    url: '/uploadFile',
    method: 'post',
    headers: { "Content-Type": "multipart/form-data" },
    data: data,
  })
}

.upload-demo {
  width: 360px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input#file {
  height: 100%;
  width: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
}
.upload-box {
  height: 100%;
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 20px;
  position: absolute;
  top: 0;
  left: 0;
}
.file {
  display: flex;
  align-items: center;
}
.file-img {
  height: 20px;
  width: 20px;
  margin: 0 3px 0 0;
}

.file-name {
  margin-right: 30px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 250px;
}
.file-name-all {
  margin-right: 30px;
}

.file-down {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: rgba(19,124,239,1);
}

.reload {
  margin-top: 20px;
  color: rgba(19,124,239,1);
  cursor: pointer;
}
.file-src {
  height: 30px;
  width: 30px;
}

.el-upload__text {
  margin-top: 20px;
}

.el-upload__tip {
  margin: 0;
}

::v-deep .el-upload--picture-card {
  margin:0 20px 20px 0;
}

::v-deep .el-upload-dragger {
  height: 100%;
  width: 100%;
}

取消上传或关闭弹窗再打开后，上传相同图片无法成功

this.$refs.file.value ='' // 清空上传文件中遗留文件

选择后得到base64码，可以预览图片

// 选择文件
fileChange(e) {
  this.form.file = e.target.files[0];
  this.form.name = this.form.file.name

  // 展示成图片Base64 格式
  var reader = new FileReader()
  reader.readAsDataURL(this.form.file)
  reader.onload = function (result) {
      console.log(result)
      this.img = result.target.result 
   }
},

 在页面中预览

 <img :src=" 'data:image/png;base64,' + this.img">

但是因为现在上传的是excel所以无法预览。