vue-element文件上传组件el-upload的使用(导入)

贰浪往前飞

已于 2023-06-20 13:45:09 修改

阅读量1.2k

点赞数 1

文章标签： vue.js javascript elementui

于 2023-06-20 12:02:08 首次发布

本文链接：https://blog.csdn.net/m0_56277111/article/details/131303747

版权

直接贴图上代码el-upload组件action属性为文件要上传的地址,不需要展示已上传的文件的话可以把show-file-list设置为false,headers可以配置上传的请求头信息token,Content-Type等

    <div class="btn-listp">
      <el-button type="primary" @click="newUser">新增</el-button>
      <el-upload
            class="upload-demo"
            :action="exportUrl"
            :show-file-list="false"
            :headers="{
              'token':token
            }"
            ref="upload"
            :on-success="importSuccess"
            multiple
          >
            <el-button plain class="btn">导入</el-button>
      </el-upload>
      <el-button plain @click="exportExcel">导出</el-button>
    </div>

export default {
  components:{},
  props:{},
  data(){
    return {
      exportUrl: "",
      token: ""
    }
  },
  methods:{
    // 文件上传回调
        importSuccess(response, file, fileList) {
            if (response.status == 200) {
                this.$message.success("上传完成");
                this.$refs.upload.clearFiles();
                this.getList(1)
            } else {
                this.$refs.upload.clearFiles();
                this.$message.error(response.msg);
            }
        }
},
  created(){
    this.token = localStorage.getItem("token");  //获取token
    this.exportUrl =
      process.env.VUE_APP_AGENT_URL + "上传接口地址";  //请求头(环境变量配置)拼接 文件上传地址
},
}