quasar的组件＜q-uploader＞文件上传组件

！执行

已于 2024-04-12 22:03:28 修改

阅读量544

点赞数 2

文章标签： vue.js

于 2024-04-12 22:01:30 首次发布

本文链接：https://blog.csdn.net/sj18838107211/article/details/137696286

版权


<template>
             <q-uploader
              flat
              dark
              label="抖店所需的三张图片"
              ref="techUploaders"
              :field-name="(file) => 'file'"
              url="http://www.xxxxxx.com:9201/miniofile/upload"
              auto-upload
              :max-files="3"
              :headers="headers"
              @uploaded="uploaded"
              @removed="removeFile"
              multiple
               />
</template>

<script>

  computed: {
    ...mapState("login_tab",[
      "usertoken",
    ]),
  },

  headers() {
      //函数在上传图片之前被调用
      return [
        { name: "Authorization", value: this.usertoken },
        { name: "Accept", value: "application/json, text/plain, */*" },
      ];
   },

 //文件或批量文件已上传时发出
  uploaded(info) {
      let res = JSON.parse(info.xhr.response);
      this.fileCount++;

      this.DouYinImage.push(res.data.url);
      this.addlesson.scourseImage = this.DouYinImage[0];
      this.addlesson.tcourseImage = this.DouYinImage[1];
      this.addlesson.douyinDescImage = this.DouYinImage[2];
   },

    // removed从列表中删除文件时发出    
    //reset()将上传程序重置为默认值；清空队列，中止当前上传
    removeFile(files) {
      this.$refs["techUploaders"].reset();
      this.DouYinImage = [];
    },

</script>

headers: Array | Function
Examples:

1 [{name: 'Content-Type', value: 'application/json'}, {name: 'Accept', value: 'application/json'}]

2 () => [{name: 'X-Custom-Timestamp', value: Date.now()}]

3 files => [{name: 'X-Custom-Count', value: files.length}]

有问题可以评论问我