通过 new FormData文件上传

最新推荐文章于 2024-07-15 02:40:38 发布

晓峰666

最新推荐文章于 2024-07-15 02:40:38 发布

阅读量1.2k

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_44766377/article/details/128595142

版权

该代码段展示了如何使用JavaScript创建一个输入元素来选择文件，判断上传的是否为图片，然后利用FormData对象将文件数据发送到指定的API接口进行上传。成功后，发送图片的URL到聊天界面，并显示发送成功的提示。若上传的不是图片，则显示错误信息。

摘要由CSDN通过智能技术生成

const sendImg = () => {
            let input = document.createElement('input'); //创建一个input元素
            input.type = 'file';//添加属性
            input.id = 'file';
            document.body.appendChild(input);//添加到html结构上
            let file = document.querySelector('#file');//获取到元素
            file.onchange = async event => {//定义change事假
                if (event.target.files[0].type.search('image') !== -1) {//判断上传文件类型（可自行判断）files[0]只上传一个文件 多个自行修改
                    const form = new FormData();//用于创建一个文件流对象
                    form.append('file', event.target.files[0]); //添加文件流 （流名称，流）
                    api.uploadFile(form) //接口
                        .then(res => {
                            sendMessage('img', res.data.full_url);
                            message.success('发送成功', 1);
                        })
                        .catch(() => {
                            message.error('发送失败', 1);
                        });
                    document.body.removeChild(input);
                } else {
                    message.error('只支持上传图片', 1);
                }
            };
            file.click();
        };

//封装接口方法
//文件上传
export const uploadFile = data =>
    request({
        url: '/doctor/upload/file',
        method: 'post',
        multiple: false,
        data,
    });

接口文档