脚本宝典收集整理的这篇文章主要介绍了

vue+elementUI的图片即时上传

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

<el-upload 
  class="upload-demo" name="usersFile"
  action=""
  :on-preview="handlePreview"
  :http-request="uploadFile"
  :on-remove="handleRemove"
  :auto-upload="true"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="mini" type="primary">批量上传</el-button>
</el-upload>

可以看到,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,值就是你选择的文件 ,这样就实现了立即上传.

总结

以上是脚本宝典为你收集整理的

vue+elementUI的图片即时上传

全部内容,希望文章能够帮你解决

vue+elementUI的图片即时上传

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过