vue 上传文件,vue前端实现上传下载文件
这篇文章主要为大家详细介绍了某视频剪辑软件实现文件上传和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现文件上传和下载的具体代码，供大家参考，具体内容如下
文件上传
某视频剪辑软件中的文件上传主要分为两步：前台获取到文件和提交到后台
获取文件
前台获取文件，主要是采用投入框来实现
El-dialog:title= addName :visible。sync= dialog addfile width= 500 px style= padding:0；@close=resetAdd
附件名称：El-input v-model= addFileName autocomplete= off size= small style= width:300 px；/el-input
div class= add-file-right style= height:70px；左边距：100像素上边距：15像素
div class= add-file-right-img style= margin-left:70px；上传文件：/div
input type= file ref= clear file @ change= getFile($ event) multiple= multiplt class= add-file-right-input style= margin-left:70px；接受=。docx，1000 .医生，1000 . pdf
span class=添加文件-权限-更多支持扩展名：医生docx .pdf /span
/div
div class=add-file-list
保险商实验所
li v-for=(item，index)in addArr :key= index a { { item。name } }/a/Li
/ul
/div
div slot=footer class=对话框-页脚
El-button type= primary @ click= submit addfile size= small 开始上传/el-button
El-button @ click= resetAdd size= small 全部删除/el-button
/div
/el-dialog
最重要的是这一句代码：
通过文件类型的投入框实现文件上传；然后通过设置multiple=multiplt 实现了多文件上传，并且使用接受实现了上传文件类型限制；最后通过监听变化事件，前台获取到上传的文件。
获取文件(事件){
var文件=事件。目标。文件；
for(var I=0；ifile.lengthi ){
//上传类型判断
var imgName=file[i].姓名；
var idx=imgName.lastIndexOf( . );
如果(idx！=-1){
var ext=imgName.substr(idx 1).toupper case()；
ext=ext。tolowercase()；
如果（分机！=pdf ext！=doc ext！=docx){
}否则{
this.addArr.push(文件【我】)；
}
}否则{
}
}
},
通过变化事件中的事件。目标。文件就能获取到上传的文件了，在上面再次对获取的文件进行了类型限制。
数据提交
获取到文件数据后，就需要将数据提交到后台，这里可以采用上传的方式提交。
submitAddFile(){
if(0==this.addArr.length){
这个消息({
类型："信息",
消息： 请选择要上传的文件
});
返回；
}
var formData=new formData()；
formData.append(num ，this。addtype)；
formData.append(linkId ，this。addid)；
formData.append(rfilename ，this。添加文件名)；
for(var I=0；这是。addarr。长度；i ){
formData.append(fileUpload ，this。addarr[I])；
}
让配置={
标题：{
"内容类型":"多部分/形式数据",
授权：这个. token
}
};
这个。axios。发布(API日期。上传附件、表单数据、配置)。然后((响应)={
如果(回应。数据。info== success ){ this .$message({
类型："成功",
消息： 附件上传成功!
});
}
})
}
在进行数据提交的时候，有两点需要注意：表单数据对象和内容类型，处理好着两点以后，就和其他的接口一样了。
文件下载
首先是从服务器获取文件列表，并展示：
div class=关于文件
div class=关于文件标题相关材料/div
保险商实验所
li v-for=(item，index)在十个附件中。“rows”:key=“index”
target= _ self { item。tenpencsourname } }/a
span @click=toxiazai(index，4，item.tenureId) title=下载/span
span @click=toshanchu(index，4，item.tenureId) title=删除/span
/李
/ul
/div
然后完成点击下载事件：
毒杀仔(索引，编号，id){
var tempForm=document。createelement(“form”)；//创建形式表单，以下数形式表单的各种参数
tempForm.id= tempForm1
tempForm.method= post
模板。行动=API日期。下载附件；
tempForm.target= _
var hideinput 1=文档。createelement(“input”)；
hideInput1.setAttribute(type ， hidden )；
hideInput1.setAttribute(name ， linkId )；
hideInput1.setAttribute(id ， linkId )；
hideInput1.setAttribute(value ，id)；
模板。appendchild(隐藏输入1)；
var hideinput 2=文档。createelement(“input”)；
hideInput2.setAttribute(type ， hidden )；
hideInput2.setAttribute(name ， num )；
hideInput2.setAttribute(id ， num )；
hideInput2.setAttribute(value ，num)；
模板。appendchild(隐藏输入2)；
if(document.all){
tempForm.attachEvent(onsubmit ，function(){ })；//IE
}否则{
var subObj=tempform。addevent侦听器( submit ，function(){}，false)；//firefox
}
文档。身体。appendchild(tempForm)；
if(document.all){
模板。火灾事件(“提交时”)；
}否则{
tempForm.dispatchEvent(新事件(提交))；
}
模板。submit()；//提交邮政请求
文档。身体。移除子级(tempForm)；
},
文件在线打开
在个人电脑端，有很多文件都试采用下载的方式，但是在手机端，更多的是直接在线打开。如果要实现文件的在线打开，可以借助于a标签的超链接属性实现
保险商实验所
通知列表 v-bind:key= index class= person-list @ click= notice(index)中的li v-for=(item，index)
div class=人员列表名称
一个v-bind:href=[文件前缀项。uuid _ name] rel= external no follow rel= external no follow“{ item。文件名} }/a
/div
div class=person-list-time 上传时间：{{item.create_time}}/div
/李
/ul
因为使用这种方式进行文件打开的时候，需要有完整的路径名称，但是在从后台获取到列表的时候，通常是相对路径，所以需要进行路径拼接：v-bind:href=[文件前缀项。uuid _ name]
图片上传和预览
通过在上传文件以后，就可以拿到文件的名称进行展示。但是如果是用这种方式进行图片上传，展示不再是图片名称了，而应该是图片展示。
例如，要实现上面这种效果，使用投入进行图片上传
div class=list-img
保险商实验所
li v-for=(item，index) in imgArr :key=index
img :src=item.path alt=
a @click=todel(index)/a
/李
里
我很生气。长度3英尺
添加上传图片/span
span class=add (最多上传3张)/span
输入类型= file @ change= getFile($ event) accept= .jpg，1000 .png，100 .骨形态发生蛋白。 gif
/div
/李
/ul
/div
获取文件(事件){
var file=event。目标。文件；
for(var I=0；ifile.lengthi ){
//上传类型判断
var imgName=file[i].姓名；
var idx=imgName.lastIndexOf( . );
如果(idx！=-1){
var ext=imgName.substr(idx 1)。toupper case()；
ext=ext . tolowercase()；
如果(分机！=jpg ext！=png ext！=bmp ext！=gif){
}否则{
this.imgArr.push(文件[I])；
}
}否则{
}
}
},
因为在打印事件对象的时候，我发现上传的图片中包含了一个path字段，这个字段对应的是图片在设备上的地址，所以我想当然的认为可以用这种方式显示图片。结果明显是个错误，我在网上查了一下才知道，要显示用input上传的图片，需要用FileReader。
具体来说，输入得到的图片并不能立即显示。它们根本不是一回事，所以需要一个数组来存储显示的图片。
getFile(事件){
var file=event . target . files；
让那个=这个；
for(var I=0；ifile.lengthi ){
//上传类型判断
var imgName=file[i]。姓名；
var idx=imgName.lastIndexOf( . );
如果(idx！=-1){
var ext=imgName.substr(idx 1)。toupper case()；
ext=ext . tolowercase()；
如果(分机！=jpg ext！=png ext！=bmp ext！=gif){
}否则{
that.imgArr.push(文件[I])；
}
}否则{
}
//显示上传的图片
let reader=new FileReader()
reader.readAsDataURL(文件[i])
reader.onload=函数(e) {
that . img show . push(this . result)；
}
}
},
这样，提交数据时使用imgArr，显示时使用imgShow。
还需要注意的是，这里还有另一个删除操作。这里的删除不仅在界面上不可见，还代表被删除的照片，不需要传到后台。因此，两个数组都需要删除。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。