如何使用JavaScript发送post请求上传图像

Question

问题如图，如何实现？求有时间的大佬教一下

案例代码

 $.ajax({
                    url: '/api/upload/' + window.JoeConfig.ZHINIAN_TUCHUANG_TOKEN,
                    dataType: 'json',
                    type: 'POST',
                    async: false,
                    data: formData,
                    processData : false, // 使数据不做处理
                    contentType : false, // 不要设置Content-Type请求头
                    success: function(data){
                        if (data.success) {
                            var tuchuang_img_url = "![" + data.url + "](" + data.url + ")";

Answer 1

1. 找一个上传组件，比如lelement ui的上传组件，不想找的话用原生的文件选择器也行
   <input type="file" /> <input type="file" />
2. 选择文件后，获取input的值，并将其转换成formdata格式
   例如：

var file = docunment.getElementById('xxx')
let formData = new FormData();
// 后端接受参数 ，可以接受多个参数
formData.append('files', file.file);

 $.ajax({
        url: '/api/upload/' + window.JoeConfig.ZHINIAN_TUCHUANG_TOKEN,
        dataType: 'json',
        type: 'POST',
         async: false,
        data: formData,
        headers: {          //!!!!!!!!注意加上这个
                     "Content-Type": "multipart/form-data"
            }
        processData : false, // 使数据不做处理
        contentType : false, // 不要设置Content-Type请求头
        success: function(data){
           if (data.success) {
                 var tuchuang_img_url = "![" + data.url + "](" + data.url + ")";
           }
        }
})

如有帮助，麻烦点个【采纳此答案】，谢谢