1.定义结构
javascript
<Upload
accept="image/*"
listType="picture-card"
fileList={fileList}
onChange={onChange}
onPreview={onPreview}
customRequest={handlePreview}
>
{fileList.length < 1 && "+ 上传封面"}
</Upload>
2.内容
javascript
import type { GetProp, UploadFile, UploadProps } from "antd";
const [fileList, setFileList] = useState<UploadFile[]>([]);
const onChange: UploadProps["onChange"] = ({ fileList: newFileList }) => {
setFileList(newFileList);
};
const onPreview = async (file: UploadFile) => {
let src = file.url as string;
if (!src) {
src = await new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file.originFileObj as FileType);
reader.onload = () => resolve(reader.result as string);
});
}
const image = new Image();
image.src = src;
const imgWindow = window.open(src);
imgWindow?.document.write(image.outerHTML);
};
const handlePreview = async (file: any) => {
const form = new FormData();
form.append("file", file.file);
const res: any = await UploadApi(form);
console.log("上传结果", res);
if (res.status === 0) {
const FileList = [
{
uid: "1",
name: res.name,
url: res.url,
},
];
setFileList(FileList);
}
return false;
};
3.nodejs接收(app.js配置)
javascript
const multer = require("multer");
let objMulter = multer({ dest: "./public/upload" });
//实例化multer,传递的参数对象,dest表示上传文件的存储路径
app.use(objMulter.any()); //any表示任意类型的文件
// app.use(objMulter.image())//仅允许上传图片类型
app.use(express.static("./public"));
4.定义接口
javascript
const fs = require("fs");
async function UploadFile(req, res) {
console.log("上传内容", req.files);
const name = Buffer.from(req.files[0].originalname, "latin1").toString(
"utf8"
);//nodejs对于中文产生乱码的解决办法
let oldName = req.files[0].path; //获取名字
//给新名字加上原来的后缀
let newName = req.files[0].path + name;
fs.renameSync(oldName, newName); //改图片的名字
res.send({
status: 0,
name: name,
url: "http://localhost:6789/upload/" + req.files[0].filename + name, //该图片的预览路径
});
}