Ant Design Vue的图片上传组件的使用

<div class="clearfix">
        <a-upload
              :customRequest="uploadImg"
              :remove="handleRemove"
              list-type="picture-card"
              :file-list="fileList"
              @preview="handlePreview"
              class="avatar-uploader"
            >
              <div v-if="fileList.length < 1">
                <a-icon type="plus"/>
              </div>
            </a-upload>
         <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage">
        </a-modal>
</div>

<script>
import {upload} from '@/api/function'


// 转换图片格式的方法
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

export default {
  name: 'Function',
  components: {
    STable
  },
  data() {
    return {
      // 控制图片预览弹出层的显示与隐藏
      previewVisible: false,
      // 预览图片弹出层的图片路径
      previewImage: '',
      // 文件列表
      fileList: [],
    }
  },
  methods: {  
    // 处理函数，当编辑按钮被点击时触发
    async onEditClick(record) {
      try {
        // 准备请求参数
        // 发送请求
        // 如果请求不成功,则终止函数执行
        // 清空图片列表
        this.fileList = []
        this.$nextTick(() => {
          //回填数据信息  
          setTimeout(() => {
            // 图片上传组件填充图片
            this.fileList1.push({
              uid:-1,
              status: 'done',
              url: record.recordUrl
            })
          })
        })
      } catch (error) {}
    },
    // 处理函数，当关闭预览图片弹层时触发
    handleCancel() {
      this.previewVisible = false
    },
    // 处理函数，当预览图片时触发
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    // 上传图片的方法
    async uploadPicture(file) {
      try {
        // 发送请求
        const res = await upload({ file })
        return
      } catch (error) {}
    },
    // 上传图片的方法
    uploadImg(file) {
      const newData = new FormData()
      const uid = file.file.uid
      newData.append('File', file.file)
      upload(newData).then(res => {
          this.fileList = []
          this.fileList.push({
            uid: uid,
            status: 'done',
            url: res.url
          })
        })
        .catch(err => {
          console.log('失败', err)
        })
    },
    // 删除图片的方法
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
     // 处理函数，当提交添加表单时触发
    handleSubmit() {
      try {
        // 对当前表单数据进行手动校验
        this.form.validateFields(async (err, values) => {
          // 如果表单数据校验不成功，终止函数执行
          if (err) return
            // 准备请求参数
            const requestPayload = {purchaseVoucherUrl: this.fileList[0].url}
            // 发送请求
            const res = await add(requestPayload)
            if(res.code !== 200) return this.$message.error('添加设备失败！')
            // 提示用户
           this.$message.success('添加设备成功！')
          // 更新表格数据
          this.getListData(1, 10)
          // 关闭弹出层
          this.visible = false
        })
      } catch (error) {
        console.log('错误')
      }
    },
  }
}
</script>

.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}