【VUE】使用elementUI上传组件相关

1.提示不存在

使用elementUI上传组件上传图片后，表单验证还是提示不存在

主要是因为组件包的层级比较深，验证取不到值导致

可以通过绑定其他元素获取到值进行验证

比如增加el-checkbox-group元素，将值绑定到它上面

<el-form :model="Form" ref="form" :rules="rules">
      <el-form-item prop='imageUrl'>
        <el-checkbox-group v-model="form.imageUrl" v-show="false"></el-checkbox-group>
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :http-request="handleAvatarSuccess">
          <img v-if="Form.imageUrl" :src="Form.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>

export default { data() { return { Form: { imageUrl: '' }, rules: { imageUrl: [ { required: true, message: '请上传图片', trigger: 'change' } ], } } },

2.使用el-image的大图预览进行上传后的图片预览

<template>
  <div class="app">
    <el-upload action="" list-type="picture-card" :on-preview="handlePictureCardPreview"
	:file-list="fileList"></el-upload>
	<image-viewer v-if="imgViewerVisible" :urlList="previewSrcList" :on-close="onClose" :z-index="2100" />
  </div>
</template>


import ImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: {
    ImageViewer,
  },
  data() {
    return {
      fileList: [],
	  previewSrcList:[],
      imgViewerVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
		//把用户点击的那张图片放到第一个位置,这样打开就能看到自己点击的那张图片
		this.previewSrcList = this.fileList.filter(e => e.url !== file.url).map(e=> e.url);
		this.previewSrcList.unshift(file.url)
		this.imgViewerVisible = true;
    },
    onClose() {
      this.imgViewerVisible = false;
    }
  },
};
</script>

3.上传文件前检查格式是否符合要求

<el-upload
	:auto-upload="false"//是否自动上传
	accept=".xls,.xlsx,.XLS,.XLSX,"//允许上传的格式
	:on-change="handle"
	:multiple="false"
	:limit="1"//仅允许上传一个文件
>

handle(file){
    let file = file.raw;
    //判断文件是否为. xlsx 文件
	const fileName = file.name;
	const dotIndex = fileName.lastIndexOf('.');
	const fileFormat = dotIndex !== -1 ? fileName.slice(dotIndex + 1) : '';
    console.log('格式为：',fileFormat)
}

4.上传Excel文件时在上传前校验文件行数

		async handle(ev, fileExcel) {
			this.importForm.excelFile = fileExcel;
			let file = ev.raw;
			if (!file) {
				console.log('文件打开失败');
			} else {
				let data = await this.readFile(file);
				//判断文件是否为. xlsx 文件
				const fileName = file.name;
				const dotIndex = fileName.lastIndexOf('.');
				const fileFormat = dotIndex !== -1 ? fileName.slice(dotIndex + 1) : '';
				if (fileFormat === 'xlsx' || fileFormat === 'xls') {
					let workbook = XLSX.read(data, { type: 'binary' }); //解析二进制格式数据
					let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
					let result = XLSX.utils.sheet_to_json(worksheet); //json数据格式
					if (result.length <= 10000) {
						this.isOver = true;//是否满足的变量，调用上传接口时可判断该值为true时进行
						this.importExcelChange(file, fileExcel);
					} else {
						this.isOver = false;
						this.$alert(
							'最多可上传10000调数据，当前文件数据条数为：' + result.length,
							'提示',
							{
								confirmButtonText: '确定',
							}
						);
					}
				} else {
					this.importForm.excelFile = undefined;
					this.$modal.msgError(
						'文件格式不正确，请上传xls、xlsx文件'
					);
				}
			}
		},

		readFile(file) {
			//文件读取
			return new Promise((resolve) => {
				let reader = new FileReader();
				reader.readAsBinaryString(file); //以二进制的方式读取
				reader.onload = (ev) => {
					resolve(ev.target.result);
				};
			});
		},