ajax传文件调用后端接口formdata(不废话,直接上例子用jquery写的)

 $(function(){
            $("#upload").click(function(){
                var formData = new FormData();
                formData.append('file', $('#file')[0].files[0]); //后端所需字段file
                formData.append('appCode','10038');  //后端所需字段appCode
                formData.append('timeStamp', '10038');  //后端所需字段timeStamp
                formData.append('token', '10038');  //后端所需字段token
                formData.append('apiId', '10038');  //后端所需字段apild
                formData.append('sence','10038');  //后端所需字段sence
                $.ajax({
                    url: 'http://aixcx.yiche.com/robotweixinvoice/RobotApi/ImgToBase64',
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false
                }).done(function(res) {
                    debugger
                    alert(res)
                }).fail(function(res) {
                    debugger
                    alert(res)
                });
            });
        })

       题外话{

  1. processData: false, // 不处理数据(有需要可设置,填在ajax大括号中即可)

  2. contentType: false // 不设置内容类型(有需要可设置,填在ajax大括号中即可)

      }

前端代码(Vue 3): ```html <template> <div> <input type="file" ref="fileInput" @change="handleFileUpload"> <button @click="uploadImage">上图片</button> </div> </template> <script> import axios from 'axios'; export default { data() { return { selectedFile: null }; }, methods: { handleFileUpload(event) { this.selectedFile = event.target.files[0]; }, uploadImage() { const formData = new FormData(); formData.append('image', this.selectedFile); axios.post('/api/upload', formData) .then(response => { // 处理上成功后的逻辑 }) .catch(error => { // 处理上失败后的逻辑 }); } } }; </script> ``` 后端代码(Node.js + Express + MySQL): ```javascript const express = require('express'); const multer = require('multer'); const mysql = require('mysql'); const app = express(); const upload = multer({ dest: 'uploads/' }); // 创建MySQL连接 const connection = mysql.createConnection({ host: 'localhost', user: 'your_username', password: 'your_password', database: 'your_database' }); // 处理图片上请求 app.post('/api/upload', upload.single('image'), (req, res) => { const file = req.file; const sql = 'INSERT INTO images (filename) VALUES (?)'; connection.query(sql, [file.filename], (error, results) => { if (error) { console.error(error); res.status(500).send('上图片失败'); } else { res.send('上图片成功'); } }); }); // 启动服务器 app.listen(3000, () => { console.log('服务器已启动'); }); ``` 注意事项: 1. 前端代码使用`<input type="file">`标签来选择文件,并使用`axios`库发送带有文件的`POST`请求到后端。 2. 后端代码使用`multer`中间件来处理文件,并将文件保存到服务器的`uploads/`目录下。 3. 后端代码使用`mysql`库连接MySQL数据库,并将上成功的图片信息保存到数据库中。请根据实际情况修改数据库配置。 4. 以上代码仅为示例,实际项目中还需添加错误处理、文件类型验证、文件大小限制等相关逻辑。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值