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

女爷i 2022-10-16 09:54 203阅读 0赞

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

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

该功能原型图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlamluZ2ZhbmcxMjM_size_16_color_FFFFFF_t_70][]

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

![20210529160637430.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlamluZ2ZhbmcxMjM_size_16_color_FFFFFF_t_70 1][]

代码解析：

<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(){
        //判断条件对应不同的地址
    }

结果，会报错：

![20210529212643682.png][]

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

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

解决：

:action="uploadURL()"

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

查了好多资料，有一篇博客真的是宝藏，爆赞呀[https://blog.csdn.net/weixin\_38886539/article/details/110180400][https_blog.csdn.net_weixin_38886539_article_details_110180400]

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

在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提供的组件很强大，但是也有很多局限，如果能力允许的话，还是自己封装的最好，但是如果实力不允许，我们也可以通过查阅大量的资料来让他变成我们需要的，哈哈哈

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlamluZ2ZhbmcxMjM_size_16_color_FFFFFF_t_70]: /images/20221014/197ae83e663a47f08c2be764ac94a51f.png
[20210529160637430.png]: /images/20221014/560d8df18ac74fcdb0d0dfd8ae7ffff3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlamluZ2ZhbmcxMjM_size_16_color_FFFFFF_t_70 1]: /images/20221014/f8ac8104babb42258606669d9c056dcf.png
[20210529212643682.png]: /images/20221014/1a369913845d47c0aef3c458e22beb93.png
[https_blog.csdn.net_weixin_38886539_article_details_110180400]: https://blog.csdn.net/weixin_38886539/article/details/110180400