uploadDatum.vue 2.66 KB
Newer Older
1
<template>
qzhxx's avatar
qzhxx committed
2 3 4 5 6
<div>
<!-- accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" -->
  <!-- :show-file-list="false" -->
  <!-- :file-list="fileList" -->
  <!-- action="http://192.168.110.67/mall/file/video/content/upload" -->
7
  <el-upload
qzhxx's avatar
qzhxx committed
8 9 10 11 12 13 14 15 16
    ref="upload"
    :multiple="true"
    :http-request="uploadFile"
    :file-list="fileList"
    action
    :auto-upload="false"
    :before-upload="beforeAvatarUpload"
  >
    <i class="el-icon-plus fileUpload"></i>
liqin's avatar
liqin committed
17

qzhxx's avatar
qzhxx committed
18 19 20
  </el-upload>
   <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</div>
liqin's avatar
liqin committed
21

22 23 24
</template>

<script>
qzhxx's avatar
qzhxx committed
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
export default {
  data() {
    return {
      filedata:[],
      fileArr: [],
      fileList:[],
    //   fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    };
  },
  methods: {
    submitUpload() {  // 导入
        let tempData =  this.filedata
        this.filedata = new FormData()  //  用FormData存放上传文件
        this.$refs.upload.submit()  // 会循环调用uploadFile方法,多个文件调用多次

         let _this = this;
      _this
        .$https(
          {
            method: "post",
            url: "file/datum/upload",
            authType: this.backToken
          },
          this.filedata
        )
        .then(res => {
          let resData = res.data;
          console.log(res)

          if (resData.resultCode == "200") {
            // alert("上传成功");
            console.log(resData.data.fileList)
            const data = resData.data.fileList
            console.log(data)
            let newArray = data.map((item) => {
                return item.id;
            })
            this.$emit('datumList', newArray)
liqin's avatar
liqin committed
63

qzhxx's avatar
qzhxx committed
64 65 66 67 68 69 70 71
          } else {
            _this.$message.error(resData.msg || resData.message);
          }
        })
        .catch(err => {
          console.log(err);
          _this.$message.error(err.msg || err.message);
        });
72
    },
qzhxx's avatar
qzhxx committed
73 74
    uploadFile(file) {
         this.filedata.append('file', file.file)
75
    },
qzhxx's avatar
qzhxx committed
76
    beforeAvatarUpload(file) {
liqin's avatar
liqin committed
77 78 79
      const isLt10G = file.size / 1024 < 10;
      if (!isLt10G) {
        this.$message.error("上传文件大小不能超过 10GB!");
80
      }
liqin's avatar
liqin committed
81
      return isLt10G;
82 83
    }
  }
qzhxx's avatar
qzhxx committed
84
};
85 86 87
</script>

<style>
qzhxx's avatar
qzhxx committed
88 89 90 91 92 93 94 95 96
.fileUpload {
  width: 148px;
  height: 148px;
  line-height: 148px;
  margin: 0 auto;
  border: 1px dashed #c0ccda;
  font-size: 24px;
  font: #ccc;
}
liqin's avatar
liqin committed
97
</style>