vue下多文件上传，及表格中文件显示方式

最新推荐文章于 2024-05-31 13:41:44 发布

追梦d

最新推荐文章于 2024-05-31 13:41:44 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： ajax vue.js

本文链接：https://blog.youkuaiyun.com/jgp1234/article/details/120615268

版权

本文介绍如何在Vue.js应用中利用element-ui组件进行文件上传，并在表格中展示上传的文件，同时涵盖了文件查看、信息提示、删除文件和数组操作等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用element-ui中提供的文件上传方式
文件上传

<el-upload
class="upload-demo"
action="#"
:before-upload="before_upload_Z"//多文件上传，使用的方法
:file-list="fileList_Z"//多文件集合
:on-preview="handlePreview_Z"//文件上传之后，点击文件进行查看文件
:on-exceed="handleExceed_Z"//上传失败提醒方式
:on-remove="remove_z">//文件移除调用的方法
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>

2.调用方法
//图纸上传

before_upload_Z(file){
   
      let FormDatas = new FormData()   
      FormDatas.append('file',file)      
      $.ajax.post(this.$store.state.setpath+'api/upload',
      FormDatas,{
    
        headers:{
    
        'Content-Type':'multipart/form-data', //值得注意的是，这个地方一定要把请求头更改一下          
        "ip":sessionStorage.getItem("ip"),      
         "token":sessionStorage.getItem("token")   
}     
}).then(res=>{
      
if(res.data.code==0){
            
this.photos_1.push({
         
   "oldphotos":res.data.data.originalFilename,   
   "photos":res.data.data.newfileName    
 }) 
  this.$message.success(res.data.msg);     
this.fileList_Z.push({
               
 "name":res.data.data.originalFilename,    
"url":this.$store.state.setpath+"upload/"+res.data.data.newfileName            
   }) 
 }else{
   
 this.$message.warning(res.data.msg); 
 } 
 }) 
 },

3.//文件查看

handlePreview_Z(file){
   
var url=file.url;
window.location.href=url;
},

4.//信息提醒

handleExceed_Z(){
   
this.$message.warning(请删除原文件，再重新上传);
},

5.//图纸删除

remove_z(file){
   
var file1=file.url;
var aaa=file1.split('/')
var aa=aaa[aaa.length-1]
this.removeVyValue(this

最低0.47元/天解锁文章