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 72
          } else {
            _this.$message.error(resData.msg || resData.message);
          }
        })
        .catch(err => {
          console.log(err);
          _this.$message.error(err.msg || err.message);
        });

liqin's avatar
liqin committed
73

74
    },
qzhxx's avatar
qzhxx committed
75 76
    uploadFile(file) {
         this.filedata.append('file', file.file)
77
    },
qzhxx's avatar
qzhxx committed
78 79 80 81
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error("上传文件大小不能超过 5MB!");
82
      }
qzhxx's avatar
qzhxx committed
83
      return isLt5M;
84 85
    }
  }
qzhxx's avatar
qzhxx committed
86
};
87 88 89
</script>

<style>
qzhxx's avatar
qzhxx committed
90 91 92 93 94 95 96 97 98
.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
99
</style>