# 图片上传逻辑
# 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 函数
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);
}
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 模板
<input type="file" class="file-input file-input-bordered file-input-sm w-7/12" @change="handleFileChange($event, item.serial_num)" />
1
怕忘记,遂写,希望以后能记下来
写于综合阅览室