dy-admin-manager/src/views/resetTeaming/components/training-photos/upload/index.vue

<template>
  <el-form
    ref="form"
    :model="form"
    label-width="80px"
    @submit.stop.native="submit"
  >
    <el-form-item
      label="相册"
      prop="photoAlbumId"
      :rules="[{required: true, message: '请选择相册'}]"
    >
      <el-select v-model="form.photoAlbumId" placeholder="请选择相册">
        <el-option v-for="item in photos" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="上传相册"
    >
      <el-upload
        action="/api-web/uploadFile"
        :on-preview="handlePictureCardPreview"
        :show-file-list="false"
        multiple
        accept=".png, .jpg, .jpeg, .gif"
        :on-success="successed"
        :on-remove="handleRemove">
        <el-button type="primary">上传图片</el-button>
      </el-upload>
      <div class="img-container">
        <div class="list" v-if="uploaded.length > 0">
          <div
            v-for="(item) in uploaded"
            :key="item.url"
            class="item"
          >
            <el-image
              :src="item.url"
              :preview-src-list="uploaded.map(item => item.url)"
              class="img">
            </el-image>
            <el-input v-model="item.name" placeholder="请输入图片名称" clearable size="mini"/>
          </div>
        </div>
        <empty v-else/>
      </div>
    </el-form-item>
    <div class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button
        type="primary"
        native-type="submit"
      >确 定</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-form>
</template>
<script>
import { photoAdd, photoAlbumQueryPage } from '../api'
export default {
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      form: {
        photoAlbumId: ''
      },
      uploaded: [],
      photos: []
    }
  },
  mounted() {
    this.FetchList()
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    successed(response, file, fileList) {
      if (response.code === 200) {
        this.uploaded.push({
          url: response.data.url,
          name: file.name.split('.').shift(),
          clientShow: 'YES',
        })
      } else {
        this.$message.error(res.data?.message || res.msg || '上传失败')
      }
      console.log(response, file, fileList)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    async FetchList() {
      try {
        const res = await photoAlbumQueryPage({
          musicGroupId: this.$route.query.id,
          rows: 9999
        })
        this.photos = res.data.rows
      } catch (error) {}
    },
    async submit(evt) {
      evt.stopPropagation()
      evt.stopImmediatePropagation()
      evt.preventDefault()
      try {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            const phoths = this.uploaded.map(item => ({
              ...item,
              photoAlbumId: this.form.photoAlbumId,
            }))
            await photoAdd(phoths)
            this.$message.success('添加成功')
            this.$emit('close')
            this.$emit('submited')
          }
        })
      } catch (error) {}
    },
  }
}
</script>
<style lang="less" scoped>
.dialog-footer{
  text-align: right;
}
.img-container{
  margin: 10px auto;
}
.item{
  width: 150px;
  margin-top: 10px;
  margin-right: 10px;
}
.img{
  width: 150px;
  height: 150px;
}
</style>