el-upload 上传文件回显

阿里云OSS 文件上传

upload.js 自定义

const OSS = require('ali-oss')

const client = new OSS({
  region: '', // 你的oss地址 ，具体位置见下图
  accessKeyId: '', // 你的accessKeyId
  accessKeySecret: '', // 你的secret
  bucket: '' // 你的oss名字
});

const upload = (file, type) => {
  return new Promise((resolve, reject) => {
    if (type == 0) {
      if (file.type != 'image/jpeg' && file.type != 'image/png') {
        resolve({ error: '上传图片只能是 JPG或PNG 格式' })
      }
      if (file.size / 1024 / 1024 >= 5) {
        resolve({ error: '上传图片大小不能超过 5MB' })
      }
    } else if (type == 1) {
      if (file.name.indexOf('.txt') != file.name.length - 4) {
        resolve({ error: '文件格式错误' })
      }
    } else {
      if (file.name.indexOf('.xls') != file.name.length - 4 && file.name.indexOf('.xlsx') != file.name.length - 5) {
        resolve({ error: '文件格式错误' })
      }
    }
    client.put('upload/' + new Date().getTime() + (Math.random() * 10) + file.name.substring(file.name.lastIndexOf('.'), file.name.length), file).then(res => {
      if (res.res.status == 200) {
        if (res.name.indexOf('.txt') ||res.name.indexOf('.xls')> -1) {
          resolve({ url: `http://images.cdjkh.cn/${res.name}` })
        } else {
          resolve({ url: `http://images.cdjkh.cn/${res.name}?x-oss-process=image/resize,w_500` })
        }
      } else {
        resolve({ error: '上传失败' })
      }
    })
  })
}

export default upload

组件实现

主要通过:file-list="fileList"来实现文件回显

fileList:[
	{
		name:"文件名",
		url:"链接"
	}
]

思想：通过before-upload 可以获得文件名

<el-upload
  class="upload-demo"
  action
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
   multiple
  :limit="1"
  :file-list="fileList"
  :before-upload="
    file => {
      beUp(file, 1);
    }
  "
  :on-exceed="handleExceed"
>
  <el-button size="small" type="primary">点击上传</el-button>
  <p style="margin: 20px 0px 60px 70px">
    只能上传txt格式文档，文档内不能含空数据。
  </p>
</el-upload>

upload.js

import upload from "@/utils/upload"; // 引入

    // 上传前
    beUp(file, flag) {
      // 获得文件后缀名
      var fileIndex = file.name.lastIndexOf(".");
      var name = file.name.substring(fileIndex + 1, file.name.length);
      
      // 判断当前文件类型是否符合txt
      if (name === "txt") {
        upload(file, 1).then(res => {
         // 回显
          var obj = {};
          obj.name = file.name;
          obj.url = res.url;
          this.fileList.push(obj);

          if (res.url) {
          }
          if (flag == 1 && res.url) {
            this.url = res.url;
          } else if (flag == 2 && res.url) {
            this.shangchuanStatus = true;
            this.url = res.url;
          } else {
            this.$message.error(res.error);
          }
        });
      } else {
        this.$message.error("格式错误，只能上传txt文件");
      }
      return false
    },

	// 文件列表移除文件时的钩子
    handleRemove(file, fileList1) {
      console.log(file, fileList1, this.fileList, "移除");
      this.fileList = fileList1;
    },
    // 文件超出个数限制时的钩子
     handleExceed(files, fileList) {
    this.$message.warning(
      `当前限制选择 1 个文件，本次选择了 ${
        files.length
      } 个文件，共选择了 ${files.length + fileList.length} 个文件`
    );
 },
	//  删除文件之前的钩子
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },