微信小程序上传图片wx.uploadFile

目录

上传图片

删除图片

预览图片

采用vant ui 样式库

使用wx.uploadFile要注意需要在微信公众平台配置uploadFile的合法域名否则发布体验版的时候会出现图片上传失败的问题

<van-uploader file-list="{{ fileList }}" bind:click-preview="previewImg" max-count="4" bind:after-read="afterRead"  bind:delete="deleteFile">
      <van-icon name="photograph" />
</van-uploader>

上传图片

//图片上传
    afterRead (event) {
        const { file } = event.detail;
        let that = this;
        wx.uploadFile({
            url: '上传路径',
            filePath: file.path,
            name: 'file',
            formData: {},
            header: {
                Authentication: wx.getStorageSync('token')
            },
            success (res) {
                const data = JSON.parse(res.data);
                console.log('data',data);
                let picUrl = '请求返回的文件路径'
                let fileList = that.data.fileList;
                fileList.push({
                    url: picUrl
                })
            },
        });
    },

删除图片

// 删除图片
    deleteFile (e) {
        let { index} = e.detail;
        let fileList = this.data.fileList
        fileList.splice(index, 1);
    },

预览图片

//预览图片
    previewImg (e) {
        let { index } = e.detail;
        let fileList = this.data.fileList;
        wx.previewImage({
            current: fileList[index], // 当前显示图片的http链接
            urls: fileList // 需要预览的图片http链接列表
        })
    },