备忘录————图片上传逻辑

图片上传逻辑

API

import { request } from "@/apis/axios";

const saveImgAPI = (data: FormData | null) => {
    return request("/api/user/upload", {
        data: data,
        method: "POST",
        headers: {
            "Content-Type": "multipart/form-data"
        }
    });
};

export default saveImgAPI;

函数

const handleFileChange = async (event, serial_num: number) => {
    const file = event.target.files[0];
    if (!file) return;
    const formData = new FormData();
    formData.append('img', file);
    useRequest(() => saveImgAPI(formData), {
        onSuccess(res) {
            const option = localOptions.value.find(item => item.serial_num === serial_num);
            if (option) {
                option.img = res.data;
            }
        },
        onError(error) {
            ElNotification.error("上传图片失败"+ error);
        }
    });
};

模板

<input type="file" class="file-input file-input-bordered file-input-sm w-7/12" @change="handleFileChange($event, item.serial_num)" />

怕忘记,遂写,希望以后能记下来

写于综合阅览室