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

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

2024-08-12 10:08:18 前端知识 前端哥 433 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
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

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