文档章节

【vue开发问题-解决方法】(九)使用element upload自定义接口上传文件,input多文件上传

o
 osc_4nmshwhm
发布于 2018/08/07 14:42
字数 641
阅读 95
收藏 0

精选30+云产品,助力企业轻松上云!>>>

昨天做了一个上传用户头像的功能,已经附件管理功能。头像上传使用了elemenUI的上传控件el-upload,附件管理因为对样式没有要求使用了原生的附件上传。

项目背景:使用axios的post调用接口

头像上传

使用el-upload标签,设置show-file-list为false不显示文件列表,注意一定要设置action(虽然这里用不到),http-request覆盖默认的上传行为,可以自定义上传的实现uploadSectionFile,这样在点击选择file文件后就直接执行uploadSectionFile中的操作。

<el-upload class="avatar-uploader" :http-request="uploadSectionFile" :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/">
  <img v-if="imgUrl" :src="imgUrl" class="avatar">
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
      function uploadSectionFile(param) {
                //创建临时的路径来展示图片
                var windowURL = window.URL || window.webkitURL;
                this.imgUrl = windowURL.createObjectURL(param.file);
                let name = param.file.name;
                let data = {
                    file: file,
                    fileType: name.split(".")[name.split('.').length - 1],
                    fileId: this.$store.getters.uid,
                    fileName: name,
                }
                let rs = ah.fileUpLoad(this, data);//封装的axio post请求
                console.log(rs);
            },

最后注意axios post文件上传方法的调用,data参数需要转化为formData()传递。

        let param = new FormData(); //创建form对象
            param.append('file', data.file);//通过append向form对象添加数据
            param.append('fileType', data.fileType);//通过append向form对象添加数据
            param.append('fileId', data.fileId);//通过append向form对象添加数据
            param.append('fileName', data.fileName);//添加form表单中其他数据
            param.append('TOKEN', store.getters.accessToken);//添加登录验证  
       axios.post(_url, params, config)
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err);
                })        

 

请求头部:

请求参数格式:

使用input标签实现多文件上传

 实现点击按钮选择文件上传,实现思路:隐藏input标签(不显示文件),btn的click事件触发input标签的onchange事件,然后再change事件中获取文件信息上传。

<!-- 多文件上传 -->
        <input type="file" @change="uploads($event)" id="files" style="display: none;" multiple/>
<!--上传按钮,在elementUI表格中的button,scope.row为行数据-->
<el-button size="mini" @click="uploadFile(scope.row)">上传</el-button>

方法:

//上传文件
            function uploadFile(row) {
                this.row = row;
                $("#files").val("");//触发input file的点击事件
                $("#files").click();//触发input file的点击事件
            },
            function uploads(e) {
                for (let file of e.target.files) {//多文件上传
                    let data = {
                        file: file,
                        bimId: this.finfo.bimid,
                        actId: this.finfo.actid,
                        bicpId: this.row.ITEMID,
                    };
                    let rs = ah.uploadAffix(this, data);
                    if (!rs) break;
                }
            },

axios post请求参数还是要转化为formData()

            let param = new FormData();
            param.append('file[]', data.file); // 'file[]' 代表数组 其中`file`是可变的
            param.append('bimId', data.bimId);
            param.append('actId', data.actId);
            param.append('bicpId', data.bicpId); param.append('TOKEN', store.getters.accessToken);//必须

      axios.post(_url, params, config)
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err);
                })       

 以上代码不是全部,只是提供关键性代码,主要讲解思路实现方法。欢迎提问。。。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Mysql高可用架构

低读低写并发、低数据量方案 方案一:双机高可用方案 1.数据库架构图 2.特点 一台机器A作为读写库,另一台B作为备份库;A库故障后B库作为读写库;A库恢复后A作为备库。 3.开发说明 此种情况下...

osc_2axit9df
28分钟前
16
0
ASP.NET Core Web Api之JWT刷新Token(三)

前言 如题,本节我们进入JWT最后一节内容,JWT本质上就是从身份认证服务器获取访问令牌,继而对于用户后续可访问受保护资源,但是关键问题是:访问令牌的生命周期到底设置成多久呢?见过一些...

osc_p1q9onsn
30分钟前
8
0
[PA2015]Siano 单调栈

由于某人找了个单调栈的题解但是没研究透所以让我们来研究。。。。。。。。。。。。 首先先来考虑下面一种情况,假设第\(k\)次切割时,天数为\(d_k\),高度为\(b_k\),第\(k+1\)次切割时,天...

osc_b71hj3or
30分钟前
6
0
reg007最新邀请码!!!

需要的小伙伴留邮箱我邀请你们。

osc_9na1lmr9
32分钟前
4
0
居家日常(第二周)

开个新坑,开个新坑。主要感觉都写在一篇博客里有亿点长。接下来的文笔会更精彩(大雾) 6.29 周一   开新坑啦!!!这周日记打算好好地写点东西出来。当我真正想坐下来写点东西的时候就很...

osc_kf7nv2km
34分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部