【批量导入前端实现】-element upload使用

最近，项目中有一个新需求是批量导入功能，我负责前端。

element提供了封装好的upload组件，我们只需要根据我们的实际需求进行调整就好。

该功能原型图：

核心部分其实就是这里啦---

因为考虑到批量导入，我们选择完文件之后可以自己先确认一下是不是我们要导入的文件，之后再上传，因此，我们参考的是element提供的这个upload的手动上传

代码解析：

<el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

1.action，必选参数，上传的地址，String类型。

在小编做的项目中，action不是唯一的，要根据不同情况调用不同的后端接口，也就是action要实现动态配置，这个时候怎么办呢？

其实，关于action，之前查到的资料是封装组件不支持动态绑定，也就是不支持绑定多个地址的，但是多差些资料就能知道，其实是可以动态绑定的

解决方案：

把action设置为变量，也就是：action，具体写法：

:action="uploadURL"

之后，在下面这样写：

uploadURL:function(){
    //判断条件对应不同的地址
}

结果，会报错：

人家提示的很清楚明白，属性操作类型检查失败，应为字符串类型

也就是人家明明限制了action是字符串类型，你到下面偏偏给人家改成function

解决：

:action="uploadURL()"

现在，虽然实现了动态绑定多个地址，但是，可能会存在上传地址更新不及时的情况，此时又该如何解决呢?

查了好多资料，有一篇博客真的是宝藏，爆赞呀https://blog.csdn.net/weixin_38886539/article/details/110180400

在css中定义两个属性，一个是action，后面跟一个字符串类型的变量；一个before-upload，后面跟一个beforeupload方法

<template>
        <el-upload
            :action="uploadAction"
            :before-upload="beforeUpload()"
        </el-upload>
</template>

在data中定义这个变量

data () {
			return {
				uploadAction: ''
			}
		}

在method中写beforeupload方法的实现

methods: {
	beforeUpload () {
		return new Promise((resolve, reject) => {
			this.$nextTick(() => {
                //根据不同条件uploadAction的值不同
            }
            resolve();
		    });
        });
	}
}

完美解决！！！

2.：on-preview，点击文件列表中已上传的文件时的钩子，function(file)

3.：on-remove 文件列表移除文件时的钩子，function(file, fileList)4.：file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] ，数据类型为array，默认值为[]

5.：auto-upload 是否在选取文件后立即进行上传，数据类型为boolean，默认值是true

我们使用时才用的是先选取文件再上传，因此，我们要把这个属性的值设为false

还有几个常用的属性：

1.：limit 最大允许上传个数数据类型为number

2.：on-exceed 文件超出个数限制时的钩子，function(files, fileList)

当我们设置了limit，执行on-exceed对应的handleExceed方法的时候就会提示我们：

handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制最多选择1个文件，本次选择了${files.length} 个文件`
      );
}

3.：accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效）数据类型为string

我们的需求是上传excel，因此我们设置为：

 accept=".xlsx,.xls"

4.：before-upload before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传，function(file)

上面的关于action属性讲解中我们用到了这个属性，用于上传文件之间的操作

5. ：before-remove before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除，function(file, fileList)

我们可以设置文件移除之前的确认信息，是否确认移除+文件名，确认再移除，否则取消则不移除

handleRemove(file, fileList) {
      console.log(file, fileList);
}

6. ：on-success on-success 文件上传成功时的钩子，function(response, file, fileList)

上传文件成功我们可以让文件类表消失：

this.$refs.upload.clearFiles();

总结：element提供的组件很强大，但是也有很多局限，如果能力允许的话，还是自己封装的最好，但是如果实力不允许，我们也可以通过查阅大量的资料来让他变成我们需要的，哈哈哈

【批量导入前端实现】-element upload使用

猜你喜欢