跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 卖家故事 > elementUI自定义上传文件(前端后端超详细过程)

elementUI自定义上传文件(前端后端超详细过程)

时间:2024-04-04 07:05:32 来源:网络cs 作者:付梓 栏目:卖家故事 阅读:

标签: 详细  过程  文件  定义 
阅读本书更多章节>>>>

elementUI自定义上传文件(前端后端超详细过程)

简介自定义上传文件并与其他参数一同提交到后台(主要使用axios)

简单介绍组件( upload)的属性(熟悉参数的直接略过)

总结elmentUI一下它的使用和常用属性的作用。

limit : 限制了上传文件的个数 , 如果你上传单个文件这里设置 1 ,多个文件就别设置。auto-upload:自动上传,在我看来,除非是单独上传文件时,这个属性才有用,因为单独文件直接上传到后台服务器。而我们想要自己获取到组件里的文件和其它表单数据,再上传,就需要别的办法,下面会讲。action:这个属性是上传文件的地址,当我们指定了 auto-upload 属性,组件就会自动按 action 的地址提交。我一般都不设置这个属性:action="none", 因为我觉得自定义的更好,拓展性强。multiple:这个属性支持多文件上传,如果你是上传单文件这个属性随便设不设置,如果是多文件,就要设置,所以建议不动,因为它默认开启。accept:这个就不细说了,限制类型的,当然仅限选择时的类型,用户要是想上传其它类型的文件照样有办法。
主要目的自定义上传文件

2.1 组件代码

<el-upload class="upload"                 ref="upload"                 action="string"                 :file-list="fileList"//存放选择的文件                 :auto-upload="false"//取消自动上传                 :http-request="uploadFile"自定义上传的方法                 :on-change="handleChange"//文件选择后执行的方法                 :on-preview="handlePreview"//点击显示文件(没啥用)                 :on-remove="handleRemove"//移除文件                 multiple="multiple">        <el-button slot="trigger"                   size="small"                   type="primary"                   @click="delFile">选取文件</el-button>      </el-upload>

2.2 data中的属性

data(){    return{// el-upload组件绑定的属性—— :file-list=“fileList”,渲染后fileList[index]是Object类型,而不是后台所需的File类型,      // 而这个组件已经把对应的File类型存储到了fileList[index].raw这个属性里,直接拿来用就好.      fileList: [],      // 不支持多选      multiple: false,      formData: "",    }}

2.3 methods的方法

    //点击上传文件触发的额外事件,清空fileList    delFile () {      this.fileList = [];    },    handleChange (file, fileList) {      this.fileList = fileList;      // console.log(this.fileList, "sb");    },    //自定义上传文件    uploadFile (file) {      this.formData.append("file", file.file);      // console.log(file.file, "sb2");    },    //删除文件    handleRemove (file, fileList) {      console.log(file, fileList);    },    // 点击文件    handlePreview (file) {      console.log(file);    },
与其他参数通过axios提交到后台

这里要使用到FormData()对文件进行存储才能提交到后台

具体实现方式:

//准备一个提交按钮<el-button type="primary"                     @click="onSubmit">保存</el-button>

提交事件:

//保存按钮    onSubmit () {        let formData = new FormData();        formData.append("file", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中       //下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储)        formData.append("title", this.title);

axios异步提交:

注意:使用FormData提交文件只能使用post请求

在post请求体中需要设置 “Content-Type”:
“multipart/form-data;charset=utf-8”,提醒后台数据是FormData类型

axios.post(post请求的具体路径, formData, {        "Content-Type": "multipart/form-data;charset=utf-8"      })        .then(res => {          if (res.data === "SUCCESS") {            this.$notify({              title: '成功',              message: '提交成功',              type: 'success',              duration: 1000            });          }        })

最后后台数据的接收

注意:前台传送的是FormData数据,要拿到文件要使用@RequestParam(前端存放到formData的key)
MultipartFile file进行接收

//采用PostMapping    @PostMapping(具体路径)    public String saveVue(String title,@RequestParam("file") MultipartFile file) throws IOException {       //拿到具体文件 file            return "SUCCESS";    }

介绍到这就基本完成了elmentui的自定义上传功能,记得点赞!

阅读本书更多章节>>>>

本文链接:https://www.kjpai.cn/gushi/2024-04-04/153646.html,文章来源:网络cs,作者:付梓,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论