网页前端开发中的文件操作

一、原生HTML组件

HTML中有一个<input type = "file">可以用来上传文件的。

像这样，就可以取到原生HTML5组件所上传的文件。

<input type="file" id="xlf" />

$("#xlf").change( function(e){
    console.log(e.target.files);
})

要用的话就定义一个对象接收files[]数组中的文件就行了。

 

二、element-ui的文件上传组件

<el-upload class="upload" action="string" :show-file-list="false" accept=".xlsx,.xls" :http-request="handleFile">
		<el-button type="primary">数据上传</el-button>
</el-upload>

handleFile:function(item) {
	readFile(item.file);
}

element-ui的<file-upload>组件上传的相应方法是：http-request对应的内容。每当有选择文件时，会执行并向该方法传入item对象，上传的文件的信息就在里面。使用item.file就可以获取到所上传的文件。

 

三、原生与element-ui文件上传组件对比

原生组件的file对象：

element-ui组件的file对象：

可以按钮

也可以像下面这样

可以看到，他们的控件形态不一。相对而言element-ui更为美观；

<!-- 这种方式可以附加到按钮上，而且不回显，文件单选 -->
<el-upload class="upload" action="string" :show-file-list="false" accept=".xlsx,.xls" :http-request="handleFile">
	<el-button type="primary">数据上传</el-button>
</el-upload>

<!-- 这种方式可以文件多选，文件回显，拖拽上传 -->
<el-upload
   class="upload-demo"
   drag
   action=""
   :file-list="fileList"
   :http-request="beforeUploadFile"
   multiple>
   <i class="el-icon-upload"></i>
   <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

<!-- 总结一下 -->
action="" 一般不用，不能缺少
:show-file-list="false" 用于单选文件，进行数据输入而不是文件保存的情况
:file-list="filseList" 绑定用于已上传回显的vue变量fileList
accept=".xlsx,xls" 过滤上传文件的格式
:http-request="function" 自定义文件处理请求，文件上传至后台可以写在其中
drag 可拖拽上传
multiple 多文件上传，弹出框中可多选

可以看到，他们都是File类型的对象。

{
    lastModified: 1584765430550,
    lastModifiedDate: Sat Mar 21 2020 12:37:10 GMT+0800 (中国标准时间) {},
    name: "园区业态建筑面积模板 - 副本.xlsx",
    size: 10836,
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    uid: 1586098410088,
    webkitRelativePath: ""
}

四、文件上传至后台

利用ajax请求将文件数据上传至后台的操作

beforeUploadFile:function(file){
                if(file==undefined) return;
                var that = this;
                var fd = new FormData();
                fd.append('file', file.file);
                fd.append('businessType', 'policyFile');
                fd.append('businessId', this.id);
                $.ajax({
                    url: "/filemag/upload",
                    type: "POST",
                    data: fd,
                    dataType: "JSON",
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (typeof (result) == "string") {
                            result = JSON.parse(result);
                        }
                        var datamsg = {
                            name: file.file.name,
                            url: "/filemag/getFileById?fileId=" + result.id
                        };
                        that.fileList.push(datamsg);
                    }
                })
            },

可以看到，上传是用的Form Data()，文件的回显就是对upload组件的 :file-list属性进行赋值的操作。

file-list[{
    name:"文件名",
    url:"文件下载链接"
}]

在通过接口将文件成功上传到服务器后，服务器会返回该文件的访问地址url，文件名就用所上传文件的文件名file.name即可。上传成功后给file-list赋值就可以实现回显，告诉用户上传了这几个文件。

 

五、从浏览器下载文件

从浏览器下载文件其实就是用浏览器去访问该文件，即返回文件格式数据的文件接口或静态映射路径。

使用window.open(fileUrl)即可实现文件的下载，其它的方法应该也行。使用如下方法可以实现对fileList的遍历实现多文件下载，即点击一个链接下载多个文件。浏览器会依次打开多个窗口，一一开始下载文件并关闭。亲测不用setTimeout的话实现不了。

for(var i=0;i<fileList.length;i++){
    setTimeout(window.open(fileList[i].url),500);
}

 

好了，到这里最近搬的关于网页前端文件操作的砖头就记录完了。暂时就到这里，以后若是有新的发现再更吧。