อัปโหลดและใช้งานรูปภาพบน Cloud ง่ายๆและฟรีด้วย Vercel Blob

npm i @vercel/blob

<template>
    <input
        id="imageUpload"
        @change="handleFile"
        type="file"
        accept="image/*"
        hidden
    />
    <img
      :src="value"
      @click="chooseImg"
    >
</template>
<script>
    export default {
        methods : {
            chooseImg () {
                let fileUpload = document.getElementById("imageUpload");

                if (fileUpload != null) {
                    fileUpload.click();
                }
            },
            handleFile (e) {
                const files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                if(files[0].size <= 1000000){
                    //ส่งค่า File object ออกไปทาง file props
                    this.$emit('file',files[0])
                    //แสดงรูปภาพที่เลือก
                    this.createBase64(files[0]);
                }else{
                    window.alert('ขนาดไฟล์รูปภาพต้องน้อยกว่าหรือเท่ากับ 1 MB.');
                }
            },
            createBase64(fileObj) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.value = e.target.result
                };
                reader.readAsDataURL(fileObj);
            },
        },
        props: {
            file : {
                type : Object,
                default : null
            },
        }
    }
</script>

<template>
    <Profile @file="getFile"/>
    <button type="button" @click="upload">Upload</button>
</template>
<script>
import http from '@/constants/api';
import Profile from '@/components/Profile.vue'
  export default {
    data () {
      return {
        file : null,
        id : 2
      }
    },
    methods:{
        getFile(fileObj){
          this.file = fileObj
        },
        upload(){
            if(this.file){
                const formData = new FormData();
                formData.append("file",this.file);
                return http.post(`/upload/${this.id}`,formData);
            }
        }
    },
    components : {
        Profile
    }
  }
</script>

const expressFileupload = require('express-fileupload');

...

const app = express();
app.use(expressFileupload())

...

const { put,del } = require('@vercel/blob');

const db = require("../models");
const Cow = db.cow;

exports.upload = async (req,res) => {
  const id = req.params.id;

  if (!req.files) {
    return res.status(500).send({ msg: "file is not found" })
  }

  const myFile = req.files.file;
  //อัปโหลดรูปไปยัง Blob
  const blob = await put(myFile.name, myFile.data, {
    contentType : myFile.mimetype,
    access: 'public',
    token : process.env.BLOB_READ_WRITE_TOKEN
  });

  const cow = await Cow.findById(id).exec();

  //ถ้ามีรูปที่เคยอัปโหลดไว้ใน Blob แล้ว เราจะลบรูปที่ไม่ใช้แล้วด้วย
  if(cow.image && cow.image.indexOf('https') >= 0){
    await del(cow.image);
  }
  
  //นำ URL รูปใหม่ที่ได้จาก Blob มาอัพเดต
  await Cow.updateOne({_id:id},{image:blob.url}).exec();

  res.status(200).send({blob});
}