vue+elementUI的图片即时上传

wenyiweb 发布于2019-08-23 14:16 / 1341人阅读

摘要：后台管理项目用到的是的方式板块个人感觉还是不够详尽现在来说一下关于立即上传的问题主要用到的是的覆盖原有上传方式因为我需要传给后台所以的值可以写为空串页面代码批量上传可以看到对应的方法是重点操作失败说明其中字段就是后

后台管理项目,用到的是vue+elementUI的方式,upload板块,api个人感觉还是不够详尽,现在,来说一下关于立即上传的问题.
主要用到的是http-request的覆盖原有上传方式,(因为我需要传token给后台),所以action的值可以写为空串.
页面代码:


  批量上传

可以看到,http-request对应的方法uploadFile是重点:

uploadFile(file){
    let formDatas = new FormData();
    formDatas.append("usersFile", file.file);
    formDatas.append("tokenId",this.$store.state.user.tokenId);
    this.$post("/yourUrl",formDatas).then(res =>{
          if(res.code == 0){
            this.$message({
              message: res.msg,
              type: "success"
            });
          }else{
            this.$message({
              message: res.msg?res.msg:"操作失败",
              type: "error"
            });
          }
        })
  },

说明:其中字段usersFile就是后台要的key,值就是你选择的文件 ,这样就实现了立即上传.

云服务器 GPU云服务器阿里云服务器上传用vue做好的页面 vue开发WebRTC即时通讯 php图片上传的参数 php图片上传的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100368.html

基于vue-elementui的图片文件上传的高阶使用分享

摘要：前言要求图片上传支持多图片上传多浏览器图片格式判断多图片同时上传通过防并发设置防止可能出现的覆盖图片实时上传后支持在新窗口中打开查看使用注意代码中是页面中存在循环很多上传项，我为了省事直接复制粘贴的实现，如果单项上传就不用考虑了前言要求：1、图片上传支持多图片上传 +多浏览器图片格式判断；2、多图片同时ajax上传通过防并发设置防止可能出现的覆盖；3、图片实时上传后支持在新窗口...

xi4oh4o 2019-08-23 12:16 评论0 收藏0
【elementUI系列】使用elementUI调用一次接口同时上传图片和文件，同时需要携带其他参数

摘要：今天有一个坑，同时要上传图片和文件，而且图片要展示缩略图，文件要展示列表。我的思路是首先，只上传附件照片，这个直接看的官方例子就行，不仅仅上传附件照片，还同时上传其他参数。然后，再做上传照片和文件，上传其他参数，其实也就是文件合并。今天有一个坑，同时要上传图片和文件，而且图片要展示缩略图，文件要展示列表。我的思路是：首先，只上传附件照片，这个直接看ele的官方例子就行，不仅仅上传...

lavor 2019-08-23 13:55 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

Yuqi 2019-08-30 15:56 评论0 收藏0