vue的图片上传

关于vue3的图片上传，这里记录一下，有兴趣的朋友可以参考。。。。
 

 <van-uploader
          :after-read="afterRead"
          v-model="headImg"
          :max-count="1"
          class="picture"
        />

const fileList = ref();

const afterRead = (file) => {
  let img = file.file;
  const form = new FormData();
  form.append("file", img, img.name);
  console.log(file, 123456);
  File(form, { id: 23 })
    .then((arr) => {
      console.log(arr);
      fileList.value = arr.data.url;
      console.log(fileList.value);
    })
    .catch((err) => {
      console.log(err);
    });
};

const headImg = ref([]);
function publish() {
  console.log(item);
  console.log(uid.id);
  console.log(number.value);
  console.log(content.value);

  Scenicom(
    {
      scenic_id: item,
      user_id: uid.id,
      score: number.value,
      content: content.value,
      img: fileList.value,
    },
    { id: 23 }
  )
    .then((arr) => {
        showSuccessToast("评论成功");
        console.log(arr);
    })
    .catch((err) => {
      console.log(err);
    });
}
// 假设您有一个方法来检查图片是否已上传  
function isImageUploaded() {  
  return fileList.value !== null && fileList.value !== undefined;  
}