首页 前端知识 从此再也不用担心图片上传难题!一起来掌握Vant的Van-Uploader插件和jQuery技巧

从此再也不用担心图片上传难题!一起来掌握Vant的Van-Uploader插件和jQuery技巧

2024-08-12 10:08:18 前端知识 前端哥 416 460 我要收藏

在这里插入图片描述

html

  <van-uploader v-model="fileList" multiple :max-count="3" :after-read="afterRead" preview-size="95"/>

js

            afterRead(file) {
                let _this = this;
                // 此时可以自行将文件上传至服务器
                console.log(file);

                console.log(this.fileList)

                const formData = new FormData(); // 声明一个FormData对象
                formData.append("image", file.file);
                $.ajax({
                    url: "/member/upload/{$agentState}",
                    type: 'POST',
                    // contentType: 'multipart/form-data',
                    contentType: false,
                    processData: false, // 增加这一行,不处理参数
                    data: formData,
                    success: function (res) {
                        _this.fileList.forEach((ele, i) => {
                            if (ele.file.lastModified == file.file.lastModified) {
                                _this.fileList[i].content = res.data.url
                            }
                        });

                    }
                })
            },

我们首先将上传的文件添加到fileList中,然后创建一个新的FormData对象,并将文件添加到其中。接下来,我们使用jQuery的ajax()方法将FormData发送到服务器。在这里,我们需要将contentType和processData设置为false,这样jQuery就不会对数据进行自动处理

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15364.html
标签
评论
发布的文章

jQuery3 学习手册(三)

2024-08-18 22:08:04

vue和jQuery有什么区别

2024-04-29 11:04:47

推荐项目:jQuery.Gantt

2024-08-18 22:08:37

jQuery UI 秘籍(一)

2024-08-18 22:08:15

jQuery详解

2024-04-29 11:04:38

echarts饼图点击图例问题

2024-08-18 22:08:48

echarts天气折线图

2024-08-18 22:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!