RE: Nuxt开发指南

[lemooljiang]

//前端设计
<n-upload
  :default-upload="false"
  list-type="image-card"
  @change="handleChangeX"
>
  上传参考图
</n-upload>
const handleChangeX = (options) => {
  console.log(123, options, 569, options.fileList)
  if(options.fileList.length == 0) {
    return
  }
  upImageX(options.fileList[0].file) 
}
const upImageX = async(file) => {
    let formData = new FormData()
    formData.append('file', file)
    const option = {
      method: "POST",
      body: formData
    }
    const { data, pending, error, refresh } =  await useFetch("http://localhost:7100/uploadimg", option)
    if(data.value){
      console.log(88, data.value.img_url)
    }  
}
// 注意点：表单必须是 form-data 格式， 文件的字段必须与后端保持一致


// 另一种写法，也可直接上传
<n-upload
    action="http://localhost:7100/uploadimg"
    :default-file-list="fileList"
    list-type="image-card"
    @finish="handleFinish"
  >
    点击上传
</n-upload>
const handleFinish = ({ file, event}) => {
  console.log(256, event)
  message.success((event?.target).response)
  console.log(6556, (event?.target).response)
}