前端上传裁切图片插件-html5图片裁切上传

课程名称：Web前端架构师

课程章节：第 5 章，第 11 周

讲师：张轩

课程内容：通过测试驱动开发，完成上传组件的hook

分析

我的上传组件需要支持传入的钩子功能

<upload-file beforeUpload="xxx"/>

钩子函数有

写测试文件

上传前

beforeUpload 返回一个布尔值或布尔值的承诺

it.only('before upload check', async () => {
  const beforeUpload = vi.fn((file:File) => file)
  const wrapper = mount(UploadFile, {
    props: {
      beforeUpload
    }
  })
  const fileInput = wrapper.get('input').element
  // 设置 input val, 并返回上传文件的对象
  const testFile = setInputVal(fileInput)
  wrapper.get('input').trigger('change')
  expect(beforeUpload).toHaveBeenCalled()
  expect(request).not.toHaveBeenCalled()
  expect(wrapper.findAll('li').length).toBe(0)
  // 测试 beforeUpload 的参数是否时上传的文件
  expect(beforeUpload).toHaveBeenCalledWith(testFile)
})

测试布尔值

it.only('before upload check use boolean', async () => {
  const wrapper = mount(UploadFile, {
    props: {
      beforeUpload: vi.fn(() => false)
    }
  })
  const fileInput = wrapper.get('input').element
  setInputVal(fileInput)
  wrapper.get('input').trigger('change')
  await flushPromises()
  expect(request).not.toHaveBeenCalled()
  expect(wrapper.findAll('li').length).toBe(0)
})

测试 promsie 布尔值，添加 await flushPromises()

it.only('before upload check use promise boolean', async () => {
  const wrapper = mount(UploadFile, {
    props: {
      beforeUpload: vi.fn(() => new Promise(resolve => {
        setTimeout(() => {
          resolve(false)
        }, 300)
      }))
    }
  })
  const fileInput = wrapper.get('input').element
  setInputVal(fileInput)
  wrapper.get('input').trigger('change')
  await flushPromises()
  expect(request).not.toHaveBeenCalled()
  expect(wrapper.findAll('li').length).toBe(0)
})

写代码

接下来写代码前端上传裁切图片插件，代码很简单前端上传裁切图片插件，只有下面几行

if (props.beforeUpload) {
 const res = await props.beforeUpload(uploadFile)
 if (!res) {
   return
 }
}

本次测试的代码比实现代码多很多，但是可以很好的反映用户所有的操作流程

测试写得越详细，越能在代码中发现问题。

本周回顾

未完成的功能

上传挂钩

拖放上传

需要优化和添加内容

with-credentials 请求时是否携带cookie，默认为false，图片在上传前裁剪