通过input[type=“file“]上传文件或图片——功能实现

╰+攻爆jí腚メ 2022-10-11 00:45 119阅读 0赞

在后台管理系统中，经常会用到图片或者文件的上传。

如果用到的是`VUE`框架的话，可以通过对应`UI`框架中的上传组件：

比如：`elementUi`中的`upload`上传  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
还有一种方式就是直接使用`input`组件，此组件当`type="file"`时，就是一个上传文件或者图片的控件了。

具体使用方法如下：

### 1.触发选择文件的html部分 ###

整个页面都是用的`elementUi`的框架，因此部分组件是用的`elementUI`中的组件形式，例如下面的按钮组件

<el-button size="mini" type="success" @click="importFn" icon="el-icon-upload" :loading="importLoading" class="searchBtn">导入</el-button>

分析一下这个组件吧。

> 1.  size：组件大小，mini表示迷你小按钮，小点会觉得好看些
> 2.  type：success，表示按钮的主题颜色是绿色。
> 3.  click=“importFn” ：当点击此按钮时，会出现importFn函数
> 4.  icon：表示按钮前面有个小图标
> 5.  loading：表示按钮在使用过程中有个加载中的状态，防止重复点击。
> 6.  class：这个是一个样式类名，这个无所谓的……

### 2.input上传文件的html部分 ###

<div style="opacity: 0"> //此时opacity:0;表示隐藏，不展示
        <input v-if="fileInput"
               ref="fileUpload"
               accept=".xls,.xlsx,.csv"
               multiple
               style="width: 0px; height: 0px"
               type="file"
               v-on:change="addFile($event)" />
    </div>

现在来讲解一下参数：

> 1.  opacity:0;表示这部分是隐藏的，并不在页面中展示
> 2.  fileInput ：表示input的弹窗是通过fileInput的值来展示获取隐藏的
> 3.  ref=“fileUpload”：vue中可以通过ref来获取到这个dom元素。这个在后面有用处
> 4.  accept=".xls,.xlsx,.csv" 这个表示可以支持的文件类型，其实这个并没有完全的限制住文件的类型  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
>     因为还是可以选择 所有文件来进行选择的，这个需要在上传文件之前针对文件的类型进行后续的判断。
> 5.  multiple ：表示可以支持多选
> 6.  style=“width: 0px; height: 0px” ：表示组件不展示，大小为0即为不展示
> 7.  type=“file” 上传文件
> 8.  v-on:change=“addFile($event)” ，这个input组件有两个函数可以监听，一个是change，另一个是Input，如果是其他类型的input组件，比如 text number之类的，都是要执行的是Input函数，此时是上传文件，所以走的应该是change事件。

### 3.js部分 ###

// 导入函数
     importFn() { 
        this.fileInput = true;
        this.$nextTick(() => { 
        	//页面渲染完成后，触发点击事件，弹出对话框
            this.$refs.fileUpload.click();
        });
    },
    //上传文件
    addFile(file) { 
        console.log(file);
        var files = file.target.files[0];//虽然我的input支持多个上传，但是此时我还是只处理了第一个文件，多选的参数可以去掉了
        console.log(files);
        if (!files) { 
            return;
        }
        if (files.type === "application/vnd.ms-excel" || files.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {  console.log("格式正确"); } else { 
            this.$message.error("文件格式错误！");
            return;
        }
        const isLt50M = files.size / 1024 / 1024 < 50;
        if (!isLt50M) { 
            this.$message.error("上传文件大小不能超过 50MB!");
            return;
        }
        this.importLoading = true;
        //由于后端接口支持的是上传formData二进制的数据，因此通过 new FormData的方式来实例化，然后将二进制数据绑定到file属性名上面，
        var formData = new FormData();
        formData.append('file', file.target.files[0])
        $.ajax({ 
            type: 'post',
            url: "/PurchaseOrder/Import", //这个是我们这边后端提供的接口地址，需要更换成对应的
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
        }).success(res => { 
            if (res.Success) { 
                this.$message.success(res.Message || "导入成功");
                this.importLoading = false;
            } else { 
                this.$message.error(res.Message);
                this.importLoading = false;
            }
            this.$refs.fileUpload.value = null; //这个代码是为了解决上传完一个文件后，再次上传此文件无法触发上传的问题
        })
    },

## 注意事项 ##

#### 解决input\[type=‘file’\]上传相同附件只传一次问题 ####

如果文件上传失败，还是需要支持再次上传同一个文件的。这个文件的解决办法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
由于我用的是vue，所以用的是vue的部分。问题解决！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221005/ea49efd501fd4985869fd66bcf999d62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/af703d45f2dc46848101d9e406f7306d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221005/6893093aece2449f9a029d32c6ccf403.png