【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]

按钮分类

html 复制代码
<button>提交</button>
<input type="submit" value="提交">
<input type="reset" value="重置">

换行

html 复制代码
<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属性

手动上传文件

上传前:

上传后:

第一步:页面效果

html 复制代码
<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>
javascript 复制代码
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 = ''
}
javascript 复制代码
export function uploadFile(data) {
  return request({
    url: '/uploadFile',
    method: 'post',
    headers: { "Content-Type": "multipart/form-data" },
    data: data,
  })
}
css 复制代码
.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%;
}

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

javascript 复制代码
this.$refs.file.value ='' // 清空上传文件中遗留文件

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

javascript 复制代码
// 选择文件
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 
   }
},

在页面中预览

html 复制代码
 <img :src=" 'data:image/png;base64,' + this.img">

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

相关推荐
shoa_top1 小时前
JavaScript 数组方法总结
javascript
鱼樱前端1 小时前
让人头痛的原型和原型链知识
前端·javascript
lianghj1 小时前
前端高手必备:深度解析高频场景解决方案与性能优化实战
前端·javascript·面试
OpenIM1 小时前
Electron Demo 的快速编译与启动
前端·javascript·electron
拿我格子衫来2 小时前
图形编辑器基于Paper.js教程27:对图像描摹的功能实现,以及参数调整
开发语言·前端·javascript·图像处理·编辑器·图形渲染
末日的狂欢姐2 小时前
AXUI - 极致原生体验的零依赖的国产 Web UI 框架,欢迎体验和共建!
javascript·前端框架·vue·网站建设·ui设计
取个好名称2 小时前
在线查看【免费】 txt, xml(渲染), md(渲染), java, php, py, js, css 文件格式网站
xml·javascript·php
日日行不惧千万里2 小时前
Node.js和js到底什么关系
开发语言·javascript·node.js
武清伯MVP2 小时前
TS学习笔记之数组、元组
javascript·typescript
pikapi2 小时前
奇怪的‘’函数同时作为对象使用“?你知道吗 ,一种奇怪的使用方法记录
前端·javascript·面试