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

按钮分类

提交

换行

会换行，最大换行是240px

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属性

手动上传文件

上传前：

 上传后：

 

第一步：页面效果

  


    
    

    
    

      

        
        
{{form.name}}
      
      
重新上传
    

    
    

      
      
点击文件或拖到此处上传
    
  

  
  
目前支持 xlsx，xls格式文件



  导入
  取消

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 
   }
},

 在页面中预览

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