1
<el-form-item label="现场照片" prop="urls">
2
  <el-upload
3
    v-model:file-list="imgFileList1"
4
    :action="action"
5
    :headers="imgToken"
6
    :on-success="handleSuccess1"
7
    list-type="picture-card"
8
    :before-upload="beforeAvatarUpload"
9
    :on-preview="handlePictureCardPreview"
10
    :on-remove="handleRemove1"
11
  >
12
    <el-icon>
13
      <Plus />
14
    </el-icon>
15
  </el-upload>
16
</el-form-item>

1
//上传图片路径
2
imgFileList1: [], //图片回显时使用
3
imgFileListForm: [], //图片回显时使用
4
piclist1: [], //图片回显时使用
5
imgToken: {
6
  'Blade-Auth': 'Bearer ' + JSON.parse(localStorage.getItem('saber-token')).content
7
},
8
limitImg: 10, //限制图片上传的数量
9
action: `/api/blade-resource/oss/endpoint/put-file`,
10
disabled: false,
11
dialogImageUrl: '', //如果只是显示一张图片的话，可以直接对其赋值
12
dialogVisible: false

1
beforeAvatarUpload(file) {
2
  const imgType = file.type === 'image/jpeg' || file.type === 'image/png';
3
  const imgSize = file.size / 1024 / 1024 < 5;
4
  if (!imgType) {
5
    this.$utils.toast('图片只能是 JPG/PNG 格式!', 'error');
6
  }
7
  if (!imgSize) {
8
    this.$utils.toast('图片大小不能超过 5MB!', 'error');
9
  }
10
  return imgType && imgSize;
11
},
12

13
handlePictureCardPreview(uploadFile) {
14
  this.dialogImageUrl = uploadFile.url;
15
  this.dialogVisible = true;
16
},
17

18
handleRemove1(res) {
19
  console.log(res);
20
  let index = this.imgFileListForm.findIndex(e => e === res.url);
21
  this.imgFileListForm.splice(index, 1);
22
  console.log(this.imgFileListForm);
23
},
24

25
handleSuccess1(res) {
26
  if (res.code === 200) {
27
    this.imgFileListForm.push(res.data.link);
28
  }
29
},

1
//在查询到数据的地方
2
if (this.form.images) {
3
  this.form.images.forEach(value => {
4
    this.imgFileList1.push({ url: value });
5
  });
6
}