vue+elementUI的图片立即上传

2023年10月26日 301次阅读 来源: orange

背景治理项目,用到的是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,值就是你挑选的文件 ,如许就完成了马上上传.

    原文作者：orange
    原文地址: https://segmentfault.com/a/1190000017496755
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞