Redux+React-WeUI使用WeUI的Uploader控件上传图片

问题描述

问 题

怎么使用React-WeUI的Uploader控件上传图片?

如下图, react-weui渲染的新上传的图片是一个li标签里的背景图片, 已经压缩过的base64编码. files的base64编码可以在onChange事件内获取到, 包括原文件的size. 但是, 如何使用Uploader控件来做图片上传, 谁有已经做过的方案可以提供吗?

Uploader控件示例代码: https://github.com/weui/react...

解决方案

自己回答吧，刚刚完成了调试。以下代码表单了只是个意思， 和原调试成功的代码有区别。原先代码使用React-Redux的dispatch来修改State值，这里用React的this.setState来修改。

Uploader控件可以添加onClick事件来修改上传图片的事件。

<Uploader title="图片上传"
          files={files}
          onError={msg => alert(msg)}
          maxCount={4}
          onClick=**{handleClick}**
        />
        
function handleClick(e) {
    e.preventDefault();
    
    wx.config({
        ~ // 省略的jssdk配置信息
    });
    
    wx.chooseImage({
        ~ // 省略的其他chooseImage配置参数
        success: function(res) {
            var localIds = res.localIds; // 可以用在img src熟悉上的值
            
            // 一次上传一张图片
            localIds.map(localId => {
                wx.uploadImage({
                   ~ // 省略的uploadImage其他配置参数
                   success: function(res) {
                       var serverId = res.serverId; // mediaId
                       // 更新控件state
                       this.setState({
                           { ...files, {url: localId} }
                       });
                   }
                });
            }
        }
    });
}

这篇关于Redux+React-WeUI使用WeUI的Uploader控件上传图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！