账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    elementUi中el-upload上传图片之后怎么发送post请求
    34
    0

    用elementUi中el-upload上传图片,之后要把图片数据和表单数据一起发送post请求给后台,表单数据后台可以取到,但是图片数据一直取不到请问是什么原因?

    <div class="item-pic-bg">
        <img class="bgImg" :src="src" alt="背景图片">
            <el-upload
                class="upload"
                accept="image/*"
                :show-file-list="false"
                action="/upload/uploadFile"
                :on-success="handleSuccess">
            <el-button type="primary" @click="refeshLoad()" class="refesh btnNoBorder button b2">
            <i class="iconfont icon-shangchuan"></i> 点击上传
            </el-button>
            </el-upload>
    </div>
    //上传图片成功
                handleSuccess: function (response, file, fileList) {
                    this.src = file.url;
                    this.formData.files.push(file.raw);
                },
                
                   //保存
                saveIt: function () {
                    let formData = new FormData();
                    formData.append('files', this.formData.files);
                    //post请求         
                    saveSlideShow(formData).then((res) => {
                    })
                },
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 在Element UI中,可以通过Element Upload组件的onUpload方法和upload事件处理函数来实现上传图片后发送POST请求。

      首先,需要在你的Vue项目中引入Element UI和Element Upload组件:

      ```html

      ```

      然后,在你的组件中添加<el-upload><el-upload-component>

      ```html ```

      在组件中,你可以添加一个data属性来存储上传的图片数据:

      ```html

      ```

      在你的服务端,可以使用Node.js和Express框架来处理POST请求。你需要创建一个POST请求的路由,接收图片数据,并在成功或失败时返回适当的响应。

      ```javascript const express = require('express'); const app = express();

      app.post('/upload', (req, res) => { // 处理POST请求 });

      app.listen(3000, () => { console.log('Server is running on port 3000'); }); ```

      以上就是Element UI中el-upload上传图片后发送POST请求的步骤。你可以根据自己的需求进行修改和扩展。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部