清哥的小屋

1
<el-upload
2
  class="avatar-uploader"
3
  accept="image/jpeg"
4
  :show-file-list="false"
5
  :headers="{ token: token}"
6
  :action="actionUrl"
7
  :on-success="handleAvatarSuccess"
8
  :before-upload="beforeAvatarUpload"
9
>
10
  <img
11
    v-if="ruleForm.dialogImageUrl"
12
    :src="ruleForm.dialogImageUrl"
13
    class="avatar"
14
  />
15
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
16
  <div slot="tip" class="el-upload__tip">
17
    只能上传jpg/png文件，且不超过50kb
18
  </div>
19
</el-upload>

1
// 这里上传的时候需要在请求头重添加 token 我的项目的 token 在登陆之后，把 token 保存在了本地存储中，大家根据自己项目的实际情况添加token,
2
  mounted () {
3
    this.token = sessionStorage.getItem("tk");
4
    this.actionUrl = this.common.data().shoppingMerchant + "/imageUpload/brand"; // 我的项目封装好的后台路径 根据自己项目的实际情况写
5
  },
6
  methods:{
7
  handleAvatarSuccess (res, file) { // 上传成功后展示图片
8
    this.ruleForm.dialogImageUrl = this.$baseImgUrl + res.data;
9
    this.$set(this.ruleForm, this.ruleForm.dialogImageUrl, res.data)
10
  },
11
  beforeAvatarUpload (file) { // 上传前校验图片（根据自己项目的实际需求添加）
12
    const imgType = file.type === 'image/jpeg' || file.type === 'image/png';
13
    const isLt50k = file.size / 1024 / 1024 < 0.048;
14
    if (!imgType) {
15
      this.$message.error('上传头像图片只能是 JPG和png 格式!');
16
      return false
17
    }
18
    if (!isLt50k) {
19
      this.$message.error('上传头像图片大小不能超过 50k!');
20
      return false
21
    }
22
  }
23
}

1
<el-upload
2
  class="upload"
3
  :headers="{ token: token}"
4
  :action="actionUrl"
5
  list-type="picture-card"
6
  :on-remove="handleDetailRemove"
7
  :before-upload="handleDetailBefore"
8
  :on-success="handleDetailSuccess"
9
  :limit="5"
10
  :file-list="detailImgList"
11
>
12
  <i class="el-icon-plus"></i>

1
handleDetailRemove (file) { // 删除详情页图片
2
  var vm = this;
3
  var url = vm.common.data().shoppingMerchant + "/file/delFile"
4
  var data = {
5
    fileId: file.url
6
  }
7
  vm.common.shopGetData(vm, url, data, function (res) {
8
    vm.detailImgList.forEach((item, index) => {
9
      if (item.uid == file.uid) {
10
        vm.detailImgList.splice(index, 1)
11
      }
12
    })
13
  });
14
  console.log(vm.detailImgList)
15
},
16
handleDetailBefore (file) { // 详情页图片上传大小类型限制
17
  const imgType = file.type === 'image/png' || file.type == 'im
18
  const isLt300k = file.size / 1024 / 1024 < 0.29;
19
  if (!imgType) {
20
    this.$message.error('上传图片只支持 jpg,png和jpeg 格式图片!
21
    return false
22
  }
23
  if (!isLt300k) {
24
    this.$message.error('上传图片大小不能超过 300k!');
25
    return false
26
  }
27
},
28
handleDetailSuccess (res, file) { // 上传成功后显示图片
29
  if (res.returnCode == 10001) {
30
    this.ruleForm.detailImages.push(res.data)
31
    this.detailImgList.push({
32
      url: this.$baseImgUrl + res.data,
33
      uid: file.uid,
34
      status: file.status
35
    })
36
  } else {
37
    this.$message.error('详情页图片上传失败');
38
  }
39
},