文件上传 js

效果图

html代码：

<template>
//intl是引入的函数，主要功能是进行标题的中英文转换，formData是一个json文件中引入的
	<div title>{{ intl(formData['resume']) }}</div>
	<div>
	//注意这个input类型，是为了点击之后打开本地文件夹；accept是限制选择的文件类型只能是pdf；
		<input type="file"
			   accept="application/pdf"
			   ref="fileInput"
			   style="display:none">
		//这里的v-if是为了判断是否有选择文件，如果选择则显示文件名
		<div class="file_message"
			 v-if="resumeName !== ''">
			//这里显示前面pdf图标
		  <div class="img"><i class="fas fa-file-pdf"></i></div>
		  <div class="content">
			<span class="file_name">{{resumeName}}</span>
			<div class="file_size">{{fileSize}}</div>
			<span class="operation"
				  style="
						display:flex;
						position: absolute;
						right: 0.5em;
						bottom: 0.5em;
						font-size: 0.6em;">
			//Button是引用其他的一个组件
			  <Button :type="['', 'blue'].join(' ')"
					  :name="
							intl({
									'en-US': 'Reselect',
									'zh-CN': '重新选择',
								})
						"
					  @click="uploadFile"
				/>
			  <Button :type="['', 'red'].join(' ')"
					  :name="
							intl({
									'en-US': 'Delete',
									'zh-CN': '删除',
								})
						"
					  @click="deleteFile" />
			</span>
		  </div>
		</div>
		//和上面的v-if相对应
		<div class="upload"
			 v-else
			 @click="uploadFile">
		  <i></i>
		  <span>
			{{
					intl({
							"en-US": "Select file (maximum 10M)",
							"zh-CN": "选择文件(最大限10M)",
						})
					}}
		  </span>
		</div>
	  </div>
</template>

css代码：

<style scoped>
.upload {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 7em;
  padding: 0;
  border-radius: 5px;
  background-color: var(--gray-background);
  color: var(--gray-bright);
}
.upload i {
  width: 2.5em;
  height: 2.5em;
  margin: 0.5em auto 0.3em;
  background: url(https://s1.wenjuan.com/static/img/q_upload_file/upload-pc.svg) no-repeat;
}
.upload span {
  font-size: 0.8em;
  color: var(--gray);
  opacity: 0.5;
}
.file_message {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--gray-background);
  padding: 1em;
  border: 1px solid var(--gray-border);
  border-radius: 5px;
}
.file_message .img {
  font-size: 2.8em;
  color: var(--gray);
  padding-right: 0.5em;
}
.file_name {
  font-size: 1.2em;
  color: var(--gray);
}
.file_size {
  margin-top: 0.5em;
  font-size: 0.8em;
  color: var(--gray);
  opacity: 0.6;
}
</style>

js代码：

<script>
import { intl } from '/util/env.js'
import { formData } from '/apply/formData.json'
export default {
//向上传递update函数
  emits: ['update'],
  data() {
	return {
	  formData,
	  resumeName: '',
	  fileSize: '',
	  fileType: '',
	}
  },
  methods: {
	uploadFile() {
	  let fileInput = this.$refs.fileInput
	  fileInput.click()
	  fileInput.onchange = () => {
		let file = fileInput.files[0]
		let resumeSize = file.size
		if (resumeSize / (1024 * 1024) > 10) {
		  alert('限制10MB以内')
		  return false
		} else {
		  if (resumeSize >= 1024 && resumeSize < 1048576) {
			this.fileSize = parseFloat((resumeSize / 1024).toFixed(2)) + 'KB'
		  } else if (resumeSize >= 1048576) {
			this.fileSize = parseFloat((resumeSize / 1048576).toFixed(2)) + 'M'
		  } else {
			this.fileSize = parseFloat(resumeSize.toFixed(2)) + 'B'
		  }
		}
		this.resumeName = file.name
		console.log(file)
	  }
	},
	update(fileInput = false) {
	  if (!fileInput) {
		this.$refs.fileInput.blur()
	  } else {
		this.$emit('update', this.$refs.fileInput.files[0])
	  }
	},
	deleteFile() {
	  this.resumeName = ''
	},
	intl,
  },
}
</script>